Poll: Do you like this guide?
You do not have permission to vote in this poll.
106 88.33%
14 11.67%
Total 120 vote(s) 100%
* You voted for this item. [Show Results]

[Tutorial] 10 Steps for Achieving the Maximum Possible Speed for Your MyBB Forum!
Here is a guide I did an while ago.

If you own a website I am going to show you how you can increase the speed of your site with a few easy steps. Please read the whole post before attempting to make any changes.
And this should go without saying "Make a Backup!"

To start out with here are a few great sites to get a good idea on what needs to be done to improve yours.


Now that you have a bit of an idea of what/needs to improve, I will show you a few tips on how to improve your website score.

# TIP Wrote:If your site is running WordPress most of these optimization tips can be automatised by using the W3 Total Cache plug-in. If this breaks something (eg. comment system) once enabled check the JS settings within the app. It can take a little bit of trial and error to get it fully working. If in any doubt Google your host to see if they have already posted the needed settings for W3 Total Cache.

First tip is enabling gzip/Deflate.

What this does is zips the site before it gets sent. This can greatly improve a website speed as it reduces the amount of data that is sent.

If you are on a Apache web-server it will come pre-installed with mod_deflate. All you need to do is enable it.

To do this open up your .htaccess file. If you haven't got one just create a empty file and name it .htaccess

Inside there you are going to want to copy this into it:

<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE application/x-javascript text/css text/html text/xml
 <IfModule mod_setenvif.c>
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 <IfModule mod_headers.c>
 Header append Vary User-Agent env=!dont-vary
 AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
<FilesMatch "\.(css|js)$">
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header set Cache-Control "public, must-revalidate, proxy-revalidate"
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set X-Powered-By "W3 Total Cache/"
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header set Cache-Control "public, must-revalidate, proxy-revalidate"
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set X-Powered-By "W3 Total Cache/"
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|​jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods​|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xl​sx|xlt|xlw|zip)$">
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header set Cache-Control "public, must-revalidate, proxy-revalidate"
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set X-Powered-By "W3 Total Cache/"

Now just upload the file to the root of the website where the main site is located.

Next I am going to cover Caching. We can setup the server to tell the browser how long it should keep things like images, css and javascripts on a users system.

This can really help with repeat viewing as users don't have to keep re-downloading all the content of the site each time they visit.

Again we need to edit the .htaccess
Just add this to the bottom of the .htaccess file.

# TIP Wrote:If you end up using W3 Total Cache plug-in or Cloudflare.com this option isn't needed as both tools have there own built in Browser Caching settings.

<IfModule mod_mime.c>
 AddType text/richtext .rtf .rtx
 AddType image/svg+xml .svg .svgz
 AddType text/plain .txt
 AddType text/xsd .xsd
 AddType text/xsl .xsl
 AddType text/xml .xml
 AddType video/asf .asf .asx .wax .wmv .wmx
 AddType video/avi .avi
 AddType image/bmp .bmp
 AddType application/java .class
 AddType video/divx .divx
 AddType application/msword .doc .docx
 AddType application/x-msdownload .exe
 AddType image/gif .gif
 AddType application/x-gzip .gz .gzip
 AddType image/x-icon .ico
 AddType image/jpeg .jpg .jpeg .jpe
 AddType application/vnd.ms-access .mdb
 AddType audio/midi .mid .midi
 AddType video/quicktime .mov .qt
 AddType audio/mpeg .mp3 .m4a
 AddType video/mp4 .mp4 .m4v
 AddType video/mpeg .mpeg .mpg .mpe
 AddType application/vnd.ms-project .mpp
 AddType application/vnd.oasis.opendocument.database .odb
 AddType application/vnd.oasis.opendocument.chart .odc
 AddType application/vnd.oasis.opendocument.formula .odf
 AddType application/vnd.oasis.opendocument.graphics .odg
 AddType application/vnd.oasis.opendocument.presentation .odp
 AddType application/vnd.oasis.opendocument.spreadsheet .ods
 AddType application/vnd.oasis.opendocument.text .odt
 AddType audio/ogg .ogg
 AddType application/pdf .pdf
 AddType image/png .png
 AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
 AddType audio/x-realaudio .ra .ram
 AddType application/x-shockwave-flash .swf
 AddType application/x-tar .tar
 AddType image/tiff .tif .tiff
 AddType audio/wav .wav
 AddType audio/wma .wma
 AddType application/vnd.ms-write .wri
 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
 AddType application/zip .zip
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault A0
 ExpiresByType text/richtext A3600
 ExpiresByType image/svg+xml A3600
 ExpiresByType text/plain A3600
 ExpiresByType text/xsd A3600
 ExpiresByType text/xsl A3600
 ExpiresByType text/xml A3600
 ExpiresByType video/asf A31536000
 ExpiresByType video/avi A31536000
 ExpiresByType image/bmp A31536000
 ExpiresByType application/java A31536000
 ExpiresByType video/divx A31536000
 ExpiresByType application/msword A31536000
 ExpiresByType application/x-msdownload A31536000
 ExpiresByType image/gif A31536000
 ExpiresByType application/x-gzip A31536000
 ExpiresByType image/x-icon A31536000
 ExpiresByType image/jpeg A31536000
 ExpiresByType application/vnd.ms-access A31536000
 ExpiresByType audio/midi A31536000
 ExpiresByType video/quicktime A31536000
 ExpiresByType audio/mpeg A31536000
 ExpiresByType video/mp4 A31536000
 ExpiresByType video/mpeg A31536000
 ExpiresByType application/vnd.ms-project A31536000
 ExpiresByType application/vnd.oasis.opendocument.database A31536000
 ExpiresByType application/vnd.oasis.opendocument.chart A31536000
 ExpiresByType application/vnd.oasis.opendocument.formula A31536000
 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
 ExpiresByType application/vnd.oasis.opendocument.text A31536000
 ExpiresByType audio/ogg A31536000
 ExpiresByType application/pdf A31536000
 ExpiresByType image/png A31536000
 ExpiresByType application/vnd.ms-powerpoint A31536000
 ExpiresByType audio/x-realaudio A31536000
 ExpiresByType application/x-shockwave-flash A31536000
 ExpiresByType application/x-tar A31536000
 ExpiresByType image/tiff A31536000
 ExpiresByType audio/wav A31536000
 ExpiresByType audio/wma A31536000
 ExpiresByType application/vnd.ms-write A31536000
 ExpiresByType application/vnd.ms-excel A31536000
 ExpiresByType application/zip A31536000

