It seems that the speed of your website is becoming more paramount these days. Google is even using it in your website rankings. So how do you make your website faster? Well it is really a balancing act between features and practicality. I will try and cover some basics specifically regarding wordpress and a brilliant plugin called w3 Total Cache.
A lot of what you see below was influenced by a talk that Scott Robbin gave at word camp Chicago 2010.
Reduce File Requests
If you are unfamiliar with a file request or http request go here. If you are using PHP you can do this with PHP Minify. Why do this? Reducing the number of requests to the server is important as your site becomes more popular. As sites grow you may see a typical webpage with 8-15 requests for JavaScript and css files alone. Popular frameworks like jQuery tend to use multiple separate js files to run their plug-ins. These plug-ins make sites look great but all the extra request can slow down the load time and rendering. Even worse if there is too much JavaScript on a page, the page could be completely download from the server but still rendering on the client machine giving the impression it is still downloading.
Here is a quick video from Google which explains about parallel downloads much better than I can.
So a couple things you can do. Combine JavaScript files and combine css files. Generally speaking as these are group together they will reduce the number of http requests and make your site load a bit faster.
A couple tools to use to monitor these requests are firebug and then within firebug there is a plugin called Yslow. (made by yahoo)
So here is a screenshot of the number of http requests that I had before using w3 total cache. 34 http request. This is pulled in firebug, click the bug icon in the lower bottom corner of firefox and the click on the net tab and make sure this is enabled.
Screenshot of my site using firebug before minified.
Below is a screen shot of my overall Yslow score. This is an E (overall 55) or pretty bad. Granted this is more for enterprise level servers, most of us don’t need a CDN for our site. Let’s see what I can do to fix this.
Yslow score before optimization
In wordpress using w3 Total Cache go to the minify settings link. In this panel we will look at the JavaScript and CSS settings. Now comes the fun part. Click the enable checkmark for JS and then we can begin adding files. I had 8 separate js files in my theme which I added. I left the default group but you can specify groups for each section of your site, depending on the js files.
Some of these javascript files are from wordpress plugins so you need to be careful as to how they are embedded. If they are embedded in the head but need to run in the footer this could cause an error.
I recommend using firebug and watching the console to check for any JavaScript errors that may come up as you start to add files to the list. Also keep in mind that when you upgrade a plug-in make sure that if the plug-in has a new js file to grab that and remove the old one from here.
Well after some tweaking I was able to get it down to 20 requests. Some of the plugins could not be combined together without breaking but I was able to reduce the js request down to a header, a footer, my google analytics, disquss comments file and then two seperate files for code markup. In addition to that all of the css has been combined into one file.
Let’s see our Yslow score now. Well we are a C now, we went from 55-71. This whole process took about 20-30 mins, so if you were to spend a little more time, I am sure you can find ways to improve your score even more.
For more information please visit weight shift where they explain great tips on improving your site speed.