Category Archives: Image optimization

How to improve site load speed to increase conversions

Does load speed matter?

A slow loading webpage creates a poor user experience, but does it really make a significant difference if you have an awesome proposition, product or website? Well, Google discovered that page speed does matter big time and it shelved a potential improvement to its search engine results page as a direct result.

After listening to customers in research express a clear preference for 30 rather 10 results on Google search, Marissa Mayer, Director of Search Products and User Experience, decided to A/B test displaying these two options. The experiment showed that displaying the extra 20 search results increased the time for the page to load by 0.5 seconds.

Shockingly this led to a 20% fall in full page renders when 30 results were displayed.  In other words one in five users searching on Google were not willing to wait an extra 0.5 seconds for a page to load.

Research by Google indicates that mobile users are even more sensitive to page loading speed. A page load time of between 1 to 5 seconds means the probability of a bounce increases by 90%

Image of impact of page load speed on bounce rate for mobile devices
Image Source:

 

So how quickly should a webpage load? Research for Akamai and Gomez.com found that almost a half of users expect a site to load in 2 seconds or less and that many will leave a site if it hasn’t loaded within 3 seconds. This demonstrates that users have relatively high expectations and could help explain the impact on conversion of slow loading websites.

As a rule of thumb if your site loads within 3 seconds that is pretty good performance. More normal is between 4 to 7 seconds, but don’t be satisfied with that, look to reduce it. Anything more than 7 seconds and you definitely should be looking to take action to reduce the time your visitors have to wait to interact with your website.

You should seek to reduce load speed provided the ROI makes sense. This can be assisted by A/B testing identical pages that have different load speeds. Provided you see an uplift that outweighs the cost of improving the load speed then it is worth continuing the process.

How to measure load speed?

Image of tape measure
Source: Freeimages.com

All web analytics tools should allow you to see your individual page load speeds. If you are using Google Analytics go to “Behaviour” and select “Site Speed” and “Page timings”. In the drop down menu select “Average Document Interactive Time” as this is a measure of how long before a user can begin to interact with the page. This is a more meaningful indicator of load speed as many sites have content loading in the background well after the page appears to have loaded to a visitor.

 

Google Analytics site speed overview
Google Analytics – Site speed overview

 

Other tools to measure load speed:

  1. Google Developers: Free resource that rates your page load speed for desktop and mobile devices. Generally your site should get a score of over 80 to be performing well, but see how you compare to your major competitors to benchmark your site speed.  It also provides recommendations for the main areas to investigate to improve your load speed.

Google Developers Page Speed Tools

  1. WebPagetest: Free tool for the more technically minded user that allows you to define the geographical location and to test different in different browsers. This gives you a detailed breakdown of the load speed of individual elements on the page.

 

  1. OctaGate Site Timer: Provides a Free evaluation of the impact on load speed of images, frames, iframes, script files and it also follows redirects. It also helps you identify the key offenders for you to optimise.

 

  1. YSlow: This gives you a Free analysis of load speed and indicates why page speed is slow based upon Yahoo!’s rules. It also enables you to select the browser you wish to test the page in.

 

How to speed up your site:

1. Minimise page size:

image of 2 weights
Source: FreeImages.com

1.1 Use GZIP compression – Check if your web host is using GZIP compression and deflation as this can reduce file size by up to 70% without adversely affecting the quality of images of videos.  Enter your site URL into the GZIP test tool to find out if your site is already GZIPPED.

1.2 Use JPEG rather than PNG images – PNG images don’t compress photographs anywhere near as much as JPEG files can and so make sure you use JPEG’s when you can. Smaller file sizes can help improve load speed markedly.

1.3 Adjust JPEG image quality – By setting the image quality of JPEG’s to 50-75% you can often significantly decrease the size of your images without any obvious reduction in image sharpness.

1.4 Avoid single page websites – Trying to get all your content on a single page is problematic at the best of times, but it also tends to result in very slow loading times because the page is often long and there are no other page to move content to.

