90% of websites are strangled by their own images

Back Posted on 04 Apr 2017

Page speed

Page speed is critically important. It's been a Google search ranking factor since 2010 and features prominently in Google's Analytics and Search Console tools.

More recently, in June 2016 Google was reported to be working on mobile-specific page speed as part of their mobile-friendly search ranking process.

Like us, our users place a lot of value in speed - that's why we've decided to take site speed into account in our search rankings [1].

Page speed concerns Google because when they list your site in the search results it's a recommendation that reflects badly on them if your site is slow.

Users don't like slow websites. Studies show

• 40% of visitors abandon a website that takes more than 3 seconds to load [2]
• a 1 second delay increases bounce rate by 8.3% [3]
• Google's crawl rate is limited on slow websites:
  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, Webmaster Trends Analyst at Google.

In simple terms slow websites hurt revenue.

Poorly optimised images kill page speed

Hubspot's SEO Myths 2016 highlighted images, the key contributor to page weight, as a concern 12 months ago. But few took notice, the same contributor features again in the SEO Myths 2017 edition:

The effect of this myth means the average web page on 02 December 2016 weighed in at 2.47mb. A whopping 1.62mb (65%) of this contributed by images.

Pie chart showing Average bytes per page by content type, archive.org 02 December 2016

So images are by far the biggest contributor to page weight and make websites slower but now we have a catch 22 - your website needs images so you can't just remove them.

Images are powerful. They can make time stop, take you back to the wonder of childhood or make grown men cry.

Powerful images are worth a thousand words. But what if you could have read a thousand words in the time your image takes to download?

This is a very real possibility. There's a 90% chance the images on your website are not optimised [0]. This makes your website slower than it should be which makes for a poor user experience, ultimately directly affecting your revenue.

Is your website one of the 90%?

Let's explore how you can find out if images make your site slow.

How slow is too slow?

If your website takes longer than 2 seconds to load it is slow. In 2010 Maile Ohye, Developer Programs Tech Lead at Google, stated

2 seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half second [5]

Fast forward to 2016 and webdesignerdepot.com suggests a target time of 0.5 seconds, any longer than 2 seconds is too slow [6].

This correlates with Pingdom's 2016 end of year roundup of the world's top 50 blogs - all but 1 of the top 10 load in under 2 seconds [7].

How achievable is sub 2 second page load?

Should a small business set the same targets as the world's biggest websites?

You may not have the budget, knowledge or time the big players do but the truth is anyone can do it.

Google and others go to great lengths to give you the knowledge and tools to highly optimise your website.

I would go so far as to argue that every website developer should be hitting the sub 2 second page speed target as a matter of routine.

Frankly, if your site doesn't achieve this your developer is either lazy or doesn't care enough about your business.

To put this in context, take the lowest budget website I developed last year. The home page loads in 643ms, has a total weight of 509kb and is reported by Pingdom to be faster than 95% of all sites tested.

There is nothing special about how it was written and no specific attention was given to optimisation to achieve this performance.

Quite simply it's the minimum standard every website, including yours, should achieve.

Understanding what makes web pages slow

Web pages are made up of lots of individual files including stylesheets, javascripts, images and fonts. When someone visits a page on your site each of these files must be delivered to their browser.

The more files there are the longer it takes. And if they are poorly optimised it takes even longer.

Some web pages like amazon.co.uk need to load almost 300 files so figuring where the bottleneck is might seem like an impossible task.

However as we've discovered, one specific file type excels at making your website slow. Images.

Your website needs images

We already looked at how images can provoke an emotional response. If the link at the start was too subtle I'm talking about the story of The Final Salute.

Images also affect how well people remember information.

If information is presented orally, people remember about 10 percent, tested 72 hours after exposure. That figure goes up to 65 percent if you add a picture - John Medina, Brain Rules [8]

