In April Google officially announced they were integrating loading time into their algorithm. As they put it, “speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there.”

There are plenty of reasons a website could slow down such as large images, too many Flash files, video the list can go on and on. With that being said, there are plenty of tools and tactics to use to improve loading time for your clients webpage.

You may be interested in the following related articles as well.

• 47 CSS Tips & Tricks To Take Your Site To The Next Level
• Why Colors Can Make or Break Your Design
• Redesigning Your Website: Are you Making the Right Move?
• Design for the World: Cross Cultural Web Design
• Secrets to a Faster and Attractive Web Site Design Revealed

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Why Speed Matters?

People are impatient. We want things when we what them, and usually don’t want to wait for them. The same is true with loading times. If a user goes to a website, chances are you have less than a couple seconds for them to wait on your page to load.

According to Jakob Nielsen, you can break down the user experience into three time periods:

• 0.1 second — When your page loads within one second you are getting your message to the user when they want it. They feel satisfied and won’t leave unless they can’t find the information they were looking for.
• 1.0 second — On paper this doesn’t seem like a long time, but on the online world it is longer than you think. This, “is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data. ”
• 10 seconds — Anything over a 10 second load time and a user will more than likely leave. Even if they do wait it out, they probably aren’t as focused as they should be, and might have even moved on to other tasks while the page was loading.

How to Improve Page Loading Time

Assuming the user has fast internet, like microwave internet, and the issue is not on their end, there are plenty of reasons a website could slow down. It’s not too hard to improve your page loading speed. Just follow the steps given below and you can improve your loading speed in no time.

Clean Your Code

This is an easy step, and should be something you have in the back of your mind when coding a new site. You don’t want your code to look messy, or have any extra div files. The more basic your code is, the faster the loading time. It should look clean crisp and white.

“For a more definitive marker, if your page HTML is over 30kB-50kB, then you have an issue you need to address. This can be checked in the Web Developer extension for Firefox and Chrome,” says Kristine Schachinger of SearchEngineWatch.

HTML is not the only code that should be clean—make sure your style sheets are in order as well. Keeping things neat and organized should ensure a faster loading time. When implementing large photo files, use a compressed file instead. This will also keep your CSS more clean and help with loading time.

HTTP Requests

This is a big one. The more HTTP requests you have the longer your loading time. Below is a screenshot to help you better visualize how HTTP requests work.

The more times your page requires these types of requests from the server, the longer it will take for the browser to display the page. Using AJAX is one way to help streamline your process, but as Aaron Hopkins points out, “for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more. ”

Hopkins goes on to say that most DSL/cable Internet connections, “have asymmetric bandwidth, at rates like 1.5Mbit down/128Kbit up, 6Mbit down/512Kbit up, etc. Ratios of download to upload bandwidth are commonly in the 5:1 to 20:1 range. ” To summarize, this means the requests can take the same amount of time to send as it would to display an object that is 5-20 times the request size.

One way to speed up your site if you do have multiple images is to set your keepalive active. “The Keep-Alive extension to HTTP/1.0 and the persistent connection feature of HTTP/1.1 provide long-lived HTTP sessions which allow multiple requests to be sent over the same TCP connection. In some cases this has been shown to result in an almost 50% speedup in latency times for HTML documents with many images. Toenable Keep-Alive connections, set KeepAlive On,” according to apache.org.

Caching

When sending HTTP requests, many people implement caches to help with load time. This can be a great fix, but if you update your images and other cached items, it could actually take longer. “Even though the browser has the logo, it doesn’t know whether the image can be used. After all, the file may have changed on the server and there could be an updated version,” reports betterexplained.com.

You can get around this however in a few different ways. One being with an ETAg—which, “allows a client to make conditional requests. This allows caches to be more efficient, and potentially saves bandwidth, as a web server does not need to send a full response if the content has not changed. ”’

You can also have it figured so that the browser checks for the date of when the file was last modified. This can be a good fix, but the ETag is more preferred because of situations such as day light savings, the initial clock was wrong when programming etc.

Javascript and CSS Files

When looking at your Javascript make sure you are putting your files on the external .js file. If you use JQuery, make sure you don’t have any unwanted script in your code. JQuery is known to have libraries of scripts you never use.

When using XHTML you can streamline your code to ensure your HTTP requests are limited. An example of this is below:

So this:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/nav.css" />
<script src="/js/functions.js" type="text/javascript"></script> 
<script src="/js/validation.js" type="text/javascript"></script>

Becomes this:

<link rel="stylesheet" type="text/css" href="/css/combined.css" />
<script src="/js/combined.js" type="text/javascript"></script>

Even better, XSSI these files directly into high traffic pages, like this:

<style type="text/css">
<!--
<!--#include virtual="/css/combined.css" -->
-->
</style>
<script type="text/javascript">
<--
<!--#include virtual="/js/combined.js" --> 
// -->
</script>

Tools To Put Into Action

With all this being said, how will you monitor your efforts? There are plenty of tools out there to help you manage your loading time. The most common 4 programs (and all are recommended by Google) are:

• Page Speed, an open source Firefox/Firebug add-on that evaluates the performance of web pages and gives suggestions for improvement.
• YSlow, a free tool from Yahoo! that suggests ways to improve website speed.
• WebPagetest shows a waterfall view of your pages’ load performance plus an optimization checklist.
• In Webmaster Tools, Labs > Site Performance shows the speed of your website as experienced by users around the world as in the chart below. We’ve also blogged about site performance.

Other tools include:

• Pingdom: “The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars. Every test also shows general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.
• Xceptance LoadTest: “Xceptance LoadTest (XLT) is a tool for creating and running regression and load tests, in particular for web applications. XLT combines the automation of regression tests with the execution of load tests, as the test cases already created for the automated regression test can subsequently be applied as load tests. In short: Every regression test can also be a load test. ”
• Stopwatch: “The stopwatch is a small Javascript that runs on your computer (not the Numion server). It measures the time between the moment your browser starts to load the URL and when the browser signals that it has finished (“Done” in the status bar). The measurement therefore includes fetching and interpreting all HTML (including frames), images, and Javascripts. It does not include content that is handled by plugins. If the page is in the cache then the stopwatch will measure the faster loading time (see tip above). The accuracy is the accuracy of the Javascript timer, on most systems 10 milliseconds. ”

Remember that loading time is not the end all be all for your SEO efforts. It is just one piece of the pie. Doing all you can to stay on top of Google’s ever elusive algorithm only helps matters. Let us know in the comments below what you are doing to quicken your clients loading time.

Image Credits

• Article Main Image Credits | hand holding a stop watch

Find Something Missing?

Please feel free to share any tips, tricks or technique that you think would be a great addition in above article and that has not been told already.