I'm obsessed with speed. Anything that I can do to decrease the amount of time it takes to do something, I will. I usually keep my responses to one word answers. It's quick, efficient, and gets the point across.
On the web, conveying information quickly is a high priority. Being able to load pages faster allows points to get made sooner. Giants like Amazon and Google have conducted studies that prove loading pages even milliseconds faster result in improved conversion rates.
Speed. Important.
What can you do?
There are many ways to make your site or app faster. Here are a couple to get you started:
Monitor performance and make necessary changes
There are a hundreds of great online and web browser plugins to monitor performance and page size. Some of my personal favourites are:
- YSlow (requires Firefox and Firebug)
- Page Speed (requires Firefox and Firebug)
- http://www.websiteoptimization.com/services/analyze/
- http://gtmetrix.com/
If your app or site still feels sluggish after media compression I highly recommend the Speed Tracer add-on in Google Chrome. Speed Tracer shows bottlenecks in screen painting and javascript performance.
Look for ways to preload images
This tip doesn't get the recognition it deserves. Did you know that when you access the Google homepage it starts preloading all of the graphics for the results page? Think about this: even before your results are displayed all the images needed have already been saved in your browser's cache, making the search experience better (faster).
How are some ways of preloading content on the sites you're making?
- In your online store you can start preloading all the thumbnails and large versions of the products on a category page
- If you have site that has multiple large background images start preloading all of them as soon as a user lands on a page.
- Different sized logo on sub pages? Preload them!
Remove code
Only include the Javascript and CSS files that are required for a specific page.
How do I do this easily?
If you manage more than one site on a server I would recommend installing the Google Page Speed Apache Module.
mod_pagespeed includes several filters that optimize JavaScript, HTML and CSS stylesheets. It also includes filters for optimizing JPEG and PNG images. The filters are based on a set of best practices known to enhance web page performance. Webmasters who set up mod_pagespeed in addition to configuring proper caching and compression on their Apache distribution should expect to see an improvement in the loading time of the pages on their websites. If you don't have privileges to install Apache modules or use a different server, you can use a combination of a few tools to achieve the same effect. If you don't mind editing minified files on your local copy, you can use Google Page Speed's Firefox extension to create minified versions of your CSS and Javascript files.
For images, you can use the same Firefox extension or a service like http://smush.it to reduce the file size of your images without losing quality.
Summary
In short, speed continues to be an important part of the web experience; from both UX and SEO perspectives. I hope this post sheds a little light on a few simple tips you can implement right away.