# TIP Wrote:For an already made/complete .htaccess including blocking of know spam sites you can use this. Please back up your existing .htaccess before making any changes to it. Also copy any info from it that is missing from the pre-made .htaccess file.

Now that we have the server setup for caching and compressing lets get to the content.

The easiest and fastest thing you can do to greatly improve your site is to reduce the size of the images.

There is a great online tool called Smush.it. It basically makes the download size for images a lot smaller without any image quality loss.

At the moment the online tool isn't all that great. You need to upload each image one at a time or enter all the urls to the images.

Thankfully there is a much easier way to do this. All you need to do is install two addons for firefox. YSlow and Firebug.

Once they are installed go to your site and open Firebug. On the end you will see the YSlow tab. Click on it.

[Image: firebugpinguyosforumedi.png]

Once you have run the test click on tools. Under tools you will see Smush.it. Running the Smush.it addon instead of using the online tool will allow you to smush all the images that are on that web page with a single click and will keep the dir intact. So all you need to do once you have run Smush.it is to upload the dir with the optimized images to the root of your web server.

# TIP Wrote:For JPEG's I found RIOT works much better then Smush.it

Next I am going to show you Page Speed. Another Firefox plugin that uses Firebug. This is similar to YSlow but has some extra features like minimizing html, javascripts and css.

Just run the tool and it will let you download the optimized versions of the files. You will notice that they don't rename the optimized files the same as the ones you need to replace them with. All you need to do is have a copy of the site locally on your system. So when you download the optimized version clicking on the file it will be replacing renames it to the right name.

This next tool I will show you is the YUI Compressor. This can compress and combin CSS files and Javascripts into a singe file. This helps improve the speed as less files need to be downloaded. Just upload the files in the same order they are loaded on the web page.

# WARNING Wrote:Sometimes combing Javascripts stops them from working. So make sure you test them after you combin them.

Something that I see a lot of people do wrong when building their site is put all the css and JavaScript into the head. This is a really bad idea. Well not for the CSS. CSS should always be the first thing that is loaded so put it as high as possable and put all your JavaScript at the very bottom of the body. This way the page never gets stuck loading the JavaScript. JavaScript should always be the last thing loaded.

Search bots are great for indexing your site but if you have to many it can grind your site down to a snails pace. To help have more control over where the bots can go and how often they search the site you need to make a robots.txt file.

There are a few online generators you can use like this one to help make one. But the vaule I will be talking about is Crawl-delay.

This is how long the bot waits before checking the next page. Setting this anything between 10 and 30 secs is fine.

So in your robots.txt it will look something like this.
User-agent: *
Crawl-delay: 20

Just like the .htaccess file you want to upload this to the root of your website.

Another thing that's an issue that can slow down a site is spam bots. One of the best tools to block spam bots getting onto your site and using up bandwidth is Bad Behavior. For the Wordpress plugin you can find it here, but it has been ported to many other platforms like MyBB. So just do a Google search for Bad Behavior and the platform you are running.

Last thing you can do to improve the site is to have a CDN. These are normally not that cheap but they do help out a lot. If you really don't have any spare cash to pay out for a CDN you can use what I have setup for my sites.

All the Pinguyos.com sites are using Cloudflare.com. This is a free service that has a few more benefits then just using a normal CDN.

It comes with a lot of tools you can use. The only tool I had issues with was Rocket Loader™. So if your site uses a lot of JavaScript elements you may want to avoid using that feature/tool. Apart from the issues I had with Rocket Loader™ (that is very simple to enable or disable) I can't speak more highly of them. It really is a great standard CDN that has the bonus of having extra features/tools.

As it costs nothing to use, you really don't have anything to loose giving them ago.
Just remember if something stops working on your site it will be something to do JavaScript. So just be careful what settings you turn on to optimize JS.

To find out more about Cloudflare.com you can have a read of these reviews.


My Scores for: http://pinguyos.com/

[Image: FdlDq.png]

[Image: oBUaK.png]

[Image: eLlEl.png]

For anyone that wants to get into advanced website design I highly recommend Tutorialzine.com


You may also want to check out this thread with some tips for MyBB:
[Image: Jn29h.png]
DONATE TO PINGUY OS or show some love on Flattr.com

Messages In This Thread
RE: [Tutorial] 10 Steps for Achieving the Maximum Possible Speed for Your MyBB Forum! - by pinguy - 2012-10-28, 04:30 PM

Forum Jump:

Users browsing this thread: 1 Guest(s)