Your Website Design Should Load in 4 Seconds!


How Fast Should A Web Page Load?

Are you losing customers because of a slow loading website design? Is your website frustrating your customers – meaning missed leads and sales? A slow-loading site can mean web shoppers are likely to abandon a website if it takes longer than four seconds to load, a survey suggests.

The research by Akamai revealed users’ dwindling patience with websites that take time to show up. Akamai claim 75% of the 1,058 people asked would not return to websites that took longer than four seconds to load. The time it took a site to appear on screen came second to high prices and shipping costs in the list of shoppers’ pet-hates, the research revealed.

Akamai consulted those who shop regularly online to find out what they like and dislike about e-tailing sites. About half of mature net-shoppers – who have been buying online for more than two years or who spend more than $1,500 (£788) a year online – ranked page-loading time as a priority. Akamai claim that one-third of those questioned abandon sites that take time to load, are hard to navigate or take too long to handle the checkout process.

The four-second threshold is half the time previous research, conducted during the early days of the web-shopping boom, suggested that shoppers would wait for a site to finish loading. To make matters worse, the research found that the experience shoppers have on a retail site colours their entire view of the company behind it.

About 30% of those responding said they formed a “negative perception” of a company with a badly put-together site or would tell their family and friends about their experiences.

Further research by Akamai found that almost half of the online stores in the list of the top 500 US shopping sites take longer than the four-second threshold to finish loading.

The survey questioned 1,058 net shoppers during the first six months of 2006. Consultants Jupiter Research did the survey for Akamai.

Whether this research is 100% valid is determined by your own experience. For instance, if you KNOW that the information you need is probably on a specific web page, you’ll probably wait a lot longer than ten seconds to see the info.

Undeniably, though, it’s been a long held belief in good practice website design that your website design needs to load fast if you want to keep visitors happy. This research only proves this.

See below how slow load times impact your business:

How Loading Time Affects Your Bottom Line

Keep Page Download Speed Times Fast

How fast should your website load? There is no best download time to try and reach – basically you need to aim to download your page as fast as possible! Some sites that require a lot of photography or virtual tours can be excused for slow download times and people will blame their network connection. Most sites however don’t have this luxury.

What is the longest time someone will wait for your site to load? Recent (2007) qualitative research by Akamai revealed and measured users dwindling patience with websites that take time to show up. It found 75% of the 1,058 people asked would not return to websites that took longer than four seconds to load.

The time it took a site to appear on screen came second to high prices and shipping costs in the list of shoppers’ pet-hates, the research revealed.

Akamai consulted those who shop regularly online to find out what they like and dislike about e-tailing sites. About half of mature net-shoppers – who have been buying online for more than two years or who spend more than $1,500 (£788) a year online – ranked page-loading time as a priority.

It found that one-third of those questioned abandon sites that take time to load, are hard to navigate or take too long to handle the checkout process.

The four-second threshold is half the time previous research, conducted during the early days of the web-shopping boom, suggested that shoppers would wait for a site to finish loading.

To make matters worse, the research found that the experience shoppers have on a retail site colours their entire view of the company behind it.

About 30% of those responding said they formed a ‘negative perception’ of a company with a badly put-together site or would tell their family and friends about their experiences.

Further research by Akamai found that almost half of the online stores in the list of the top 500 US shopping sites take longer than the four-second threshold to finish loading.

The survey questioned 1,058 net shoppers during the first six months of 2006. Consultants Jupiter Research did the survey for Akamai.

Download speeds and accessibility

Bandwidth or the capacity to send and receive data is an important consideration when designing an electronic document for distribution over the Internet. It is important that the link to the Internet (from the computer serving the pages to customers) has sufficient capacity to be able to handle the expected load.

Otherwise, the response to users will be unsatisfactorily slow.

Most people today connect to the Internet over a phone line, typically using a modem with a speed of 28.8 to 56 kilobits per second (kbit/s).

This “narrowband” communication requires user to wait while a dial-up connection is made before they can access the Internet, and means that Internet use when connected is slow.

Broadband services offer significantly faster data rates, enabling the delivery of services, such as high speed Internet access. These may also be “always on” connections to the Internet.

However, what looks great and downloads quickly within the confines of the Web manager’s high-speed network connection does not necessarily work as well for the average user of the Internet. It is probably best to presume that your user is connected through a 28.8 kbit/s modem.

Optimise your images!!

  • Remember to optimise your images – the most important thing you can do to decrease download times. Optimise just means save for web’ in Photoshop, for example. Keep JPGs for photographs and Gifs for images with large blocks of flat colour.
  • There are several ways to optimize images and here’s one if you have Adobe Photoshop. For your JPGs, PNGs, and other files you may have that aren’t GIFs, open them in Adobe Photoshop and simply go to File > Save For Web and reduce the image to 70% (JPG) You probably won’t even notice the difference in quality but you’ll have nearly halved the image size.

