How to speed up your website’s loading time
At SJL, we have been spending a lot of time recently focusing on ways we can speed up our website. During this process we have stumbled across a number of very useful tools and tips that have helped us immensely, so being the loving web firm that we are we have decided to past on some of this newly learnt knowledge to you.
Starting off with YSlow
We had known about YSlow for some time in the office, it’s an amazing tool released by Yahoo for analysing page loading times and returning the score in an A – F grading. Obviously we were hungry for that A and after spending an afternoon struggling along with B after B we finally managed to get that big fat green A.
So how did we do it?
We found an amazing plug-in that will do the majority of the GZIP compression, minifying and combining, it’s called PHPSpeedy and it really is a time-saving machine. We installed it onto our server using its simple GUI, it gave us two lines of code to place at the top and bottom of our home and hey presto our YSlow score improved considerably all the way to a B.
However there were still a couple of issues that needed ironing out before YSlow was going to give us an A. The main issue that remained was the amount of HTTP requests being sent, although we had combined both our CSS and Javascript there were still a number of image HTTP requests being sent from our HTML and CSS. It was clear we were going to need to combine some of the images from our CSS into sprites, you can do this manually or you try using existing tools, we found one called Sprite Me that produces both the sprite and the new CSS, however we had a low success rate with this bookmarklet so we decided to combine them ourselves. With this issue out of the way YSlow happily gave us our A.
Should I only use YSlow?
No, YSlow is a good indicator and offers recommendations of things to improve, but even if you get an A your website could still be painfully slow based on a number of factors that YSlow ignores, like the server the website is hosted on.
One of the best ways to monitor your websites performance is to use Pingdom Tools, this is a really neat way to measure your loading times, it shows which files are taking an age to load and the total amount of requests sent.
Another good way to speed up your website is to remove any unnecessary code, if your website is built in tables try switching to CSS. If you are using CSS check that you haven’t got any redundant styles and delete them from from both the HTML and CSS. Always compress your images, Photoshop has a good save for web facility but if you are really wanting to bring down your image files sizes check out another Yahoo tool called Smush.it.
And that’s about it, there are a number of ways to speed up your website, one piece of advice that we can give is that before you try the technical stuff (GZIP etc) make sure you have the basics right (file sizes etc), doing this will save you a lot of time in the long run. Good luck.
PS. Download the Web Developer Toolbar for Firefox, under the ‘information’ tab there is a neat tool that will check the page document size.
