Web Page Loading Times and Why Their Important

Robert Valcourt
Jun 08, 2012
Web Page Loading Times and Why Their Important

Is web page speed a factor for high rankings in search engines? This has been a matter of debate site owners and SEOs for quite a while. Google weights in and sets the record straight.

Should you be worried? Not really. Should you take action? Absolutely.

Page speed is one of over 200 signals that Google uses to determine a page's ranking. Google continues to put the highest weight in factors such as relevance, topicality, reputation, value-add, etc. While considering page speed during the design and development phase of your Website will not make or break your ranking, it is never a bad idea to take every advantage possible in an evolving & competitive web landscape.

Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of Websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn't just something that can affect your search rankings-it's a fantastic idea for your users.

There are lots of tools to help you identify ways to improve the speed of your site. I use tools such as the YSlow and PageSpeed plug-ins for Chrome and Firefox, SEOMoz and Google's speed-related mini-site with tons of resources and videos about speeding up websites.

Here are a few of the more impactful ways to improve your page speed right now:

Make fewer HTTP requests

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Your page may have a considerable number of non-photographic graphics such as icons, buttons, logos or similar design elements. Combine these graphics together into one large image then use CSS background positioning to display them correctly. 1 graphic loads a heck of a lot faster than 20!

Add Expires or a Cache-Control Headers

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Put Stylesheets at the Top

Moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections.

Put Scripts at the Bottom

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

Made With In Whistler