There are a few distinct benefits to this -
- Quick load times so users get what they want faster. If you want a great example of how important this is look no further than google.
- Less bandwidth usage.
- Search Engines factor in a quality score for every page - for both Google Adwords bidding and Search Engine rankings speed is a quality factor.
Measuring Speed - What gets Measured gets Managed.
- How fast is it? See what the website’s load times are from servers all over the world at Internet Supervision’s tool.
- For a second opinion, you can check the Pingdom Tool which checks from the US and also saves records.
- A third option is Vertain’s Speed Analysis Tool.
- A really good 4th option is LinkVendor’s Speed Analysis Tool.
At this point you should have a really good idea of what your website’s speed is, and also some idea of what your website’s speed is from across the globe. Two of these tools already provide a breakdown and show you what the breakup of components on your webpage is - however, the second step deals solely and fully with this.
Identifying Webpage Components and their Impact on Speed
- Go back to the Pingdom Tool and the Link Vendor Analysis tool and see what components they show.
- Now, go to the Website Optimization Site and try out their tool since it provides an excellent breakdown, and also recommendations.
- Finally (optional) download firefox and download YSlow from Yahoo. This plug-in lets you test any website on Yahoo Developer Network’s recommended guidelines. You could just look at the guidelines - however, the tool is super useful.
At this point you should have an understanding of how many http requests your webpage makes, the size of html, the size and number of image, css, and javascript files, and other factors. You should also have list of recommendations from YSlow, the YahooDevNetwork guidelines page, and WebSiteOptimization.
Understanding that you don’t have to trade User Benefits for Speed.
A mistake that people make is assuming you have to cut out items to improve speed. The secret is that you can use a combination of reducing http requests (by combining elements), html and css compression, caching, compression of images, and removing some webpage elements to achieve huge speed benefits.
Furthermore there are some features that you might think improve user benefit - however, sometimes the most simple design is the most powerful. Again, google comes to mind. Reading Jakob Nielsen’s blog on user friendly design is another good idea.
Setting Targets for User Experience and Speed and Hitting Them
It’s really important to do these hand in hand as they are interrelated - basically, you should have a priority/benefit and cost in terms of size/time with each of the components. This can be in your hand although noting it down always works better. I’d just list down each component and associate a priority/benefit and a cost/size with each - something that looks like (i’m taking a wordpress blog to simplify things)
- Main HTML - Necessary as this is what people read. P0. Size: 21 Kb.
- CSS 1 (for blog) - Necessary. P0. Size: 7 Kb.
- CSS 2 (for plug-in X) - Nice To Have P2. Size 5Kb.
- Plug-In X Javascript - Nice To Have P2. Size 9Kb.
- Analytics Package - Crucial P0. Size 2Kb (this is the main Wordpress.com stats package which is really light and easy to use and read).
- Additional Analytics Package - Nice to Have. P2. Size 8Kb.
- Social Sharing PlugIn JavaScript - Important P1. Size: 6Kb.
- Logo: Crucial for Branding P0. Size: 11 Kb.
- Image1: Important P1. Size 23 Kb.
- Image 2: Nice To Have P2. Size 33 Kb.
At this point I’d have something that is 125 Kb and makes 10 HTTP Requests (approximately). The first step would be to remove the P2 as user experience and speed is definitely more important than them (This is a personal decision and this is why you have to set and execute on targets for features/user value and speed/user experience at the same time. Just removing P2 features/items brings us down from 125 Kb and 10 HTTP requests to 70Kb and 6 HTTP Requests.
Now, I’d look at what I can do with each
- Main HTML - HTML gzip compression. Brings down size a lot - usually by half or more so Size: 11 Kb.
- CSS 1 (for blog) - CSS Compression (there is also a css-compress wordpress plugin) brings down the size a lot - again by half or more so Size: 3 Kb.
- Analytics Package - Crucial P0. Size 2Kb (this is the main Wordpress.com stats package which is really light and easy to use and read). Not sure if this qualifies as internal or external javascript so PHP-Speedy may or may not be able to combine this.
- Social Sharing PlugIn JavaScript - Important P1. Size: 6Kb. Ditto as Analytics Package.
- Logo: Use jpeg compression and a little optimization to cut down the size of this. Size: 5 Kb.
- Image1: Again use jpeg compression to handle this. Size 15 Kb.
What this gives us is a reduced size of 42Kb (as compared to 70 Kb earlier), and using PHP Speedy we can bring down number of HTTP Requests to 4 (approx.). Of course if we give more weightage to speed and ease of usage we can bring down the size and number of http requests even further.
At this point it is crucial to again go through the tools to see speed of your website and what components are being downloaded/used.
Using these relatively straightforward optimizations we brought our size down from 125 Kb to 42 Kb, and number of HTTP REquests down from 10 to 4 or so. This is a HUGE improvement. In addition there are a few more things to explore which I’ll get into in an advanced post including
- Using CSS or Image Maps to combine Images and reduce number of HTTP Requests.
- Using Caching of Pages on your server (crucial if you use wordpress).
- Using caching of PHP calls. Minimizing PHP Calls.
- And much more.
The truth is that most websites use an inordinate amount of images, javascript, and other additions and stray away from simple elegant design. Optimization of not only the elements of a page but also of the page’s design is necessary to get the fastest pages. Every single part of your page should pull its weight in terms of user benefit, design or some other intrinsic value. Best of luck optimizing your pages - btw, I do want to put up a real life example here so if you happen to have a page that is greater than 100 Kb and makes a ton of requests let me know and I’ll guide you through the optimization in return for you letting me use your page as an example.