PageSpeed Insights Updates to Lighthouse 8.4 – Helps Improve LCP via @sejournal, @martinibuster

PageSpeed Insights now uses Lighthouse 8.4.0 which features two brand new audits. The most important addition helps publishers diagnose a widespread problem that negatively impacts the Largest Contentful Paint metric. This new audit will help publishers achieve better Largest Contentful Paint (LCP) scores.

Largest Contentful Paint

There has been a longtime issue with Largest Contentful Paint (LCP) that the newest version of Lighthouse, 8.4.0 will help diagnose.

It was discovered that lazy loading images was a good approach for making the main main part of the content visible and interactive on a mobile device faster.

Previous to lazy loading the images that were below the fold (not visible in the browser screen viewport) would download in the background.

That had the effect of slowing down the visibility and interactivity of the content that was in the site visitor’s viewport.

When images that are outside of the mobile viewport load in the background they actually slow down the rendering of the visible part of the web page.

By adding the Lazy Load HTML attribute to images the browser would know to not download the images (that are outside of the viewport) until later.

This has the effect of increasing the Page Speed.

But lazy loading elements that are in the Largest Contentful Paint viewport has a negative effect and this is one of the things that Lighthouse 8.4.0 addresses.

Negative Impact of Lazy Loading All Images

WordPress 5.4 introduced native lazy loading of images. Before implementing the change the developers tested the speed improvements and discovered that adding the lazy load HTML attribute to all images resulted in a speed gain.

However that was an imperfect implementation of the lazy load attribute because WordPress was now adding the lazy load attribute to the featured image which is an element that is generally in a site visitor’s viewport when visiting a web page.

That added a negative impact to the Largest Contentful Paint (LCP) metric and introduced a slight negative user experience.

The gains from adding lazy load outpaced the losses from the hit to the LCP metric, so WordPress proceeded with this.

Google however noticed that after implementation of lazy loading in the WordPress core that the Lowest Contentful Paint (LCP) scores started dropping a little bit.

In an article that Google published on Web.dev about the performance effect of too much lazy loading, they researched the data of actual websites and discovered that sites with too much lazy loading suffered from poor LCP scores.

They discovered that aggressive lazy loading implementations was the reason and they learned that this was an issue specific to WordPress sites.

Google confirmed that WordPress scores for LCP were indeed dropping.

The authors concluded:

“…the lazy-loading technique used by WordPress very clearly helps reduce image bytes but at the cost of a delayed LCP.”

Lighthouse 8.4.0 Adds LCP Lazy Load Audit

Publishers may have seen their Largest Contentful Paint (LCP) scores dropping and not understand why they were getting worse. Lighthouse 8.4.0 solves this issue by adding an audit specifically for diagnosing this problem.

All images in the Largest Contentful Paint viewport, the part of the web page that a visitor sees first, should not be lazy loaded.

Lighthouse 8.4.0 will detect if there are any elements in the LCP viewport that are lazy loaded.

A Chrome Developer page describes how Lighthouse 8.4.0 works:

“Lighthouse will now detect if the Largest Contentful Paint (LCP) element was a lazy-loaded image and recommend removing the loading attribute from it.”

The official Lighthouse 8.4.0 developer page describes the new functionality:

Advertisement

“Detect when the LCP element is lazy-loaded. Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint.”

New Mobile Viewport Audit

Lighthouse 8.4.0 will also add a new audit that detects if no mobile viewport meta tag in the head section.

This is important because failure to add this meta tag can result in a lower First Input Delay score.

The documentation explains the importance of this new audit:

“In a recent study of data from the HTTP Archive, over half of the sites that received a score of 90 or higher in Lighthouse, but failed at least one Core Web Vital, did not have a mobile viewport set and were failing FID. As a result, the Lighthouse performance section will now recommend adding a viewport like the following if none is found:

<meta name="viewport" content="width=device-width">"

Lighthouse 8.4.0 is Live

Lighthouse 8.4.0 is now live in PageSpeed Insights and will trigger the new LCP warning if it finds a lazy loaded element in the Largest Contentful Paint viewport.

Chrome Dev Tools will feature Lighthouse 8.4.0 in Chrome 95, which is currently scheduled for release on October 19, 2021.

Citations

Read the Chrome Developer Page for Lighthouse 8.4.0

What’s new in Lighthouse 8.4

The Performance Effects of Too Much Lazy-Loading

Lighthouse v8.4 GitHub Page

Searchenginejournal.com

Keep an eye on what we are doing

Be the first to get latest updates and exclusive content straight to your email inbox.

We promise not to spam you. You can unsubscribe at any time.

Invalid email address

Thanks for subscribing!