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.
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:
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.
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]](https://camo.mybb.com/6937217092e43badf0a170b730481c1de131a8fa/687474703a2f2f696d673835342e696d616765736861636b2e75732f696d673835342f373838392f6669726562756770696e6775796f73666f72756d6564692e706e67)
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.
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.
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.
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]](https://camo.mybb.com/b7a87f235d7f2be6d7382a703625e5b964778983/687474703a2f2f692e696d6775722e636f6d2f46646c44712e706e67)
http://gtmetrix.com/reports/pinguyos.com/0WMbRA3J
![[Image: oBUaK.png]](https://camo.mybb.com/e14be46c7002cb136a8a5e37f32c4e149f2f1c5d/687474703a2f2f692e696d6775722e636f6d2f6f4255614b2e706e67)
http://www.webpagetest.org/result/121125_Q1_3AV/
![[Image: eLlEl.png]](https://camo.mybb.com/8f3653af0c55ecf77c00f07a0c8dbd03316f53d0/687474703a2f2f692e696d6775722e636f6d2f654c6c456c2e706e67)
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
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|xlsx|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.
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: 20Just 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/
http://gtmetrix.com/reports/pinguyos.com/0WMbRA3J
http://www.webpagetest.org/result/121125_Q1_3AV/
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
This user has been denied support.