How Fast Should A Website Load?


Screenshot 2015-05-14 01.02.07

People like fast sites.

And so does Google.

A fast site is a better user experience (UX), and a satisfying UX leads to higher conversions. Why wouldn’t you make your website faster – and faster – and faster…..?

How fast your website loads is a CRITICAL – but often completely ignored – element in any online business – and that includes search marketing and search engine optimisation.

Google, for one, is OBSESSED with speed.

And we should be too.

We all could be losing customers just because of a slow loading website, when we don’t need to be.

Very slow sites are a bad user experience – and Google is ALL ABOUT GOOD UX these days.

How Much is site speed a Google Ranking Factor?

Well, as far as I can determine, ‘How much is a very slow site a negative ranking factor’ is a more sensible interpretation of the claim ‘website speed is a Google ranking factor’.

We do say we have a small factor in there for pages that are really slow to load where we take that into accountJohn Mueller, GOOGLE

Google might crawl your site slower, if you have a slow site. And that’s bad – especially if you are adding new content or making changes to it.

We’re seeing an extremely high response-time for requests made to your site (at times, over 2 seconds to fetch a single URL). This has resulted in us severely limiting the number of URLs we’ll crawl from your site. John Mueller, GOOGLE

John specifically said 2 seconds disrupts CRAWLING activity, not RANKING ability, but you get the picture.

How Fast Should Your Website Load in 2015?

9 years ago, popular research claimed web shoppers were more likely to abandon a website if it took longer than four seconds to load.

The research by Akamai, for instance, back in 2006, revealed users’ dwindling patience with websites that take time to show up. Akamai claimed 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 a group who shopped 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 explored 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. But if you do not…

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

This research only backed this up.

And that was many years ago.

Today – in 2015 –  Site speed is a critical area of website development and profitable e-commerce.

See below how slow load times impact your business:

How Loading Time Affects Your Bottom Line

Download speeds

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.

Some people today STILL connect to the Internet over a phone line, 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 has a SLOW connection capability – and aim to deliver for them a satisfying user experience as possible.

Then – everybody wins.

How To Speed Up Your Website Load Times

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

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 satisfies 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 2015, 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. It could be part of the algorithm on some VERY minute level (why not?), but small differentials in page speed load will never be as important than the actual usefulness of the page you want to rank.

You can’t put lipstick on a pig.

If your server is dog*&^% and your website takes minutes to load it’s a bad user experience and your site probably will not be doing your online business any good.

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) 





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 2015

Trust Hobo with your SEO plan

SEO Audit