Our Specialists recently worked with a client who had a WordPress site with a page loading speed of around 12 seconds. However, we were able to employ a number of WordPress image speed procedures to bring the WordPress page speed down to less than three seconds.
In our latest T-Time show, we take you through the page speed basics, the factors that slow image speeds down and the WordPress image speed methods – or WooCommerce, if you’re an eCommerce store – to ultimately achieve a better user experience for your customer base.
In this T-Time show:
- Page Speed Basics
- Mobile First
- 3G Rather Than 4G
- User Patience
- Faster Sites Get Higher Conversion Rates
- What Slows Load Time?
- File Size
- Image Dimensions Unnecessarily Large
- When Images Render
- Server / Hosting
- WordPress / WooCommerce Image Hosting
- How to Increase WordPress / WooCommerce Image Speed
- Smush
- Image Compression
- Reduce Image Sizes
- Lazy Loading
- Offload Media
Page Speed Basics
(00:39)Â We now live in a ‘Mobile First’ world, meaning that there are loads of users who are using a mobile device to access your website. It’s also likely that these users will be accessing your site using a 3G connection rather than a 4G one.
You’re obviously not in control of a user’s connectivity, but the benchmark for page load speed on a mobile device is a maximum of three seconds – and that’s just in terms of unthrottled bandwidths. However, if a user is on a 3G connection then you could be looking at a load time of twice or even three times that length.
It’s alarming that a lot of websites still have a mobile page load time of around 18 seconds on an unthrottled bandwidth – this means that it could take as long as one minute to load a page on some devices.
If this is the case with your site, your users have probably left the site by the time the page has fully loaded. Even if they haven’t got bored and bounced, imagine if you were browsing an eCommerce store you were having to wait a minute at a time to load each product page. It would be an exhausting experience which would seriously test your user patience.
Fundamentally, website speed and page load times improve your conversion rates. With a faster website, you get more sales for the exact same amount of traffic. Whether you are investing in search engine optimisation (SEO), email marketing, social media marketing, pay per click or all of the above, wouldn’t you like to get 50% more sales for the same spend? That’s what page speed can do for you.
Our eCommerce Marketing Services
What Slows Load Time?
(02:21)Â One of the main culprits is the image file size itself. When someone lands on your website, their browser has to download whole images and then possibly resize them also. This is a completely unnecessary process when you can simply compress the images, or even present a smaller image when it is needed.
So when do these images render? There is typically a lot of scrolling on both mobile and desktop devices, so usually the entire page loads. Why is your website loading so many images that aren’t even on the screen yet? Putting a stop to this via a process known as Lazy Loading would also speed your website up – there’s more information on this later on in the video.
The server which hosts your website and images is going to have some impact on how quickly your images load. However, did you know that your images don’t have to be hosted on the same physical server as your website? More on that later on also…
How to Increase WordPress / WooCommerce Image Speed
(03:45) There are a handful of plugins which you can install to help you increase WordPress image speed – these can also be used on WooCommerce:
Smush
As the name suggests, this plugin compresses, or ‘smushes’, your images. There are other plugins in the WordPress plugin directory that will do this, but Smush is the one our team of Specialists use most frequently.
With any image, there’s quite a lot of wasted space in the data. With Smush, you can compress the image to make the file size smaller, without damaging the image quality. Smush is also useful for creating multiple versions of images with different dimensions, which is particularly useful for speeding up delivery of images on mobile devices.
Lazy Loading
(05:59)Â ‘Lazy Loading’ refers to a process which defers the loading of off-screen images until the user begins to scroll. There are several WordPress plugins which can carry out this procedure, including BJ Lazy Load.
The fact that a page may take six seconds to load on a mobile, rather than three seconds, is not anything to lose sleep over as long as you have some form of content appearing within the first three seconds.
If you give your user something to consume within three seconds, then the rest of the content which would sit off-screen until the user scrolls can be processed in the background, without affecting the user experience.
Offload Media
(07:39)Â This plugin is a little more advanced, and you will ideally need access to your DNS records and an Amazon Web Services account to make it work.
Think for a moment about your server hosting – if you are on a shared hosting platform, then the resources of your server are being shared with other websites. This means that if other websites are particularly busy and making lots of requests to the server, it’s going to slow down your site and your image speed.
You may want to consider upgrading to a dedicated box – there are costs involved for this, of course, but consider it an investment with the subsequent increase in conversions, or Return on Ad Spend (RoAS) if you’re using Google Shopping.
Offload Media focuses more on your image hosting by collecting all of your images and uploading them to Amazon Web Services. By default, what this means is that some of the image addresses within your WordPress or WooCommerce site are no longer on your domain, but they are much faster in terms of loading.
From here, you can map Amazon’s content delivery network CloudFront to the bucket of images sat in your Amazon Web Services account. Long story short, CloudFront takes all of your images and propagates them around lots of servers all over the web.
The user is only connecting to the server nearest to them to request the images, but it doesn’t matter where in the world they are – they’ll connect to an Amazon server which effectively holds copies of your images. This again makes your WordPress image speed much faster because there’s less physical distance between their connection and the server they’re connecting to.
Finally, to make this work you need to access your DNS records where you can restore your domain to the image addresses, making them SEO-friendly while remaining lightning quick via Amazon Web Services and CloudFront.
If you found this video useful, make sure you’re subscribed to our YouTube channel for more upcoming videos with tips and advice on how to improve your business using Google Analytics and beyond.
Do you have any further questions about WordPress image speed, or the user experience of your website in general? Get in touch in the comments, or click below to speak with one of our specialists and find out more about our conversion rate optimisation services.
