Slow Website - Speed your Website Up
07 November 2011I am quite sure that you turned up here because you have been complaining that you have a slow website. Don't worry I was there too at one point. Irrelevantly of the CMS every one of us goes through a patch where the website is seemingly slow.
When a website is slow the first thing we put our head around is our host. When having a shared host or an increased number of hits we tend to blame our website host for the website being slow. But this is not always the case; did you design your own website? or maybe u asked someone to build it for you? Did you ensure that your website was optimized for speed? Did you make sure that you did not have a slow website?
Unfortunately a lot just care about Search Engine Optimization and make sure our keywords are optimized but pay little attention to website speed. Did you know that most users close a window or hit the back button if it takes more then 5 seconds to load your website? Yes unfortunately I am one of them; so it was quite irritating that whenever I wanted to visit my own blog built on WordPress and some websites that I have worked on and they performed arguably slower than the benchmark.
So what did I do to improve my website speed? Like most of you I run my website on a shared host however I did not consider upgrading my hosting package just yet. First of all I had to reduce the hits I make on the server; that would mean joining CSS & JavaScript files into one and reducing their size via minification. On WordPress I could easily do this via WP-Minify. However on other systems/websites this had to be done via either a custom extension or otherwise manually and linking to the static version of the files. This reduces the number of requests to your slow website and with a single connection you can serve up much more data whilst also reducing bandwith freeing up server resources to do other things.
Minification does in fact take quite some load off by reducing anything from 2-20 scripts per page depending on how many plugins and jQuery extensions you are running on your website. However this still does not improve on our initial load time. For a website to load up it needs a few things. First it requires the HTML to be loaded; then following that is your CSS Stylesheet and your JavaScript and any images in your CSS. Once all these are done the website is fully rendered. A slow website is usually struck down by one of the following.
A lot of server side processing slowing down the website sending the initial HTML
Plenty of CSS & JavaScript files (resolved by minification)
Plenty of Images to download to view website properly. Including CSS images for rendering such as round corners.
Having tackled CSS & Javascript it is imporant to improve further on the front end by optimizing your images. That is if you are using background images or images included in your CSS sprite them. Spriting is the art of joining images together into a bigger one reducing the number of requests similar to what Minification does to Javascript. Creating CSS sprites is well known to improve the speed of your slow website. A website could also be slow because of redundant images that can be easily replaced with more modern CSS rules; such as round corners. Up until a few years ago round corners were not supported by any browser now adays only legacy browsers such as Internet Explorer 6 & IE7 do not support CSS3 rules to create round corners. Where possible switch to CSS3 and do a degradable CSS to still allow decent views on older browsers. This can reduce the amount of required images by over 50% on older websites.
Once all images are optimized you would want to improve the loading of your HTML file. This has an impact on the total website speed. The longer it takes to load the HTML the longer it will take to load everything else making your website slower. If you have a CMS such as WordPress the first thing to do is remove any unused extensions or plugins, as this reduces the scripts that have to run on your website. Then look to introduce a caching system. What is cache and what does it do to your website? Caching is a system where your server does not have to compute the web-page every time, but rather makes use of a pre-saved file. If nothing has changed since the previous visit the same file is sent back to the user giving a much better load performance as less stuff has to be computed on page load. WP-SuperCache is a very good viable option for WordPress in conjunction with WP-Minify. For other systems such as Symphony-cms you can use something like CachableDatasources to improve your website speed. If you are not on one of these platforms look around there is most likely to be a caching application that does what you would like.
So far you have optimized most of your website and from your end it is probably the maximum that you can probably gain from the various design principles and hopefully you have told your slow website bye bye. However you can still do one last optimization from your server. That is enabling gZip or Deflate; basically compressing all your output to help reduce download size sometimes by more then 50%. This can be done via your htaccess file if your host allows it. In my case my host had this option in CPanel with a special tab Optimize Your Website, which had options to choose what will be compressed using deflate.
Your Slow website should by now be not so slow. However if you still find your website slow you might want to consider one of the following. A website redesign to significantly improve your CSS & Image useage, a change in CMS for example Symphony CMS is much faster then WordPress both on simple and complex websites due to its structure and flexibility, or maybe its really time to upgrade your hosting package as you are asking too much from your host.
The above steps helped me improve my website performance by over a 100% as well as those of my work and clients. If you found this useful for speeding up your slow website; link back or comment.
