When we first sat down to start designing this site we had one priority over everything else. Speed. Not only do we hate slow loading websites, we believe in simplistic designs and are crazy about optimizing websites to the extreme. Though most of these tips can be applied for any websites, we will be focusing on wordpress tips.
What is a good page loading time?
Before we start optimizing the site we wanted to know what will be a good loading time to aim for. So we tested some of the most popular websites for speed with the help of pingdom tools.
| Website | Load Time |
| Nytimes | 4.7 sec |
| BBC | 2.8 sec |
| Wired | 5.9 sec |
| Engadget | 8.1 sec |
| Gizmodo | 7.8 sec |
| Smashing Magazine | 1.3 sec |
| CNN | 4.7 sec |
| Arstechnica | 4.9 sec |
With 1.3 sec page loading time SM was the fastest site on a wordpress install. Considering the fact that SM is a high traffic image heavy site, this number makes it even more impressive. The average speed was just over 5 sec, which was also our target and we thought was a good speed.
1) Install PHP opcode cacher:
Opcode cacher works by caching compiled PHP scripts instead of parsing it on each request. This is specially helpful for CMS like wordpress that depend heavily on PHP. Our personal favorites are xcache, APC and eAccelerator.
2) Use CDN:
There is only so much speed optimization you can do on your server side and with good design practice. If your web server is located in USA and someone from the other side of the world tries to access your webpage he will likely see speed issues. Nowadays Amazon S3 is the coolest thing to use for static file offloading and strictly speaking S3 server do not provide the best solution when it comes to speed, because S3 is not really a CDN its a Cloud hosting service. There are a number of very well known CDN out there, but for small sites we recommend cachefly and steadyoffload (which we are using).
3) Optimize your image using smushit:
If your website depends heavily on images, consider using smushit for image optimization. It uses format specific image optimization tools to squeeze every last bit out of your image without compromising their look or quality. There are other similar services but we prefer them because they have a wordpress plugin which optimizes your images for you.
4) Replace images with CSS:
While we can take advantage of CDN and smishit services to load images faster, consider replacing images altogether with CSS when possible. A lot of websites use image for static background and borders which can be easily replaced with CSS. We think, for best performance, the only image a site design should use is the Logo. Images within content are not part of the design process.
5) Use <ifame> to load advertisement scripts:
We all hate iframe, but when it comes to loading JavaScripts for advertisement iframe can be a blessing. A large part of a side loading time gets wasted on adscripts, so we put the script on a separate html and load it from an iframe, in this way the site doesnt have to wait for the adscript to load. Read more about it in this thread. You should consult with your Ad provider to see if this is against their TOS. To the best of my knowledge this is ok to do with Googleads and many popular websites use this trick for a faster load time.
1: <body onload=”javascript:window.adFrame.location.href=’adScript.html’;”>
6) Combine CSS and JavaScript files:
By combining CSS and JavaScript files you will make your site load faster because this will reduce the number of HTTP calls that needs to be made in order to load a webpage. Check out this nice tutorial on how to do this using PHP. This might not be practical solution for a site that used plugins that are frequently updated, but this trick significantly increases your load time.
7) Minify CSS and JavaScript:
Minification removes tabs, space and comments from the code to reduce file size. Check out WP minify plugin, this will not only compress your CSS and JS but also combine and cache them, also check out php-speedy plugin which does the same thing, but has some minor bugs. We were able to cutoff 2 sec from our loading time using this plugin.
Conclusion:
In the end, we were able to cut down our page load time from 6.6 sec to 2.5 sec, which we think is a pretty decent speed. There are several thing we can do to optimize the site further but we dont think at this point a user will see any difference even if we can shave off .5 sec more. You will notice that we didnt recommend wp super-cache, not because we dont like it, but PHP opcode already does the job for us. What optimization tricks do you guys use? Feel free to share.