GoogleInternet

New Chrome Feature is so exciting

On Thursday, Google Chrome, the most popular browser by a wide margin, began rolling out a feature that will block adson sites that engage in particularly annoying behavior, such as automatically playing sound, or displaying ads that can’t be dismissed until a certain amount of time has passed. Google is essentially blacklisting sites that violate specific guidelines, and then trying to filter all ads that appear on those sites, not just the particularly annoying ones.
Google informally announced a new feature coming to Chrome. It will allow lazy-loading images and iframes with an HTML attribute, no JavaScript required. It will improve the user experience, which is good for publishers and site visitors. But there is also a potential negative impact to ad revenues.

What is the Loading Attribute?

Native lazy-loading is a way to stop the loading of an image or iframe until the user scrolls close to them without using JavaScript. A publisher can enable this feature by the use of an HTML attribute to the “image” and “iframe” elements.

HTML Elements and Attributes

HTML element are the major components of a web page, like the image, a paragraph, and a link. That’s analogous to what an engine, a tire and a window is to a car.

An attribute are things that add more meaning to or modify those elements. Continuing with the car analogy, this could be comparable to the color of a fender, size of an engine, the air pressure specs of a tire.

The new “loading” attribute will provide a signal to browsers that an image or iframe is not to be loaded until the user scrolls close to the image or iframe. That makes the web page appear to load faster for the user. This will be especially useful for users on mobile devices.

How Does Native LazyLoad Work?

The loading attribute is a simple attribute that can be added to the image or iframe elements. A web browser will not download an image or iframe that has the loading attribute until the user scrolls near to it.

Here is the example for lazy loading an image that was given in the informal announcement:

<img src=”celebration.jpg” loading=”lazy” alt=”…” />

This is an example of the loading element in use for a video that is contained within an iframe:

<iframe src=”video-player.html” loading=”lazy”></iframe>

It’s easy to implement. Just add loading=”lazy” to the code and you’re done.

It will be even easier in WordPress should a plugin be created to add it to the image attachment screen. The option to add the loading attribute could be included as part of inserting an image.

When Will Chrome Feature the Loading Attribute?

A Google Chrome engineer informally announced that this feature may be arriving in Chrome 75. Chrome 75 is tentatively scheduled to be released on June 4, 2019.

 

Loading Attribute has Compatibility Issues

Search marketing expert Edward Lewis has been involved with web development and search marketing since around 1995.  He’s also a web standards expert whose opinion I have great respect for. So I asked him for his thoughts on the loading attribute.

He pointed out that there were serious compatibility issues with the printing function for printing out web pages.

“I work with a lot of HTML documents that are saved and/or printed. We would have to add logic to extend the functionality of the loading=”lazy” attribute so those Save/Print functions would work properly.”

Edward is right. The documentation on the loading attribute standard states:

Compatibility with features that expect the whole page to be loaded
Chrome features such as “Print” and “Save Page As” currently expect all elements on the page to be loaded before printing or saving the page. One way to mitigate this issue would be to automatically load in any deferred elements on the page when “Print” or “Save Page As” are clicked, then wait for everything to load before continuing, but that could introduce user-noticeable delay which might require some UX changes with those features.”

On whether this is a good way to handle lazy loading, Edward offered:

“I believe this is best handled via JavaScript. Adding another attribute to the images just increases the chances of error and now requires designers to make changes.”

 

Leave a Reply