Native lazy loading comes in Chrome

From version 75, Chrome will support the so-called “lazy-loading” natively. That announces Addy Osmani, one of the leading developers behind the browser in his blog. Currently, however, is still the version 73.

As a result, Chrome is expected to support subordinate loading of images and iframes that have been assigned a specific HTML tag as of June 2019, namely:

					
						...
					
				

It showsloading = "lazy"the browser that this image can be subordinately loaded. So it’s worth adding this value for all images on a page from now on.

It will certainly find a developer, which creates a WordPress plug-in for this, so that this process can be made retroactively and for all existing images by pressing a single button. As soon as we find it, we will provide the name of this plugin. If you have already found what you are looking for, you can also express that in the comments!

The same principle ofloading = "lazy"will also apply to the iframes of this world, so the html tags should look like this:

					
						
					
				

Well, why the whole thing?

A large number of websites often contain a large number of pictures, which are often not even optimized for on-screen presentation. As a result, all images taken together tend to consume more loading volume and time than the actual text-based content. Among other things, we wrote this post.

The crux of the whole is that many of these images are not in the visible area of the screen, but often only visible in the next scroll, as soon as you scroll down.

Thereforewouldthese initially invisible images are not loaded at first, as long as they are not visible. Loading the images just before they enter the visible screen area would be completely sufficient.

This problem should now with the introduction of the tag and attributeloading = "lazy"be resolved.

So far, it is common practice to load extra JavaScript just to limit the impact of off-screen images on page load times, and to delay the retrieval of these images until users come close to the images being loaded.

In his announcement, Addy Osmani shows very well what effect the use of lazy loading can have on page load time.

A visualization of the loading time of a page with 211 images.
A visualization of the loading time of a page with 211 images. The Lazy Loading version only loads 250 KB during the initial loading process. Other pictures are not retrieved until users continue to scroll down.

As a result, natively-delayed loading can help to ensure that all content that is in the top of the visible area is displayed much faster. Both theTotal charge timeas well as thatloading volumea website will be throughconsiderably reduced.

So that the pictures (and videos) but not only loaded, if they are already in the visible area, a thing that is rather annoying, are the with theloading = "lazy"Tagged images are already loaded in the background before they come into the visible area. Thus, the overall impression of a page remains unclouded in this regard.

Which image tags are supported?

For developers, it’s important to know that not just the vulgar onesand

Last but not least, that browser, theloading = "lazy"Do not support tag, just ignore it. That’s the beauty of HTML: unsupported attributes are simply ignored and do not hurt anyone.

Tasting is about studying

If you want to try the new feature today, you can do so by s / hechrome: // flagsinto the URL bar, and then “Enable lazy frame loading “such as “Enable lazy image loading“Activated. Then it’s time to restart the Chrome browser and off you go.


As an in-depth article and for more details on how to implement it in detail, it’s worth reading Addy Osmani’s review.

Post Image:DepositPhotos