Image of popcorngarage.com

1.5 Remove extraneous metadata from image files – Designers often leave a lot of metadata in image files, including comments, thumbnails and other information that they may find useful, but just adds to the file size. Get your designer to create a backup a copy for themselves and then put the website image version through image optimization software to minimise the file size and remove ancillary chunks.

2. Reduce the number of browser requests:

 

2.1 Enable browser caching – Provided your page dependencies don’t change too often you should look to enable browser caching so that the browser doesn’t have to dynamically generate the page every single time it loads. Contact your server admin or if you use WordPress you can use plugins like WP Super Cache to significantly improve page load times.

2.2 Use CSS sprites to combine small images into one file. Most websites have lots of small images (e.g. logos, icons, buttons etc.) which normally have to be fetched individually from the server. CSS sprites significantly improve performance by combining all the small images on a page into a single file called a “sprite”. This reduces the overhead of having to fetch multiple image files.

2.3 Merge related CSS and JavaScript files – Combining individual CSS and JavaScript files can reduce the number of files and thus help your browser load much faster.

2.4 Minimise the number of redirects – Multiple 301 redirects can confuse your browser and slow page load dramatically. Be careful not to create too many redirects as this can kill load speed.

3. Minimise the distance to your site:

3.1 Reduce the distance to your site – If you have users spread out around the globe consider a Content Delivery Network (CDN) to allow access to a server near the geographical location of your visitors. CDN providers such as Amazon Cloudfront and Softlayer provide competitive CDN services that can significantly improve site load speed.

Conclusion:

The evidence is clear – load speed is an important driver of bounce rates and conversion. Don’t let a slow site speed harm your conversion rate as there are plenty of ways to improve load speeds. Make sure you regularly check our site speed and use the above strategies to improve your site’s performance. It could make a large difference to your conversion rate.

Here is a great infographic from Skilled.co on how load speed affects your website.

Thank you for reading my post and if you found it useful please share using the social media icons on the page.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.com, Foxybingo.com, Very.co.uk, partypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.

Image Optimisation Tools To Improve Load Speed

14 Resources For Image Optimisation:

Pictures are important for websites because studies indicate that a relevant image improves engagement and views of a page. Images grab our attention and can trigger emotions much more quickly than text. Our brains process images almost instantly, but it takes much longer to read copy. But do you need worry about  image optimisation?

image of 2 weights
Source: FreeImages.com

Serving images has a cost as it increases the weight of a page and consequentially the page often takes longer to load. According to the latest HTTP Archive Report which collects technical data from half a million of the web’s most popular websites, the average page now weighs 2,262 KB, up by 16% during 2015. The average webpage has grown by 221% since 2010 and well over half (64%)
of the weight (1,443 KB) is comprised of images.

To keep pages to a manageable weight it is important that images
are optimised to avoid slow load speed which can be damaging to conversion.   Google penalises sites with slow load speeds and visitors are more likely to abandon a site the longer it takes to load. Image optimisation directly influences SEO and conversion.

Research by Akamai and Gomez.com discovered that almost a half of users expect a site to load in 2 seconds or less, and many will leave a site if it hasn’t loaded within 3 seconds.  Etsy found that 160KB of additional images resulted in a 12% increase in the bounce rate on mobile devices.

To help alleviate these problems here  are 14 resources, many of which are free,  for image optimisation.

1. CompressNow. Free online image optimisation tool that supports GIF, JPG, and PNG. Upload an image up to 9MB, select compression level, and view.

Compressnow.com homepage image


2. FILEminimizer Pictures.
 Offers Free software to reduce
the size of your images, photos and pictures by up to 95%. Compress your JPG, BMP, GIF, TIFF, PNG, and EMF images and pictures. Compress whole digital photo albums at once. Choose from four different compression levels. FILEminimizer also comes in a premium suite that integrates with Microsoft Office, Microsoft Outlook, and Lotus Notes.

Image of Fileminimizer homepage from balesio.com


