How to Optimize Your Site for Better Loading Time

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.”

How to Optimize Your Site for Better Loading Time

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.

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

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.

instantShift - Optimize Your Site for Better Loading Time

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

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.

Like it? Share it.

33 Comments

  1. Thank u Shannon Suetos before some time in my office we have presentation and we discussed on this point. this is really nice information for every one and newcomers in web media.

  2. Thanks for the tips.

  3. Nice Examples Cool Stuff. Thanks for sharing.It is very useful for developer.

  4. This can be a good solution, but more ETag is the first choice because of the situation, such as daylight saving, the initial programming and so the clock is wrong

  5. Hello. Thanks Ms Shannon for a great article. Sharing a few comments only below what Snappy Clamy does do to quicken our clients loading time. Snappy Clam double checks that all ‘code’ is clean to ensure that all of our clients website pages loading time is as quick as possible. Snappy Clam does discuss with our clients the importance of web page loading time as to the why we suggest to keep web pages as short in length as possible and having a clear, concise message in the body content. Hyperlink to another web page on the clients website to photos and or gifs that do not complement the content. Snappy Clam does its best to keep all visual and sound distractions off of the clients web page. Snappy Clam is always looking to learn new improved ways to quicken all of our clients web site pages loading time at no extra charge.

  6. With my site being a single paged site I have to do this, still don;t think it loads fast enough though :|

  7. # CSS Sprite
    # Compressed Javascript and CSS
    # gzip

  8. Glad you all enjoyed the post, and found the information useful. :)

  9. You stated: JQuery is known to have libraries of scripts you never use.

    This isn’t true. There is only one jQuery library; any plug-ins are brought in by the developer. You may be thinking of jQuery UI; jQuery UI’s packaging system allows you to bring in many components that you may not use. Again it’s up to the developer to make the right choices.

    Lastly, Akismet has done a fantastic job keeping spam off my WordPress sites. Maybe your site could benefit from that service, too.

  10. Thanks Shannon these information are really helpful for me.. specially combine CSS and JS….

    Thanks again.

  11. gogogogo

  12. Thanks for the article and the comprehensive collection of links.

    One of the typical misconceptions we face when talking to customers is the mistake of blaming the server of performing badly when the site loads slowly. Most people still do not know that page loading is so much more than delivering an html blob.

  13. this is good to know…tnx for sharing…

  14. Thanks for the article. So does the loading speed depend more on the users internet provider or the way the page was created? Thanks

  15. @Patrick: This is not a black and white thing. Depending on the page itself, the size, the content, and the general design (css, js, flash), there are several ways how you can lose speed.

    The client can never make up for a slow page creation (aka server side). When the internet connectivity of the end user is slow, neither server nor client can do anything about the speed. You can only change the entire “design” of the page including size, content, and so on, to make up for that. When you messed up the design (js, css, content, size, and so on) of the page, even the fastest server and the best connectivity cannot speed up the display on the client side.

    All phases have to be fast and efficient. The server has to render and deliver fast, the network has to transfer without latency and at high speed (if it can) or you have to deliver an alternative for bad networks aka mobile, and the overall page design has to be perfect to give the user a light-speed page loading impression.

    So, do not focus on one thing. Only all three layers together will make a web site fast and good looking.

  16. Rene, thanks for your insight. I found that very helpful.. Basically from a design standpoint, focusing my page looking good and being fast is really all I can do.

  17. @Patrick: The challenge is, that looking good and being fast are often contradictory or at least difficult to combine.

  18. Rene, excellent point.. I suppose we wouldn’t want it to be too easy now would we? :)

  19. Wow I thought the cache helped the computer recall operate faster, not always. Hey you learn something new everyday.

  20. Nice tips. It is very important nowadays to concentrate and give importance on the speed of a site. It is one of the important seo virtues. Thanks for sharing some good article links along with the post. They were very helpful.
    Thanks. Keep sharing.

  21. useful tips~~~

    never use JS in my business site, yes, never~~~

    and always 1 CSS file include, keep the page size in 10-20K~~~

  22. Fantastic guide. Another great tip is to call jquery from google directly, and it is also compressed. it is on google apis.

  23. Home run! Great slugging with that ansewr!

  24. Nice post. Thanks for sharing. Very useful post.
    http://www.hermeshandbagoutlet.com

  25. I really pleased to find this website on bing, just what I was searching for : D as well saved to fav.

  26. This article is a short one. There are a lot more things to consider then just those points you mentioned.

  27. wow ! what a nice work!!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>