Now that it’s been a while since I last made any performance-related changes to my HTML web site (Updating An Old Web Site To HTML5 - Part 3 - Responsive Web Image Layout With srcset And CSS was published in January 2019) I decided to take another look and see what Google thinks of it now. Google Analytics made several suggestions that were common to many of the pages on my site, so I decided to work my way through them one at a time and see what effect they had.
There were three main “opportunities” for my site, and the most popular recommendation was:
Defer offscreen images
Image-heavy pages use a lot of bandwidth, and this can take a long time to download, especially over a cell connection. It also means the page is running through your visitors’ data allowances and, let’s be honest, not everyone is going to look at every image on your page. This is wasteful of the data, and is best avoided if possible, and it is.
The only images you really need to download are the ones that the viewer sees, so if you can download them just before they are scrolled into view that’s ideal. There are numerous ways of doing this using HTML5 and/or JavaScript, and you might want to do this yourself. For example, Opera 75 onwards handles the ‘loading’ attribute for images and frames, allowing you to use lazy loading.
Currently Firefox doesn’t handle the loading attribute, although it may in the future.
The HTML img tag also has the decoding attribute which lets you hint whether image decoding should be asynchronous or not.
I thought about this, briefly, but then decided I really didn’t want the worry about cross-browser compatibility issues, and so I decided to try the lazysizes script, initially described at https://web.dev/codelab-use-lazysizes-to-lazyload-images/.
The lazysizes lazy loader lets you implement lazy loading on your images by doing the following:
Download the lazysizes.min.js file and save it on your web server
Add a <script> node referring to the file in the header of each of your HTML pages
Add the lazyload class to the images and iframes you want to be lazy loaded.
That’s pretty much all there is to it!
Why not use the IntersectionObserver?
The IntersectionObserver has been available since 2016 and has, at the time of writing this, reached version 2. It’s from the W3C, and the source code is available from GitHub. It looks like a very good and flexible library, with some really interesting and useful features, but that’s why I eventually decided against it – it’s more complex to add to a web page when all I needed was something that delayed images. I might change my mind later, but at the moment I’m aiming for something quick, easy and simple that will improve my Google Analytics PageSpeed scores.
Results
Using deferred loading on images didn’t actually make much difference to Google’s opinion of my site’s Desktop performance. The Mobile performance score improved a little but was still pretty woeful, especially since Google’s recent emphasis on mobile sites has made this more important. The change also stopped Google presenting “Defer offscreen images” as an “Opportunity”, and that’s an improvement by itself.
I also added the lazyload class to the iframe elements on the site. These include references to Google Maps, and that DID make a difference – the Mobile PageSpeed Score for the sites containing that code improved by around 30!
The slight improvement to the PageSpeed Score is, after all, an improvement and so it was worth making the change. Looking at the actual page load times they’ve definitely improved by a significant amount, so there’s possibly something else reducing the amount the PageSpeed Score improves. My money is on the significant delays caused by the Google Adsense and Amazon Associates code, and I can’t do a huge amount about that, at least not yet.
Next, I’ll look at something slightly different: custom fonts on the web page.
