Google’s rolling out a new update to Chrome (Chrome76) that allows native support for lazy-loading.

What is Lazy Loading?

Also known as “on-demand loading”, lazy loading is a technique for optimising online content. It optimises the content loading  by only loading the content in the viewed section of the page, and saving the rest of the on-page elements until the user scrolls to another part of the page. 

You can see this in action on Google Image search results, when the first few image results load in their entirety, but the rest of them load as simple colour blocks – only to load properly once you scroll down to them.

So if I can already see it, why should I care that Chrome is going to make it happen at the “Browser Level”?

An astute observation, dear reader. Without getting too technical (go here if you want the nitty gritty detail), support at the browser-level now means that you can lazy-load resources on a page without the need to write custom lazy-loading code or use a separate JavaScript library.

The end result of all this is faster page load speed, less bandwidth use and reduced memory usage on peoples’ devices.

Below is an image of how the new browser-level lazy loading will look, courtesy of the fine folks over at Search Engine Journal.

As you can see, the little highlighted pieces of code are hardly complex, and anyone with a rudimentary understanding of HTML should be able to implement it easily. 

The following attributes are available in the new Chrome update:

Auto: This is the browser’s default lazy-loading behaviour – which is to say, not having it lazy load at all.

Lazy: As seen in the image above, this attribute defers loading the resource until it reaches a calculated distance from the viewport (the section of the page that’s displayed on the users’ screen).

Eager: This attribute loads the resource immediately, regardless of where it’s located on the page or the users’ viewport.

Cool story, but why should I care?

In short, lazy loading, which previously required some relatively in-depth development expertise, is now a lot easier to implement, and will make it simpler for webmasters to ensure that their websites load as quickly as possible for users. 

So, go forth and optimise!