7 Ways of Turbocharging Your Website Performance for FREE
June 1, 2013 1:58 pm Leave your thoughts
© Joseasreyes | Dreamstime Stock Photos & Stock Free Images
As some of might have known, I recently released my photography blog, the rv35mm.com. Now, the problem with a blog like that is always performance, because there are a lot of images being served everytime someone open a page or look at a specific post, which would have a higher quality image. I spent a bit of time doing some research on how to speed up this website while of course maintaining low cost operation, especially that site is really just my photography showcase. So today I’d like to share with you everything that I did so far to make this website load so much faster from when it was released a couple weeks ago.
Some of the suggestions today are specific to WordPress however the techniques can be applied to most websites in general.
Optimise Your Template Graphics
This goes without saying of course, but sometimes our creative minds defeat the technical minds. Always optimise your background images or textures with your image editing software. Choose the correct image format according to your needs. For example, saving in PNG can result in bigger filesize than saving in JPEG, therefore if the quality loss from JPEG compression is acceptable then use JPEG by all means.
In addition, if your site uses a lot of custom buttons, menu bars, etc; use image sprite. Slicing up images like what we’ve been doing traditionally increases a lot of requests, because instead of downloading one image called for example “menu_bar_sprite.png” the web browser have to download “menu_bar_left.png”, “menu_bar_right.png”, “menu_bar_repeat_texture.png”. Using sprites would mean one request instead of three requests.
Simplify the CSS Rules
I talked about this in my previous article here. A lot fo the time we keep adding new clases and overrides, while this might be okay in short term, in the long run this is not a good idea at all. The more rules you have, the bigger the CSS file size to download and the more rules the browser has to process.
Minify Your Javascript and CSS
Minifications can be done in many different ways, such as using YUI Compressor or Google Closure. Thankfully for WordPress blogs there is a very useful plugin called the W3 Total Cache. With this plugin, it is possible to automatically concatenate and minify almost all of the CSS rules and Javascript files in your WordPress installation. By concatenating Javascripts and minifying the CSS (removing white spaces) we reduce the number of requests that the browser have to make in order to download all the website’s Javascript and CSS files.
Use NextGen Gallery and Take Advantage of its Image Compressions Ability
A lot of people use the in-built WordPress media capabilities to upload their images and put them up in the web. While this is a great feature, it lacks the capabilities that NextGen Gallery offers. This free plugin allows us to specify image auto resize dimensions and compression percentages. The best thing about having these abilities is that you won’t have to manually compress and resize each of the images that you are going to upload to the website on your computer.
It won’t matter if you forget to compress the image anymore, NextGen Gallery will take care of it for you. In addition this plugin can also create custom watermark on your images, which is really great for photography sites.
Offload Your Javascript Libraries
Popular javascript libraries such as jQuery, angular, emberjs and many more are hosted of many free CDNs (Content Delivery Network). Use these CDN hosted versions so that your web server won’t have to serve them. Since these libraries are used by a lot of people and the CDN has edge servers all over the world, chances are that they load so much faster than your web server and they won’t carelessly delete the Javascript libraries either.
Of course if it’s your own server you have complete control over the JS library files and can be sure you won’t delete them, but I think the speed of these CDNs offset the need for complete control over these libraries files.
Some of the most popular CDNs which I personally trust and use are:
- Google Hosted Libraries: https://developers.google.com/speed/libraries/devguide
- CDNJS: http://cdnjs.com/
- JQuery’s own CDN: http://jquery.com/download/
So be sure to offload these libraries to increase your website performance.
Cache Your Contents – Avoid Database Hits
Database queries are expensive no matter what you say. Everytime someone request an article, WordPress will query the database to find the particular article based on either permalinks, categories or tags. The most common being searching based on permalinks (the URL). Now, the content of your article, like this one for example; isn’t going to change every day. Therefore there is simply no reason to query the database each time someone wants to read the article.
To avoid doing so, we can cache the contents either as a text file or as an entry in a caching server such as Memcache or APC. Since we talk about WordPress, we can easily do this using the W3 Total Cache. The plugin allows us to choose which caching mechanism that we want to use, raging from disk cache, dedicated servers such as APC to multiple caching servers such as Memcache.
If you are using shared hosting chances are that you won’t have APC or Memcache only the disk caching. Don’t worry though as using disk cache is actually so much better than no caching at all. I personally have tried using Memcache server and yes, you can actually see the massive improvements on page load performance. Whatever caching mechanism you have available, make sure you enable it, because it helps a lot.
Use Content Delivery Network
Normally, CDN (Content Delivery Network) is only used by large companies which requires solid security and performance. In a nutshell, CDN basically caches your website’s images and contents on their servers spread across the globe. Therefore if your website is hosted in California but someone in Japan wants to access it, they will get some of the website’s assets from a server nearest to them; from Tokyo for example. By doing this, the website can be downloaded at a much faster rate than normally when data must be transferred across the globe to reach the user.
This comes at some cost however and a lot of companies pay handsomely to use professional CDNs such as Akamai. Of course Akamai’s performance is undoubtedly good and their uptime is guaranteed; therefore I think it’s a good idea to use them if you are running a large scale online based business.
However we are talking about WordPress blogs here, I don’t know about you but I don’t really allocate that much budget for WordPress blogs. Then comes Cloudflare to the rescue. This is is basically a high performing affordable CDN. We are talking about free for the most basic plan. I started using their CDN for rv35mm and I can immediately see the difference. Each pages are loaded much snappier and the index page which contains a lot of thumbnails loaded almost instantly. In addition, the W3 Total Cache plugin also have added integration with CloudFlare CDN, giving us the ability to tell Cloudflare if we need to refresh their cache.
All you need to do is basically sign up for their basic plan and do some minor change to your domain’s Nameservers configuration. The rest are done by Cloudflare automatically.
Recap
So let’s recap our recommendations today. If you do all these 7 steps, I can almost guarantee you that you’ll see a lot of performance improvements on your website.
- Optimise your template graphics
- Simply your CSS rules
- Minify you javascript and css
- Use NextGen gallery and make use of their image compressions ability
- Offload javascript libraries
- Cache contents and avoid database hits
- Use Content Delivery Network
Good luck turbocharging your website :)
Categorised in: Performance