MyBB Community Forums

Full Version: [Tutorial] 10 Steps for Achieving the Maximum Possible Speed for Your MyBB Forum!
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
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.

http://gtmetrix.com/
http://tools.pingdom.com/
http://www.webpagetest.org/

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>
 <IfModule mod_headers.c>
 Header append Vary User-Agent env=!dont-vary
 </IfModule>
 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
</IfModule>
<FilesMatch "\.(css|js)$">
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header set Cache-Control "public, must-revalidate, proxy-revalidate"
 </IfModule>
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set X-Powered-By "W3 Total Cache/0.9.1.3"
 </IfModule>
</FilesMatch>
<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"
 </IfModule>
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set X-Powered-By "W3 Total Cache/0.9.1.3"
 </IfModule>
</FilesMatch>
<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"
 </IfModule>
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set X-Powered-By "W3 Total Cache/0.9.1.3"
 </IfModule>
</FilesMatch>

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>
<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
</IfModule>

# 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.

http://blog.cloudflare.com/58611873
http://jesscoburn.com/archives/2011/03/2...loudflare/
http://developdaly.com/web-design/cloudf...e-rate-94/
http://www.whoishostingthis.com/blog/201...iew-weeks/

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

http://tools.pingdom.com/fpt/#!/eRzE1wUF...guyos.com/
[Image: FdlDq.png]

http://gtmetrix.com/reports/pinguyos.com/0WMbRA3J
[Image: oBUaK.png]

http://www.webpagetest.org/result/121125_Q1_3AV/
[Image: eLlEl.png]

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

http://tutorialzine.com/category/tutorials/

You may also want to check out this thread with some tips for MyBB:
http://community.mybb.com/thread-130298.html
(2012-08-09, 07:46 PM)Euan T. Wrote: [ -> ]Massive bump here, but somebody recently contacted me regarding an earlier post I made in this post about setting cache control headers and enabling server side compression of static resources.

To do the above (and various other things such as adding correct MIME types and ETags), simply add all of the following to your .htaccess file:

<IfModule mod_mime.c>
    AddType text/css .css
    AddType application/x-javascript .js
    AddType text/x-component .htc
    AddType text/html .html .htm
    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/vnd.ms-fontobject .eot
    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/x-font-otf .otf
    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 application/x-font-ttf .ttf .ttc
    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>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType text/html A3600
    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/vnd.ms-fontobject 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/x-font-otf 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 image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf 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
</IfModule>
<IfModule mod_deflate.c>
    <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>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
    </IfModule>
</IfModule>
<FilesMatch "\.(css|js|htc|CSS|JS|HTC)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|X​SL|XML)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|j​peg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg​|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|t​tc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|D​OC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V​|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|R​A|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
</FilesMatch>

I just did this and I note my forum a liitle bit more faster. And I was having big problems with that.

And with the step 5:
Quote:Step 5: Change your mybb_sessions table to a HEAP. (MEMORY) This table will be stored in the memory for increased performance. Go into PHPMYADMIN, click on your forum's database, find mybb_sessions, click on it, then press 'operations' at the top and change it to MEMORY.
There's any risk doing this?
alv4 I wouldn't cache this:
AddType text/html .html .htm

It will make updating pages impossible. Java, images and css is fine to cache. But I would never cache html files.
(2013-01-21, 03:55 AM)pinguy Wrote: [ -> ]alv4 I wouldn't cache this:
AddType text/html .html .htm

It will make updating pages impossible. Java, images and css is fine to cache. But I would never cache html files.

I just realized this.
I was posting on my forum and it was horrible because always an url with "new post" was sending me to an old post.
But without this... I guess that I don't have problems
With google Page Speed Service you don't need to do much of the stuff in this guide.

Using vbulletin 4.20 and no external resources I was able to get 95/100. For those who are new to it, here's an article that I found today to help you get setup but remember that for now it is invite only... regardless of that, I applied the other day & almost instantaneously got a email saying I was accepted.

http://www.datareign.com/setuping-google...bsite.html
Let your CSS files load before your JavaScript. According to Google, this is a simple yet efficient method to reduce load time. This allows JS and CSS files to download in parallel. To do this, find headerinclude in your template list (ungrouped template) and find '{$stylesheets}'. Cut that move it right to the top headerinclude.

Where i got it..........
Page Speed Grade:B
(87%)
BYSlow Grade:B
(86%)
Page load time: 0.37s
Total page size: 25.9KB
Total number of requests: 9
I wanna report osme issues I have:

1.) Putting {$stylesheets} at the top of your headerinclud does NOT work with MyAlerts. The alerts appear, but never go away.

2.) The Imei Page Optimizer does NOT work with the Unread Posts Plugin.
WARNING!!!

DO NOT CHOOSE "MEMORY" IN PHPMYADMIN UNLESS YOU ARE WILLING TO LOSE EVERYTHING IN YOUR HOLE DATABASE FOREVER!!!

The "MEMORY" option moves your ENTIRE DATABASE to your RAM. What does this mean? If you EVER need a server reboot or you lose power to your server (has happened to me several times over the years even in a secure datacenter), then ALL WILL BE LOST FOREVER.

In other words, the MEMORY option means that you DO NOT HAVE ANY OF THE DATABASE STORED ON YOUR HARD DRIVE. It is only in the RAM, and if you know how RAM works then you understand that RAM does not work like storage, it CANNOT hold data during power loss or system reboot.

Put simply, if you choose "MEMORY" (all your databases are stored on RAM ONLY), then you are in IMMINENT DANGER of LOSING YOUR ENTIRE DATABASE AT ANY TIME.

If you are still willing to take this risk, be sure to take WEEKLY BACKUPS, OR, for servers with a lot of traffic and new content, DAILY BACKUPS!!

This, way, when everything is inevitably lost one day, which I guarantee WILL HAPPEN SOONER OR LATER 100% GUARANTEED, then at least you only lose 1 day of data if you took daily database backups.
There's nothing in mybb_sessions you care about, so it doesn't matter if you loose it on rebooting. It won't affect the rest of your database.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17