Easier Lazy Loading (for Chrome)

So, Chome 76 (or later. But what version of Chrome am I running anyway?) is getting a feature that would have saved me at least a little work on a few client projects. That is, it’s making lazy-loading of images and iframes as easy as:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

What’s lazy loading? As you might have guessed from the name alone, it’s when a browser that’s not currently showing an image (in the “viewport”, or part of a page it’s showing) doesn’t actually download that image. This means that if you’re on a slow connection, you’ll load each image as you need to see it, rather than it just seeming to take forever to load the page initially. It’s generally regarded as a best practice, but it’s never been easy.

Previously, to add lazy loading of images to a page you’d have to go through and change out the page markup and then load in the img attributes later with some JavaScript. If (or when) this Chrome behavior becomes a standard used on all major browsers, then you’ll just have to add this loading="lazy" line to each image (or iframe) you want lazy loaded.

The “if” I said above it my one source of hesitation here. I don’t know a lot about what the standards bodies internal functioning is, or if this is the standard way that a web standard eventually gets approved. But my (unfounded) nervousness about Google making the HTML that supports them (vs the open web) is the only reason this is anything but unalloyed *great* news to me.

Add a Comment

Your email address will not be published.