But images are large files (we're talking filesize here, not dimensions) and when images aren't optimised they make your website slower than it should be:

Images comprise more than half of a typical page’s total payload, and much of this bulk is unnecessary. Image compression is a basic performance technique that allows developers to reduce this payload, but of the 100 sites we tested, only 9% had properly implemented it.

We also found that 87% of sites don't take advantage of progressive image rendering - uxmag.com [9]

The devil is in the details

A range of factors affect how well images are optimised:

• the file format you choose - gif, jpg, png
• colour depth selected - 8 bit, 24 bit, 32 bit
• physical dimensions - 240x480, 800x600, 1600x1200
• compression settings

To give you a real example of how these factors influence page speed, one of the websites on my server (I didn't design it, only provide the hosting) features an image in png format sized 1.88mb.

Optimising the image reduces this to 0.2mb. Changing the format to jpg reduces it to 0.12mb - a saving of 94%.

Two factors contributed to the huge size of the original image:

• The physical dimensions were too large, bigger than the website can actually display (image was 2000px wide but the website can only display 1170px wide at most).
• The image is a photo in png format. jpg format is more efficient bringing the bulk of the 94% saving

Pro Tip - generally the lowest filesizes are achieved with jpg format for photos and 8 bit png for images comprising solid blocks of colour eg. bar charts.

How images affect page speed in the real world

The table below shows the page speed and image statistics for 10 small business home pages [10]. Only two achieve a page speed of 2 seconds or less.

One, I'm pleased to say, is the low low budget website mentioned above that I developed last year.

From these 10 sites we can see on average images are responsible for 79% of the total page size. On it's own this doesn't mean much, however more detailed analysis with Google Pagespeed Insights raises some interesting points:

• A saving of 45% can be made across the sample because images on 9 of the 10 home pages (90%) have not been optimised. This is almost identical to uxmag's findings quoted above (91% - calculated from statement that only 9% optimised images).
• This means 45% of the image data being transferred by the websites is useless. It costs visitors 45% more bandwidth and slows sites down for an all round bad user experience.

Ultimately, as the studies linked to earlier show, this has a direct impact on revenue.

No small business should have to tolerate such inefficiency (up to 85% in the case of www.dalduff.co.uk), especially since the issue should either

1. never have existed in the first place - if the web developer added the images they didn't do a good job
2. not have been allowed to happen - if the business added the images via content management the system should be better configured to perform image optimisation automatically.

The low budget site was added to the sample set deliberately to compare with the otherwise random selection to demonstrate low cost doesn't mean low performance.

What does this mean for your users?

Half of the world world is mobile, up to 56% of web traffic comes from mobile devices [11].

Mobile users expect pages to load as fast as, if not faster than, pages on desktop computers.

Almost half of mobile users expect pages to load in 2 seconds or less, and 40% will abandon a page that takes longer than 3 seconds to load. [12]

Since mobile internet tends to be slower than desktop image size is even more critical. We tend to think of the Internet as free but we can actually measure the cost to your customers of being forced to download web pages with badly optimised images.

Here's an extreme example. whatdoesmysitecost.com shows the page tested costs mobile users in Canada $2.91USD to download. It's not so bad on a UK tariff working out at $0.35USD.

It would really make users think twice about using your site if their phone went ka-ching every time a page loaded. That is if they could stand the 111 second load time.

Are your images hurting performance?

It's easy to check your website performance with Google Pagespeed Insights, or the non-technical version. Pagespeed Insights will even optimise them for you and create a neat package to replace the originals.

Screenshot shows website assets including images optimised by Pagespeed Insights packaged to download.

You can also check page speed with Pingdom Website Speed Test. Doing this before and after optimising images will show you actual performance gains achieved by the optimisation. Remember your target time is sub 2 seconds.

Optimising images for speed

Optimising images for speed is easy. You don't even need fancy software, there are lots of free tools online.

For WordPress users there are plugins that take care of optimisation for you. There are similar plugins for most other content management systems.

Links to online tools and plugins at the end.

As easy as image optimisation is it's essential to make sure your Content Editors understand the importance and you insist it is part of their workflow.

Each time a new image is created run it through your preferred optimisation tool.

Screenshot showing TinyPNG makes image files smaller without losing quality. Despite the name TinyPNG can also optimise jpg files.

That covers new images but what about existing images?

If your Pagespeed Insights results show only a handful of images need optimised the most efficient way is to process them manually. You can download the optimised assets pack provided by Pagespeed Insights or do it yourself with TinyPNG. Then upload to replace the existing files on your website.

However, if many images need optimised it's best to ask your web developer to help. They will be able to batch process images with an automated tool such as JPEGmini or pngquant which is quicker and more reliable than manual options.

Advanced image optimisation

File size is just one aspect of image optimisation. For completeness we should introduce the more advanced techiques your developer should be implementing for you:

• CSS sprites - sprites combine many small images, usually icons such as social media logos or map symbols, into a single file which saves http requests to increas page speed
• Inlining base64 - encodes images so they can be embedded directly in your page saving annother http request. Downsides are it can inflate size by around 30%, means the data is sent on every page load and makes maintenance tedious if encoding is not automated
• Lazy loading - images are loaded only when needed ie. images at the bottom of a web page only load if the user scrolls down far enough to see them
• Content Distribution Network (CDN) - a system that distributes copies of your website files, including images, to servers worldwide. The server nearest to users sends your images which is faster than if they were sent from the origin server
• Media queries - gives devices a choice of image sizes so they can download the one most appropriate to them ie. larger for desktop, smaller for smartphone
• <picture> element - a fairly recent addition to HTML specification gives web designers greater control over which image file is downloaded by browsers depending on device being used

Other elements of image optimisation

Although we are specifically looking at the effect of image optimisation on page speed, it is worth mentioning other equally important elements image related elements as they influence usability and search rank.

• Caption - Google advise to write a short caption below each image
• Filename - image filenames should be descriptive eg. photo-of-edinburgh-castle.jpg is better than DSCN_1234.jpg - keywords matter
• Alt tag - is displayed when images fail to download or users have images turned off in their browser and is useful for users of assistive browsing tools

Screenshot from Google Primer lesson: Appeal to Searchers and Search Engines with SEO

Wrapping up

To be successful online your website needs to be better than your competitors.

Since 90% fail on image optimisation, you have a golden opportunity to be better simply by optimising your images.

Now it's time to test your website with Google Pagespeed Insights (or the non-technical version) to find out if you can pick up an easy win for page speed and user experience.

If you’d like to chat about how how image optimisation affects your website find me on Google+ and LinkedIn.

Update: Addy Osmani wrote an essential guide to image optimisation for anyone who needs to automate image compression. It's comprehensive and well worth the read.

Tools

• https://tinypng.com/ (also available as a WordPress plugin)
• https://optimus.io/
• https://pngquant.org
• http://jpegclub.org/jpegtran/

Sources

• 0 Original research shown in section: How images affect site speed in the real world
• 1 https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
• 2 https://blog.kissmetrics.com/loading-time/ (how website performance affects shopping behaviour)
• 3 http://uxmag.com/articles/when-design-best-practices-become-performance-worst-practices
• 4 https://www.seroundtable.com/google-crawl-slow-tw0-seconds-20070.html
• 5 https://youtu.be/OpMfx_Zie2g?t=9m15s
• 6 http://www.webdesignerdepot.com/2016/02/how-slow-is-too-slow-in-2016/
• 7 http://royal.pingdom.com/2016/02/12/web-performance-of-the-worlds-top-50-blogs/
• 8 http://www.copyblogger.com/images-engage-readers/
• 9 http://uxmag.com/articles/when-design-best-practices-become-performance-worst-practices
• 10 9 sites selected at random from local business directory, 1 site developed by myself added to compare a known low budget site. Figures from Firebug in Firefox 50.1.0 over FTTC broadband connection on 03 January 2017
• 11 http://marketingland.com/mobile-top-sites-165725
• 12 https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2015/02/why-you-should-care-about-mobile-web-performance/