A while back I decided to try out Lazy Loading for a project as the extra mark-up cost was insignificant in comparison to performance gains on certain pages. The best guide for me so far has been Lazy Loading Images and Video by Jeremy Wagner. If you're unfamiliar with Lazy Loading it's worth a read, but to focus on the HTML it uses the following mark-up.
Testing the Status Quo
Stoked with a new discovery and armed with bLazy by dinbror I introduced lazy loading with the NoScript fallback on the project. A few weeks after the launch dust had settled I figured it was a good time to start checking the results. Using Google Search Operators I went on the hunt for the images which were lazy loaded, and soon enough I started to get some interesting results…
There were also other weird outcomes, in some cases Google had decided not to index the real image at all and instead just the placeholder with the alt text, in another case where there were 6 images using lazy load the first one also indexed the placeholder with the alt text but the other 5 were indexed correctly. One thing is for certain, it's a mixed bag of results.
Anything which strays from this and we are in uncharted territory with both search engines and screen readers, even though it's for performance gain we're upsetting the natural state of things. Let’s forget SEO for a second, as stressed by the RNIB the alt attribute plays a vital role in accessibility too as it’s used to let screen readers know what’s in the picture, uncanny really as the alt attribute is also used by a search engine crawler for the exact same purpose. This was what niggled me initially with lazy loading, forum discussions were mixed so I thought I would bother John Mueller from Google and the RNIB on Twitter about it.
Alt text is extremely helpful for Google Images -- if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.— 🍌 John 🍌 (@JohnMu) September 4, 2018
The Lazy-Alt Theory
In the reply from John Mueller had said an interesting point, to
Using a lazy alt we can change this, still based on the great article by Jeremy Wagner we can use the lazy load success to change the alt attribute in the same way as the image source. By adding a new data-alt we can store the alt text for use on lazy load success. This would mean that the placeholder image has never had the wrong alt text which might of lead to the initial confusion.
To test the theory in the example below I’m using a lazy alt on success with bLazy. You’ll see I have changed the alt attribute of the placeholder to read “Lazy-Loading Placeholder.”, this is to easily distinguish between the placeholder and the real “Astronaut finds a Brussel sprout on the moon.” image for crawl testing and screen readers.
So, finally I get the error I was looking for … that said, it looks like the lazy alt did it's job!