Load background images via external CSS

  • It’s possible to present images as part of the background, called up through external CSS stylesheets.
  • Browsers download background images after everything else. By using this technique, your text will load instantaneously and your site users can freely roam about the page while your 50kb fancy image downloads.
  • The ‘link’ is always added to the Head Section i.e anywhere between the <head> and the </head> , add this code :<link rel=”stylesheet” type=”text/css” href=”your-css.css”>

Minimise white space, line returns and comment tags

  • Every single letter or space in your HTML code takes up one byte. It doesn’t sound like much but it all adds up. We’ve found that by working through your page source and eliminating unnecessary white space and comments, you can shave off up to, or even over (if your HTML is really inefficient) 10% of its file size.

Remove unnecessary META tags and META content

  • The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse they’ve lost a lot of importance in recent times. When using these META tags try to keep the content for each under 200 characters – anything more increases the size of your pages. Lengthy META tags are not good for search engines anyway because they dilute your keywords.

Minimise unnecessary javascript and other client side scripting

  • Javascripts and other clients-side “functional” elements on the page may be slowing your page down. Remove them if not entirely necessary.

UK Government recommendations:

‘Documents published on the web need to be kept small, be linked efficiently and contain only the data and graphics that they require’.

Guidelines for UK Government websites
Illustrated handbook for Web management teams

How To Speed Up Your Website Load Times

Google Crawl Stats

Some time ago Jack Osborne and I decided to sped up the current Hobo site to see if increasing page download speed had a positive impact on ranking, or the amount of traffic Google sent to your site. I left this article in drafts while I monitored any ranking benefits.

At the end of last year, we basically looked at an actual page on Hobo, and all the files involved in creating the page, and looked to see where we could make speed improvements.

Essentially we took 299kb (Whoops!) and reduced it to an ‘old-school’ @50k target size by:

  • redeveloping our bespoke WP theme template and css
  • compressing css and javascript files
  • reducing image size
  • deactivating underperforming plugins
  • removing some javascripts
  • validating css and html
  • improving the accessibility of the page
  • making our form script load on only the contact page
  • Gzip compression server side

Before

  • Total loading time:10.5 seconds
  • Total objects:78 (299.2 KB)
  • External objects:4 (3.6 KB)
  • (X)HTML:1 (22.5KB)
  • CSS:6 (43.5KB)
  • Scripts:3 (97.8KB)
  • Images:68 (135.5KB)

After

  • Total loading time:0.3 seconds
  • Total objects:12 (50.8 KB)
  • External objects:1 (1.3 KB)
  • (X)HTML:1 (16.5KB)
  • CSS:3 (8.2KB)
  • Scripts:0
  • Images:8 (26.2KB)

Google Webmaster Tools Performance Overview

Using GWT Performance Overview (found in Google Webmaster Tools LABS feature) I could monitor what Google thought of my page speeds – and as a result of the changes we made – we basically halved the download speed according to the measurements Google make:

On average, pages in your site take 3.4 seconds to load (updated on Dec 14, 2010). This is slower than 58% of sites. These estimates are of medium accuracy (between 100 and 1000 data points)

Clearly, there’s still room for improvement across the site, but the graph shows a big improvement, even though I started adding elements to the site since we made the changes to the site near the end of November 2010 and have since slowed things down a little again with some other plugins that will probably be getting uninstalled:

Speed Test & Accessibility Tools Used

Google also has a great page with plenty of tools for the web developer serious about improving website load times. I will no doubt introduce some new things over time which will increase my download times again, but i will be sure to keep an eye on things. I’m sure there’s a few other things we could do to increase the download speed of our pages, but that will do for now.

Accessibility

I do care about accessibility and web standards. And so does Google apparently.

Why does validation matter? There are different perspectives on validation—at Google there are different approaches and priorities too—but the Webmaster Team considers validation a baseline quality attribute. It doesn’t guarantee accessibility, performance, or maintainability, but it reduces the number of possible issues that could arise and in many cases indicates appropriate use of technology. Google.

While it’s hotly debated wether or not valid html improves your actual website rankings – it’s always a good idea to aim for a decent level of accessibility for your website pages – which reminds me – probably time to check my own pages again!

Restructuring HTML

One of the major drawbacks with the previous wordpress template was the amount of code bloat. There were multiple divs within the code which had no effect on the visual appearance, the only thing they contributed was bumping the file size of the pages up a few kilobytes.

Coupled with the code bloat there was also a lot of non-semantic mark-up, divs with intangible classes and ids.