3. FileOptimizer.
 Free lossless file image optimisation tool  for Windows that supports over 100 different formats. FileOptimizer has a simple
interface that’s easy to automate. All processed files are copied to the recycle bin, so you can easily restore them. FileOptimizer is an open source application.

image of fileoptimizer homepage from nikkhokkho.sourceforge.net


4. ImageOptim.
 This is a Free application for Mac that optimizes PNG, JPG, and GIF images. To do so, ImageOptim integrates a
batch of tools, including PNGOUTPngcrush, ZopfliJpegOptim, and Gifsicle. ImageOptim finds best compression parameters and removes unnecessary comments and colour profiles.

 

Image of Imagoptim.com homepage


5. Image Optimizer.
 Free tool that’s available online or as a
download. Change image dimensions, quality, or file size. Choose an image or compress images in bulk.

Image of imageoptimizer.net homepage


6. JPEGMini.
  A image optimisation and compression application that reduces (up to 80 percent) the size of photographs, while preserving their full resolution and quality. JPEGmini Pro supports photos up to 50 megapixels and includes a plugin for Adobe Lightroom. Lite is Free. 

image of jpegmini.com homepage


7. Kraken.io.
 Designed with the purpose of being a single, easy-to-use tool to optimise images. Offers multiple methods for resizing and cropping images, lossless and lossy options, and has a WordPress plugin. You can store optimised images directly in Amazon S3, Microsoft Azure, and Rackspace Cloud Files.

Image of https://kraken.io/ homepage


8. PNGOUTWin.
 An application for Windows that uses its own proprietary algorithms for image optimisation and compression. Convert and compress to PNG from TIFF, GIF, BMP, and other formats, or optimize your existing PNG files. Compress one or more files, and drag and drop multiple files on the main window.

Image of PNGOUTWin homepage from http://www.ardfry.com


9. PNGGauntlet.
 A Free PNG shrinking application for Windows.
It combines PNGOUTOptiPNG, and DeflOpt to create the small lossless PNGs. PNGGauntlet converts JPG, GIF, TIFF, and BMP
files to PNG.

Image of PNGGauntlet.com homepage

 

10. PNGOptimizer. Free small Windows program that cleans and
reduces PNG files. It also converts other lossless image formats (BMP, GIF, and TGA) into PNG. PNGOptimizer has a simple drag-and-drop interface and creates easily available PNG screenshots.

Image of PngOptimizer from PSYDK.org

 

11. PunyPNG. A Free online tool that supports JPG, GIF and
PNG. Compress up to 20 files, with a max of 500KB each. The Pro plan offers higher compression and optional “lossy” (e.g. slight quality reductions)  optimizations, with a 1MB max file size for 5,000 images per month.


12. 
RIOT.  (Radical Image Optimization Tool) is a Free image optimisation programme for Windows to visually adjust compression parameters while retaining minimum file size. Compare the original image next to the optimised image in real-time and instantly see the new file size. Its features include batch support for multiple files, image adjustment tool, and colour reduction.

Image of http://luci.criosweb.ro/riot/ homepage

13. TinyPNG. A Free online tool that provides lossy compression to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to
store the data. TinyPNG also offers a plugin for Photoshop, for Windows and Mac.

14. Trimage. This is a Free cross-platform tool image optimisation for PNG and JPG files . Trimage uses OptiPNG, Pngcrush  PngcrushAdvanceCOMP, and Jpegoptim, depending on the file type. All images are compressed on the highest available lossless-compression levels. Available for Linux and other Unix systems.

Thank you for reading my post. If you found it useful please share it using the social media button below.

You can view my full Digital Marketing and Optimization Toolbox here.

To browse links to all my posts on one page please click here.

  • About the author:  Neal provides digital marketing optimisation consultancy services and has worked for  brands such as Deezer.com, Foxybingo.com, Very.co.uk, partypoker.com and Bgo.com. He uses a variety of techniques, including web analytics, personas, customer journey analysis and customer feedback to improve a website’s conversion rate.