Native Lazy Loading Arrives in Chrome Tomorrow

One attribute, from tomorrow

Chrome 76 is due tomorrow, and with it a small change to how pages load.

An image or an embedded frame, such as a map or a video, can carry one extra attribute in the page's code: loading="lazy". Chrome will then hold off fetching it until the visitor scrolls close to it.

Until now the same effect took a script, added by a plugin or a developer, with its own weight and its own ways to fail.

Now the browser does it itself. Used well, it lets the first screen of a long page arrive sooner. Used carelessly, it does the opposite.

What lazy loading means

A normal page asks for every image as soon as the browser reads it, including the ones at the very bottom that many visitors never reach.

All of those downloads compete for the same connection in the first seconds, often a slow one on a phone, while the visitor waits for the top of the page.

Lazy loading postpones the images further down until the visitor scrolls towards them. The first screen gets the connection to itself, and a visitor who leaves after a glance never downloads the rest at all.

Chrome starts fetching each lazy image some distance ahead, further on slower connections, so a visitor scrolling at a normal pace should rarely see a gap.

Where it helps most

• Long galleries of project or product photographs.
• Embedded maps in the footer or at the bottom of the contact page.
• Embedded videos, each bringing its own player and scripts.
• Blog listings with a picture beside every post.
• Rows of logos for brands, suppliers or associations near the footer.

The second is the quiet win. A map embedded in the footer of every page loads its scripts on every visit, for the many visitors who never scroll that far.

What it does not fix

Lazy loading postpones a download. It does not make it smaller.

A photograph uploaded at several times the size it is shown is just as heavy when it arrives, and a visitor who scrolls the whole gallery still downloads every one of them.

The attribute applies only to images and frames in the page itself. Background images set in the stylesheet, which is how many themes build their top sections, are untouched, and so are fonts, scripts and a slow server.

Never delay the first screen

This is the mistake to avoid, and it is easy to make by adding the attribute everywhere at once.

A normal image is requested the moment the browser reads its line in the page. A lazy one waits until the browser has worked out the layout and decided the image is near the screen.

For anything further down, that wait costs nothing. For the logo and the top photograph, it is pure delay, added to the part of the page every visitor sees first.

So the rule is simple: whatever appears without scrolling, on a phone or a desktop, loads normally. On most pages that means the logo and the first one or two images.

Browsers that ignore it

Browsers that do not recognise an attribute skip it, so adding it is harmless. For now that includes Safari, Firefox and Edge, whose visitors get the page exactly as they do today.

On many local business sites, Safari on iPhones brings a large share of visits. Treat the attribute as an improvement for Chrome visitors, not as a reason to skip resizing images, which helps everyone.

A worked example

A small winery with a tasting room had a long one-page site: a photograph of the vineyard at the top, the tasting room hours, thirty event photographs, two embedded videos and a map.

On a phone over mobile data, the hours took a long time to appear, because everything on the page was downloading at once.

The first attempt marked every image lazy. Tested in the beta of Chrome 76, the vineyard photograph arrived later than before, because the browser now waited to confirm it was on screen.

The second attempt left the vineyard photograph and the logo alone. The gallery, both videos and the map were marked lazy, and the gallery photographs, several thousand pixels wide, were resized.

The top of the page now loads on its own, with the hours beneath it, and the rest arrives as visitors scroll towards it.

Adding it to your site

The attribute goes on each image and embedded frame in the page's code. On a hand-built site, that is an edit to the templates.

On a WordPress site it is a theme change or a plugin's job, since WordPress itself does not add it. Galleries and page builders each produce their own code, and each needs checking.

If the site already uses a lazy-loading script, do not run both on the same image. Choose one, or let the script handle only the browsers that ignore the attribute.

And reserve space for each image, so the text below does not jump down the page when a photograph arrives.

Checking the result

PageSpeed Insights has an item called defer offscreen images, naming images below the first screen that could wait. Run it before and after.

Then open the page on a real phone over mobile data, watch the first screen arrive, and scroll quickly through any gallery to see whether the images keep up.

The counter-case

Lazy loading matters most on long pages with many images or embeds.

A short page with three photographs gains little, and a landing page that fits on one screen gains nothing. A site already using a well-built script need not rush to change it.

And no attribute rescues photographs five times too large, which is where most heavy pages start.

Where a page is long, though, lazy-load what lies below the first screen, and never what is in it.

This week

1. Resize oversized images before anything else.
2. List the images and embeds below the first screen.
3. Mark those lazy, and only those.
4. Leave the logo and top image loading normally.
5. Lazy-load maps and videos further down.
6. Remove any duplicate lazy-loading script.
7. Test the first screen on a real phone.

Step four is the one that decides whether this helps or hurts. Every other step saves weight; getting step four wrong adds delay to the one part of the page every visitor sees.

Why the oversized photographs come first is covered in a home page that weighs eight megabytes.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.