Published on 20/03/20 by James Vjestica
Are you having issues with the loading speed of your website? Our February edition provides a more technical insight into the world of eCommerce as our ‘Front-End Manager’ Aaron Layton and ‘Senior Developer’ Chris Hardy share top tips on how to overcome such issues.
This month’s conversation is based around the following:
- Page speed issues and how to overcome them
- Free tools you can use
- Image compression and minification
- Choosing the correct file types
- And more!
Check out what they had to say by either clicking on the video or reading the full transcript below!
Why not get involved in the conversation? Subscribe to our Youtube channel to keep up to date with all of our videos and let us know which retail topics you would like us to discuss in the future!
Aaron: Hi everyone, welcome to the eighth episode of the ‘Ecom Catch-Up’, where I’m Aaron, the ‘Front-End Manager’ at Remarkable.
Chris: And I’m Chris, the ‘Senior Developer’ at Remarkable.
Aaron: And today it’s kind of gonna be a special one, we’re going to talk and focus purely around speed of the website and what sort of tips and tricks you can do to speed up your site. This is kind of an ongoing series, where today we’re gonna focus around images and take you from there
Aaron: Okay so why are we focusing on speed this week? Erm, looking at all the stats of the big companies like Google and Amazon and Microsoft – all of the research that they’ve done in the past, erm, they see the point in time and efforts in making websites faster has a massive return on investment. So, a couple of quotes we’ve got is, the first one is Pinterest increased their search engine traffic and sign-ups by 15% when they managed to reduce the perceived wait time of their websites by 40%. Another one from a website called ‘Cook’, they increased conversion rates by 7%, erm, and they decreased bounce rates by 7%, increased page sessions by 10% when they reduced the average load time by only 850 milliseconds. That’s a massive gain just for such a little amount of time.
Chris: So, a couple of case studies, er, where low performance had a negative impact on business goals, so, the BBC found that they lost an additional 10 percent of users for every additional second their site took to load. Erm, ‘Double Click’ by Google found that 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load. In our shared pursuits to push web sites, to do more we’re running into a common problem. Sites have more features than ever nowadays, so much so that sites are now struggling to achieve a high-performance level across a variety of networks and conditions and devices.
Aaron: So, performance issues can vary; at best, issues that arise in your site would only be minor annoyances to the end user or worse they could render a site completely inaccessible, causing them to go elsewhere to fulfill their needs. So, why should we optimize images, Chris?
Chris: So, since images make up a large proportion of the average, er, per page load, image optimization represents a uniquely large opportunity to boost performance and this is what we’re going to look at today.
Aaron: So, retaining users is a crucial part of making sure that conversion rates for our e-commerce sites stay high. One of the things that would affect an end user is the perceived low terms of the site. So, if a website takes 10 seconds to load up and nothing shows on the screen for 9 seconds, that’s going to be a very negative effect because the user is going to see a blank screen, but if something gets on the screen within the first, say, half a second and it still takes 10 seconds, the user thinks in their brain that something is happening, so are more willing to stay on the site. So, one of the areas that we get a focus around is the images first and foremost on the site and how you can change certain file types and compress images to get a faster loading. So, we’re going to switch over to the computer where we’ve got a few examples, erm, the first one we’re going to talk about is just gifs in general, erm, which are just a major mainstay for, you know, modern web. Gifs are such an old file type format and the sizes couldn’t vary from just a half meg (MB) all the way up to 10 meg (MB) in size.
Chris: Okay, so here we’ve got a gif that we’ve just picked from the internet, erm, just looking at the file size of it. So, the file size is 5.4 megabyte on disk which is obviously huge, it’s going to cause them, you know, a massive slowdown of your website, if you’re going to have this on there. One of the things we can do to improve this is to convert it into one of the latest formats which is a ‘WebP’. Er, you know, quality is exactly the same, there’s no change in it or anything like that, er, basically, you know, and then let’s see how big this file is now once we’ve converted it. We’re now looking at a file that’s five, almost five times smaller, er, obviously this kind of, you wouldn’t probably use a gif this large usually but it just shows the amount of data that you can save just by converting into the latest tech. So, just converting this into a ‘WebP’ we would be looking at a saving of around 80 percent.
Aaron: So, on the subject of image compression, one of the things that you can do is use free tools online, erm, such as the ones that we’re going to show now, which we’ve linked down below for you. The first one being ‘Kraken.io’, so, this is free to use and you can upload a few images at a time. Er, once you’ve got them online you can choose from a few options with ‘lossy’ and ‘lossless’ data compression types. So, a ‘lossless’ compression means that all that’s gonna happen is it’s going to strip out metadata from any of your images and that’s the information in terms of what camera was used, what focal length and just other meta information about the pixels in general and then a lossy file format would strip all of that out and also change some of the, some of the image encoding and maybe swap out some colours that aren’t necessarily perceivable to the human eye and since you just try and make the file size smaller by reusing bits of data. One of the other tools we’re going to look at as well is ‘Squoosh’, so ‘Squoosh’ is a tool made by the folks over at Google, erm, this is one of their 20% passion projects that they did and this tool allows you to drop any file type onto the website that you can get your hands on even providing a few different example, erm, images to get you started, and what it then does, it compares left and right-hand screens of different image compression types. There’s dropdowns on there, so you could change the settings, change the end file types that you want to come out and they’ve even got this this little comparator there so you can see the difference between the two.
Chris: So, another technique we can use is ‘lazy loading’. ‘Lazy loading’ is another technique that defers loading of non-critical resources on page load time. Instead of loading these resources on page load we only load them when need them, er, this basically means, you know, we’re not loading that extra data up for no reason and saves us all a load of time.
Aaron: From there, that’s going to enable the browser to know not to load that image up on the first load of the website and then for this script to kick in and then start loading them up intelligently, as the image gets closer to the viewport or the on screen content of the website. ‘LazySizes’ itself has got a few different options to help you when loading up different file types as well, so, if you needed a high-resolution image for, maybe, retina devices, then ‘lazySizes’ has got you covered with that, and just a few different options you can say when to load up an image, if the image is larger than 500 pixels wide. If you wanted to load up different image sizes as well, based on responsive screen sizes ‘lazySizes’ have got you covered as well for that. So, the example here on screen is you’ve got a data source where they’re specifying a small image and then after that they’re specifying a width of 500 pixels. From there, they then state a medium image to be loaded up, if the image itself is larger or displaying larger than 640 pixels and then a final big image, if the image loads are larger 1024 pixels wide.
Chris: Right, down here we have an example, so, this is how we would do a normal image tag on line two, er, with a source attribute, er, line five and six we have how we would do it through ‘lazySizes’, this is using the data source attribute and a class of ‘lazy load’ and now the newest version of this is how we do it through native ‘lazy loading’. You can see we have a source such route, like a normal image type and also we have the loading attribute which is new to Chrome.
Aaron: So, what this attribute does that’s loading with a value of ‘lazy’, it instructs the browser to delay loading this image and if it’s off screen and then the browser can just intelligently load that up after everything else that’s built on screen. So, there’s a few different options for this which we’ve got examples for, there’s ‘lazy’, ‘eager’, and ‘auto’. So, ‘lazy’ as we’ve said, ‘eager’ says to try and prioritise this resource above everything else, so you might use this for banners that are on screen, erm, maybe a first product image, you’d probably want that information to be on screen as soon as we can. For the value of ‘auto’, is just the Wild West and let the browser figure that one out for you and they’ll just try and do it intelligently again with what’s on screen and what’s not.
Chris: So, another example we’ve got is a picture tag. This allows us to load up different image sizes for each device, erm, based on media queries. An example of this, we’ve made a quick example.
Chris: So, the way the picture tag works is it starts with the image type which is inside it, er, it’ll load that up first and then it will look at the set of rules that we’ve set, so, for example, if the moon width of the browser is some 768, it’ll then load the second one in and if its larger than 124 pixels wide it will then load the desktop version in.
Aaron: So, to couple this with a previous example of native ‘lazy loading’, if you added ‘layer loading = lazy’ on to that image tag, then couple that with ‘dynamic loading’ of the correct sized images, this will just ensure that not only are you loading up the exact image size that you want, you’re also delaying it until it’s needed. All of these things will help in increasing your page speed and improving the perceived page speed for the users. So, what other ways, Chris, can we improve the perceived load time for images?
Chris: Er, so, we can save them out progressively, this will load the images in, in layers, meaning that when we do load, when the first parts come through, we can automatically see the bottom of the image even though it’s a little bit faded.
Aaron: So, the problem with a default loaded image, as Chris says, it loads it up line by line which means if you’ve got a particularly large image, the end user doesn’t see what’s at the bottom of the image, if you’re on a slow connection, it takes a long time to get that bit of information. Now, for us that’s normally where we would put a ‘call to action’ or maybe a promotion piece of text, whereas a progressively loaded image would show at least the blurrier or a fuzzier version of the entire image from the get-go. From there we then progressively load up and get more clearer and clearer until the end-user can see the entire image as it was meant. The advantage for this is that users can normally make out what the image is in far less time than it would have taken for the entire image to load. So, we have an example on screen, er, the difference between progressive and base loaded images, so, what you’ll be able to take from this is the image on the left will instantly be recognisable to the end-user and the image on the right takes a much longer time for the end-user to realise what it is and you can see the base line is still downloading at its highest quality whereas on the left the progressive is already done.
Chris: So, another example we’ve got is of an actual website loading a baseline image with an also progressive. We can see clearly on the right that the image loads are much faster than the baseline version giving the user a perceived faster load time.
Aaron: So, in general the things we’ve spoken about today are image minification, choosing the correct file type, so just compressing it into, maybe, ‘WebP’s’ and animated PNG’s and then a perceived load time difference between a baseline and progressively loaded image. So, even though a ‘WebP’ image is smaller than the original gif, there’s still ways we can take this example even further. So, on screen there’s another tool called ‘Cloud Convert’ which will be links to down below, so, if we take the original gif and drop that onto ‘Cloud Convert’, surprisingly enough if we convert this to just a video file format, then the sizes for that are even smaller.
Chris: So, to integrate this onto our own website, we can use HTML videos, er, literally just adding the source, er, with the file name and any properties that we need to add.
Aaron: So, the properties needed here are ‘autoplay’ and ‘loop’ to instruct the browser that this needs to play as soon as the page loads up and that it should keep looping like the original gif. We then instruct the browser that the video is muted but it’s not going to get in the way of the end user and that it plays in line with the rest of the content. All four of these attributes they help the browser to understand that this is a video that needs to act like the original gif.
Chris: Another one of the tools we can use to test our sites is ‘Web Page Test’.
Aaron: So, ‘Web Page Test’ is a free and impartial tool, so, developers across the nation, they all use this just as a way of measuring the impact of changes to the site, how many images they’ve got, if what their latest changes to the site have had any sort of meaningful impact. One thing the webpage tests allows you to do as well is to compare your website’s visually between, maybe, your competitors. So, on the screen we’ve got an example where we’ve got two websites loaded up and we’re just going to load up the ‘dresses’ category for these two websites and you can click and ‘start test’ and ‘Web Page Test’ would then ask you. ‘Web Page Test’ would then go away and schedule the test to be ran and what happens is you test these websites and because for us, a website loading up would normally take, you know, less than a second, we’ve got fast computers and really fast internet that’s sadly not the case for everybody that’s using the internet. You might have a really slow phone that’s a few years old, you might be on some really spotty 3G internet connectivity, so, ‘Web Page Test’ slows down this connection speed by artificially placing you on a 3G connection and then making sure that the traffic goes essentially across to America and back as a round trip to really extend out this visual comparison that we can see. So, these results, it’s important again to remember that the timing has been artificially slowing down and information’s been sent across the pond and over a 3G connection. In reality, these websites, they would be loading up on a fast connection anywhere between a second to three seconds in time, but of course we can’t always control what the end users are trying to load the sites up on. It could be a spotty internet connection, on a train going through a tube. So, that’s it for another episode of the ecom catch-up, thanks for watching.
Chris: If you have any comments be sure to comment down below, give this video a ‘like’ or subscribe if you’ve really liked this and we’ll see you next month.
Aaron: Remember to click the banner icon, see ya!