First things first: the speed or loading time of a website is very important. It is quoted by google and visitors won’t have any patience to wait if your website is too slow. I had a couple of performance issues with Benwake.com in the past, and I thought it could be helpfull to share my knowledge.
Why is a website slow?
Well, that’s easy to explain, a website has to load a couple of elements. the more the browser has to load, the slower the site gets:
HTML: the basic of the basic, your source code, but that shouldn’t be the problem, should it? It’s only text.
CSS: The way you style the html, that could be the problem when it gets bigger and bigger. Later on I will explain how to reduce the size of your cascading style sheet file.
Images: there is the real stuff. If you load a huge amount of images, the amount and the size of those images will be important.
Flash and others.
There are two sides on the story. You have to know for yourself what the most important is: the content or the looks? If you are planning to make a state of the art website with a lot of bling bling, it’s normal your website takes a time to load. But if you are just curious on how to reduce the loading time of your site, please continue reading…
Tools I use to check my website:
This online tool checks a webpage of a website and tell you what is loading and how long it is taking to load. This is the very first tool you should consider using.
I tested it with my website for example and explained it in these screenshots:
2- Firebug and page speed:
To install firebug you need firefox: http://www.mozilla-europe.org/en/
Get firebug: http://getfirebug.com/
Install page speed: http://code.google.com/speed/page-speed/download.html
See printscreen on how to use it, later on I will explain how to reduce size and load with the tool:
Update: pagespeed can also be checked online (http://pagespeed.googlelabs.com/)
What can we do to speed up the website, each element taken apart:
I will do the best I can to explain every part you can work on, most of them are really easy but give a lot of results
Images : This is the most common one. A lot of images on one page can slower your site. It’s the most common, but also the easiest one to fix. There are 2 solutions:
-1- Can’t you work with a smaller image? Is your image as small as it needs to be?
Example: Let’s say you use a facebook icon of 32px*32px, which is hardcoded in your html, but your png is 64px*64px -> 50% gain
-2- Use the free tool VSO Image Resizer to resize your image. Even if you don’t resize it, it will compress it “losslessly” and reduce it’s size.
– If you don’t use transparancy on an image, don’t use the .png extension. Rather choose .JPG or .JPEG.
-3- A more technical one, css sprite. Usually used for social media icons. Instead of loading 4 or 5 images, you are only loading one and telling the css where to find the icon in that image. There is a perfect tutorial on it at css-tricks: http://css-tricks.com/css-sprites/
-Css: The stylesheet. Some points I would like to explain here
-1- Unused css -> after a lot of coding, it’s possible that some css code is not used on your website. Ofcourse you can delete it, because the browser loads something that isn’t needed. The question is how to find out if you have unused code.
– Dust me plugin for firefox. Find it here: https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/
This is to check one page:
Update: you can also check multiple pages or your whole site
-2- Css Background ->instead of using a large image as a background, try to use the repeat-x or repeat-y css property. The image you will use can be 1px height or width.
-3- Put files together -> put all the css content in one file, instead of loading multiple files, this will reduce the requests and loading time.
-4- Compress files -> www.csscompressor.com/
More in detail – the firebug – page speed possibilities explained
The page speed extension is very powerfull, I explain the features that I used to optimize my website. Check the printscreens first:
Enable compression (gzip) -> I can’t use it, I’m on a shared hosting, but this is a good article: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Combine images into css sprites -> Already explained above
Leverage browser caching -> Set an expiration date on some files, the browser will load them from his cache (locally) and not from the server anymore. The easiest way to do this, add those lines to your .htaccess file (hidden by default) at the very top:
# Turn on ExpiresActive for the directory
# Set the defaults
ExpiresDefault “access plus 1 hour”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType text/css “access plus 1 month”
You can also see ‘optimize images’ and ‘remove unused css’ -> firebug tells you what is going on, and for optimizing images gives you the opportunity to save the file so you can upload the better version of it on your FTP.
Check your results – is it all worth it?
Check your results with the same tool http://www.websiteoptimization.com/services/analyze
If you have google analytics installed, check your number of visits grow
I hope you like this article, if I forgot to mention some things or you would like me to write on something specific, feel free to ask!VN:F [1.9.22_1171]