Some General Good Practices to improve Webpage and Website speeds
In the previous posts we talked about several tools that you could use to determine the speed of your websites and webpages. We discussed add-ons for your browsers namely PageSpeed from Google and YSlow from Yahoo. We also discussed Webpagetest, the online website speed and performance evaluation application and a new and upcoming network protocol (SPDY) that is being promoted as the next big "thing" to increase the speed of websites.
Now here's the important Question: Do you think these tools can exhaustively cover all the parameters related to webpage and website speeds? Can we blindly and only trust PageSpeed or YSlow or online tools such as Webpagetest and sit tight implementing only those suggestions and advice provided by these tools? Chances are that if you do so then don't be surprised if you sites continue to be slow. Why? Because PageSpeed, YSlow or Webpagetest cannot cover all aspects of a website's performance and even if they do they cannot replace a human to suggest or advise what course of action to take.
So it is only commonsense that one needs to check for site performance and speed manually the following basic parameters to keep sites running speedily as ever. We have collected the most important ones but our list is not exhaustive. We have divided them into three broad categories.
1. Optimize images for display
We can't say enough. Many websites today are paying a price for uploading huge image files. The idea is to make the images as small as possible by compressing them and without making the browser to resize them. Many a time, we have noticed big images being delivered by a website when only a thumbnail of the picture is required. No don't complain that you don't have Adobe Photoshop or other software that you need to purchase because a ton of them are freely available on the web. Some of them that come to mind are Creative Kit in Google+ and Image Optimizer. Gimp is another slightly freaky-named image tool but has devilishly good functionality. Got lots of image to compress and resize at once? You absolutely can't go past Fotosizer.
Here are some tips for compressing files:
- Use the right file type. Use 'lossy' compression (JPEG) for photos and images that contain lots of colors. Use 'lossless' compression (PNG and GIF) for line art and images with fewer colors.
- Do not just use height and width (for instance of the IMG tag in HTML) while compressing images. Note that even if you do viewers of your website still has to download the entire image on their browsers to view. Use software like Photoshop or Fireworks and if you don't have them, use the software mentioned above.
If you still think you cannot do away with those huge megapixel photos and images consider hosting them elsewhere on another server. This concept is also called using a CDN or Content Delivery Network. Several companies like Amazon offer such a service. Amazon S3 is the service offered from Amazon that even lets you host static websites on the account. Photo hosting services such as SmugMug use them. So, why can't you? Other option is to use photo and image sharing services such as Flicker.
There is also a school of thought that slicing images can lead to faster performance. Though we don't recommend it doesn't hurt to try. To begin with slice images into 4 parts only.
And if you are using Flash along with your images we strongly recommend against using it. Reduce or remove all flash associated with images and never use it for navigation on your site.
And did we tell you that you could use CSS in place of your images? You need to take a look at CSS Zen Garden for some inspiration.
A final note
Don't forget the following upcoming online, on demand and in-person training courses:
- Introduction to Social Media - a comprehensive, instructor led, online 5 week course for businesses to learn about social media and implement practical steps. Starts 14 August 2012.
- Online Business Marketing with Facebook - an extension on the introduction to social media course where we cover in-depth implementation of Facebook for business marketing over 5 weeks with an experienced instructor. Starts 15 August 2012.
- ON DEMAND: Search Engine Optimisation for Small Business - learn the top 15 steps you can take to improve your search engine rankings. A quick 90 minute online course you can take anytime.