For the new template, we mocked up a simple wireframe, based on the exisiting blog layout and started to flesh out the site; what divs were needed and what the appropriate class names and ids would be. From there we starting designing the website in the browser to help iterate  and see how things shaped up. A major plus point of designing in the browser is that you can see how how the site displays across multiple different browsers; Apple Safari, Google Chrome, Internet Explorer and Opera.

Redoing the CSS

As well as completely recreating the template files, the CSS files were also redone. Nothing was carried over, we started with a clean slate.

The first thing we done when setting up our CSS file was to use a reset which the rest of the file would be built upon.

Roughly a year ago there was a tutorial on the A List Apart website which discussed how to go about creating a completely fluid/scaleable website, much like you would have with an old school table but instead built entirely with divs. I had been desperate to try this in a live production site for some time and the hobo blog provided me with this opportunity. Grab the corner of your browser window and resize the website to watch the elements flow around eachother.

All of the CSS was then factored into single line delcarations, as opposed to multi-line, to save valuable kilobytes.

Typography

All of the typography within the site was also addressed. We used the golden ratio, with the help of the Modular Scale website, to keep everything harmonious. Here’s a tutorial on how to use the modular scale website. Moving forward – we’ll probably use Google Web Fonts too.

Speed Up Contact Form 7 Plugin For WordPress

Contact Form 7 plugin for WordPress is quite bulky in terms of external scripts it’s loads.

You can speed up how fast Contact Form 7 loads (by loads) by ensuring the associated javascript files load ONLY on the contact form itself.

Quickly optimise your contact form 7 wordpress plugin by just adding the following code to the end of your functions.php – you can take 70kb off your load time.

NOTE: Be sure to wrap the following in PHP tags in the example illustrated below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );function my_deregister_javascript() {if ( !is_page('Contact') ) {wp_deregister_script( 'contact-form-7' );}}add_action( 'wp_print_styles', 'my_deregister_styles', 100 );function my_deregister_styles() {if ( !is_page('Contact') ) {wp_deregister_style( 'contact-form-7' );}}

 

What Effect Did All This Effort Have On My Site Traffic?

Did this massive change in download speed improve the Hobo rankings? After all, Google did say site speed was a ranking factor……

Well, no, not that I measured with any accuracy.

It *might* have in some areas…. but is that possible improvement justification for spending hours redeveloping your site? On it’s own – probably not – if you have to choose between redevelopment and link building or making your page more relevant!

Saying that – of course – a faster site has other benefits of course out-with anything to do with your Google rankings. A faster site could well improve visitor satisfaction and total number of conversions, for instance.

I didn’t expect faster website load times to improve the rankings of my website. I blogged about Google and site speed a long time ago. My friend Tad did a useful article a while ago, too – 30 Ways to Optimise Your Site for Speed.

I did want a faster site though – for all the other benefits.

NB – We are currently redeveloping the Hobo site as I write this to make it more… professional, but we’ll still be using Google Webmaster Tools (which are actually quite useful now) and the other tools mentioned to keep an eye on website download speeds and accessibility.

Website & Page Load Speed Is A Google Ranking Factor, but….

Website and page load speed will affect Google rankings, just not as much as links, good titles & content that matches a search engine visitors intent. My test above confirmed what I already thought.

Do I even need to add anything? A fast host could be argued to be a prerequisite in 2010, and a fast site too, if your web designer has any clue.

I’m asked quite a lot these days about server speed and Google rankings. I’d imagine it is already part of the algorithm on some VERY minute level (why not?) and probably is going to be turned up a notch in 2010, but small differentials in page speed load will be clearly NOT as important as just about every other onsite seo factor and even more important external factors which encourages Google to rank your site higher.

If your server is dog*&^% and your website takes minutes to load it’s a bad user experience (why SEO have always advised don’t use crap free hosting) and your site probably doesn’t deserve to get high Google rankings even as it stands.

EDIT – In 2013 – be careful. If your site is unavailable for a period of time, your rankings suffer much faster, and sometimes take longer to recover (from experience).

Website & Page Load Speed Tests & Tools

  1. Pingdom Page Load Test tool
  2. Website Optimization Speed Test Tool
  3. Uptrends Page Load Test Tool
  4. Submit Plus Page Load Test
  5. Link Vendor Page Load Test tool
  6. Compare Yours & Competitors Page speed
  7. Tools to speed up your site (defo worth a read)

… and you always have Page Speed by Google (extension for Firefox browser) 

Why I Try To Build Accessible Websites

