As the speed of the average Internet connection steadily improves, the acceptable load time for web pages continues to drop. How fast a web page loads can have an impact on bounce rate, time on site, conversion rates and even on search engine rankings. Generally, the slower your site, the worse your metrics will be.
According to Kiss Metrics, a 1 second delay in page response can result in a 7% reduction in conversions. 7% is huge! To put that in perspective, an e-commerce site making $100,000 per day would be losing $2.5 million dollars per year in sales with just a 1 second delay. Ouch!
In addition to the conversion issues there are also ranking issues and trust/authority issues related to slow loading sites, and you don’t want any of those!
So what, you might ask, is considered acceptable at this point? 2 seconds, give or take a tad, is considered an acceptable page load speed. At this point in time if your site isn’t loading in 2 seconds or less, you’re losing visitors, conversions and rankings.
In fact, according to Google Webmaster Tools a site is considered “fast” when it has an average page load speed of 1.4 seconds or less, and that is really fast.
When calculating page load speed, there are actually two things to consider: actual load time and perceived load time. Actual load time is the total amount of time it takes for every object on the page to load completely. Thankfully, that isn’t the page load time that matters most to search engines and users. If it were, we’d all be in trouble!
Perceived page load speed is what seems to matter most, which is the amount of time it takes for all the visual and user facing elements of a page to load (text, images, form elements, navigation, etc.) From what we’ve seen Google Webmaster Tools is reporting on perceived page load speed, and they seem to be getting that data from Google Toolbar users so they know what the actual user experience is for your site.
To see how your site is doing, you can sign up for Google Webmaster Tools here. You could also use a free tool like Pingdom to test your page load speed, but data from Google WMT will be a more accurate representation of your page load speed from a user perspective.
Alas, in our experience very few web developers have any understanding of page load speed factors, so most of the sites we see have a perceived page load time in the 3-6 second range. 3 seconds is tolerable, but 6 is pretty slow.
So, without further ado, here are 5 of the most valuable tactics for improving page load speed (all of these are pretty technical, and should be done by a competent web developer):
Step 1 – Use a CDN (Content Delivery Network)
A content delivery network involves a series of high-bandwidth servers located in data centers spread all over the world. Essentially you can load web objects of your choosing such as images, scripts, videos, etc. onto these CDN servers, so that when a visitor comes to your site these objects are loaded from a faster, more reliable server in tandem with the objects loading from your own server.
By placing such files on a CDN you significantly reduce your server load, and these objects are loaded in parallel to those on your server, thus significantly improving both actual and perceived page load speeds. Because the files are distributed to data centers around the globe, load speed can be fantastic regardless of where a visitor is coming from.
One of the best CDNs out there is Akamai, though there are quite a few options available. If you want to improve the page load speed of your site, this should be one of the first things you look into.
Step 2 – Reduce the Quantity of Objects Loading
When a page loads, every single item on the page contributes to the page load speed. A good rule of thumb is each object contributes an average of 500-1000 milliseconds in perceived page load speed (though this can vary drastically based on type and size of objects.) So, if you have 70 objects loading, you’re probably looking at a 3.5-7 second perceived page load speed.
Another common tactics is to combine images and to reduce the file size of those images by changing file types and by removing unnecessary color channels.
You can also use CSS Sprites, which combines background images into a single image that uses CSS positioning to display the desired image segment in the right place. You can significantly reduce the total number of images and the overall file size this way, potentially saving quite a bit of load time.
Step 3 – Set Expires Header as Far Out as Possible
When a visitor comes to your site, the code on the page can tell the browser how long to cache the various files from your site. While this won’t help for first time visitors, it will drastically improve page load speed on subsequent visits.
There is a great article on Yahoo that talks about the details, but you essentially want to set all static elements to never expire, and variable elements should be set with conditional requests.
You should keep in mind how often your site changes when doing this, and set the length accordingly. If you make visual and code changes to your site once per year, set your expires header to 12 months. If you make changes monthly, set it to 30 days. You get the idea.
Step 4 – Gzip Compression
It’s possible to use compression to reduce the file size of HTML, XML and JSON file requests. This is a more complicated tactic, but it can save on overall bandwidth usage and thus on load time. It’s explained in detail here, and all major browsers can handle this type of compression.
Depending on the size of your files and the amount of unnecessary space that can be compressed, this could result in significant load speed benefits.
Step 5 – Order Your Code for Users
Browsers render websites based in the order of the code on the page. If the visual and user facing elements (text, CSS, images) appear at the top of the code, they will be rendered first, thus decreasing the perceived page load speed. Though it may take some time for additional elements to load, it will appear to site users that the page has fully loaded (this tactic really works in conjunction with the other tips we’ve covered.)
To do this correctly, put any non-external scripts and non-visual coding elements at the bottom of the code (except for asynchronous Google Analytics script, which belongs in the <head> section.)
Overall your code should be clean, as simple as possible, and ordered in such a way that visual elements come first and heavier or less important elements come last.
And that’s it! While there are dozens of other tactics (many are explored in the Yahoo article in Step 3), these 5 things will provide some quick wins for any page load speed problems you may be experiencing.
As you implement these changes, keep an eye on your average page load speed in Webmaster Tools (or wherever you’re tracking it), and definitely track your conversion rate, bounce rate and average time on site.