Remind me?
In a previous post we mentioned what Cumulative Layout Shift (CLS) is and why we should care about it. Have a read… Core Web Vitals - Cumulative Layout Shift (Part 1)
A visual example would help
Here we have an example that will demonstrate what Cumulative Layout Shift (CLS) is. In this example we have emulated a website loading a picture over a very slow connection. All I am doing here is swapping out a picture with another picture (the red box is a 1 pixel by 1 pixel red image) but it demonstrates CLS.
You will notice the Lorem Ipsum on the left-hand column shifts down once the picture has loaded. You could have started to read it but, without warning, it moves. This does not happen on the right-hand column.
What is the difference between the two images? If you understand what CLS is then you might have guessed.
Is it just images?
This is not limited to images taking a while to load. It can apply to any content you are embedding in your website. Here are a few examples that are nothing to do with images – no names to protect the guilty!
- A certain website I go to displays a menu but after it has loaded it displays a bell icon. It also displays my name as I have signed in… a few moments after loading the page moving the rest of the menu. It isn’t a big deal but if I was quick, I could end up clicking on a sports page rather than the weather page I was trying to click on. I then end up very confused and wondering if I need more, or less, coffee.
- The website of a major computer manufacturer that I occasionally find myself on (I’ve been thinking about upgrading my laptop for a year or so now but I can’t make up my mind!) allows you to click on a button to see support documents. When you click on it you are taken to the bottom of the page as that is where the support documents are. However, just above this is a review section. The review section then detects that you have scrolled to it and then loads the customer reviews in. The support documents section you wanted to look at has been pushed off the screen. That totally baffled me the first time it did it. I had to scroll back to the top of the page and click support documents again to find it. Not a nice user experience.
- My car does it. This infuriates me. Like many modern cars it has a matrix display. This always displays the total mileage no matter what other information it is displaying. However, if the car thinks you should change up a gear it displays a little icon because environment. To separate these two pieces of information, it puts a one pixel line between the mileage and the icon. This moves the total mileage along one pixel. So annoying. WHY?
How do we fix it?
Well, in the case of my car, the developers could just allocate a bit of space where the change up icon lives and that way the total mileage wouldn’t get shifted around.
It is the same for a website too. If you know that you are going to display an image… say how big it is going to be before it is even loaded. Elements will then be where you wanted them to be. Google will like it too. I might stop wondering if I fell asleep for just a moment.
What’s the difference between those images you mentioned?
If you are in the know you can view the source of the example above to verify this.
The left-hand image has HTML that says:
<img src="ferret-photo.png" alt="Ferret "/>
And right-hand image says:
<img src="ferret-photo.png" alt="Ferret" height="250" width="250" />
Comparing the two and extracting the differences, the right-hand image has these extras:
height="250" width="250"
This is just simply a height and width attribute for the image. All that does is tell the browser to reserve a space 250 (pixels) by 250 (pixels) for us to load our image into. Then whether the image loads successfully or not the text below does not move. This simple step improves our CLS score.
A technical solution
As we are in total control of our CMS we can do something to help you…
When we render the HTML on our servers, we can intercept the HTML and modify it before we send it on to your visitor’s browser.
This is what we do:
- If you have set the height and width attributes of the image yourself then we do nothing as this would undo your hard work
- If you have applied any height and width styles to the image itself, we extract the height and width as pixels and put the values in the height and width attributes
- If we haven’t found any of this, we can look at the actual image file on the server and insert its actual height and width.
All this takes very little time and with clever page caching actually won’t need to be evaluated very often anyway.
It’s a silver bullet!
It is but with a bit of a caveat.
This only applies to images (within an <img> tag). It only applies to images that have a width and height. For example, scalable vector graphics (SVG) do not have a specific height and width that we can easily extract out of the file. This does not apply to embedded iframes that load reviews for example.
Even applying to just images that we can extract the height and width from isn’t 100% perfect. We (and you) will need to go through every sort of page on your website to ensure that it still looks right. Check your news lists, your news items, etc. It should be okay but it is always worth checking.
Conclusion
If you want to apply this to your website that we host, send us a support request and we’ll discuss implementing it with you.
We are always researching ways of improving your website (and ours) and sometimes we come up with clever little snippets that for little effort give a big reward. Keep checking back to see what else we have come up with.
Get in touch