An accessible, W3C standards based website can be a right pain in the proverbial to develop and maintain, let me tell you. A lot of uncredited work goes in to ensure the interoperability of a client site. It’s a pain for our developers because accessibility takes time and experience to master. It can be a pain for clients, as more often than not (for smaller website design agencies, at least) it increases the amount of time required to design, develop and launch a new website, and unless the client is committed to maintaining the accessibility of the site, most clients who go on to manage the site eventually screw up their sites a bit, adding images without ALT text, for example.

But we still do it…why? Because, not only do we all have a moral responsibility to help build an inclusive web, but often accessible websites free of code errors load very fast.

What Is (X)HTML & CSS?

If you don’t know what HTML and CSS is, it’s basically the technology used to create most websites. Sure, some websites have flashy gimmicks etc, but underneath it all, many websites out there are built using these use these two “languages” or “technologies”.

HTML is the structure and content of your website, and CSS is used to control the design and layout of a website in browsers like FireFox and Internet Explorer.

W3C HTML / CSS Validation is simply running the page through an automatic test to check the page for errors in either of the two technologies. Basically, to see if a website uses these languages properly. Either a pages passes validation, or it does not. When it fails to validate, a web designer needs to make small modifications to his or her website design code to bring it into compliance with the recommended for the use of these two languages.

What Is “Web Accessibility”

An accessible website is simply a website, build to W3C standards, accessible by, not just disabled people, but almost everybody, using various technologies. The problem is, with every change and edit, you risk making the website inaccessible, if sloppy code is left invalid. It’s worth noting a website is never as accessible as it can be. It can always be improved – and that’s what we strive for. We try and design websites to basic good practice standards, and then try to improve them further, throughout the lifetime of the website.

What A Client Cares About

A client is usually only concerned with the look and text and image content of the site, but increasingly nowadays a client should be made aware that websites should be accessible and that search engines should be able to read the pages so they can appear in Google results pages, for instance.

So many web design agencies in the UK focus on delivering the look and feel of the site, and often ignore validation and accessibility testing, to the detriment of the client. Some design companies only get the designs looking correct in the client’s browser, and then forget about it.

What Should Happen

While building a website, the designs and code should be periodically tested to ensure the HTML and CSS validate to W3C standards. Then, the website should be at the very minimum passed through other online accessibility checkers, like Watchfire, to ensure there are no obvious barriers to disabled visitors to your site. To take accessibility that step further, you should then carry out manual checks on your site, and then even ask a person with a disability to give your site a test drive.

Why Bother?

“Making a site accessible benefits all of your users, and broadens your current audience.” W3C.

Make no mistake about it. It is illegal to discriminate against disabled persons in the UK. At some point some company somewhere in the UK will receive a lot of bad publicity about the inaccessibility of their website. Ensuring your website validates to W3C recommendations is a first step to ensure your website meets current and expected legislation in the UK.

It’s ethical….do you really want to leave people out of the enjoyment of your website and corporate message?

It generally means more visitors to your website can actually see your site the way you intended. Sites built to W3C standards generally look similar across most modern browsers (but unfortunately, not always!).

It also usually means you can update the look of a site a lot easier and more cost effectively, especially if a site is built using CSS to completely control the design and layout of the site, and your text is separate. This can be called separation of design from content, or style from substance! Not to mention most sites built this download a lot faster than those built with TABLES as opposed to laid out with CSS. That is because your style sheet (the CSS) is accessed only once, saving bandwidth, as opposed to loaded every time, if the style is embedded on every HTML page.

It also usually means search engines wont have any problems interfacing with your site, now or in the near future. You see, the thinking is, if you’ve no errors on the page, search engine spiders won’t choke on your site. All though there is no quantitative proof building a site to W3C standards will help it rank better in Google, for instance, it certainly wont harm your website in the search engine results pages! In fact, many search engine optimisation agencies think W3C compliant sites could rank better in the search engines than sites that don’t conform to these standards.

It also means more people can access your website… even those with assistive software and hardware like screen-readers and Braille devices…and that means sales for you, you idiot!;) – There are over 8 million people in the UK alone with a registered disability of some kind.


Loading Facebook Comments ...

3 Responses

  1. Jens Meiert says:

    Always great to see other people emphasizing the importance of low load time, too, since it’s a vital yet critical aspect when it comes to better websites …

  2. MRSA Claim says:

    The faster the better, for sure.

  3. wigwam advertising agency glasgow says:

    We live in an age of technological speed. I agree that if a website takes too long people won’t wait.



Learn how you can get more sales from your website

Subscribe for free and let us share with you:

  • how to submit your site to Google, Yahoo & Bing
  • how to optimise your site to get more traffic from Google
  • how to target the most valuable keywords for your business
  • how to make your site rank better in free Google listings
  • how to rank high & avoid Google penalties in 2014

Trust Hobo with your SEO plan

Find out more