Lighthouse, the open-source web tool, currently powers PageSpeed Insights and comes with two new audits. At its latest version, 8.4.0, the web tool helps publishers find issues with the Largest Contentful Paint metric.
It is to increase web performances, find widespread problems, and PageSpeed Insights Updates to Lighthouse 8.4 helps improve LCP.
See also: Google PageSpeed Scores | New Lighthouse 8.0 Update
Contents
Largest Contentful Paint
The recently launched version comes into play when looking for issues with the Largest Contentful paint. This means it can spot anything from lazy loading images or slow mobile web responses to help better ranks.
The troubleshooting assists in developing the idea that lazy loading images are of use to read other parts of the content. Hence, users can still possess engagement with the web app until the images load, preferably from mobile devices.
Before the upgrade, images below the fold were as background downloads as users access the web page. Hence, it took a toll on the website’s interactivity, and the loading of the page slowed down. It increased the time taken to provide the screen material in the visible section browser area.
However, with the update, you can add a Lazy Load HTML tag to images, marking them for Lazy load. Hence, the page content takes less time to download.
Impact on Webpages
Though the update should do good, lazy loading images in WordPress 5.4 created issues while loading the feature image. A significant increase can be seen when a lazy load tag is attached to all images.
But, WordPress adding the tag to feature images meant the loss of the crucial element of the web page. It eventually leads to viewers passing up on the webpage as a featured image is not visible. Hence, Largest Contentful Paint came out as a seemingly unsatisfactory upgrade.
Nevertheless, the lazy load tag has its benefits that surpass the demerits of its usage. Still, Google saw that the ratings for the Lowest Contentful Paint were declining. Sites that used too many lazy load images suffered from low LCP ratings.
The problem was a WordPress-only issue, and hence Google determined: “…the lazy-loading technique used by WordPress very clearly helps reduce image bytes but at the cost of a delayed LCP.”
PageSpeed Insights Updates to Lighthouse 8.4
The entire fiasco is leading to a decrease in the Largest Contentful Paint ratings. Lighthouse can contradict this by using a new audit. It helps diagnose and manage issues on a widespread scale.
The update dictates that the first pictures for the Largest Contentful Paint viewport should not be lazy-load. However, if lazyload elements exist in the visitor’s view of the website, Lighthouse 8.4.0 will help detect them.
The official Lighthouse 8.4.0 developer page stated, “Lighthouse will now detect if the Largest Contentful Paint (LCP) element was a lazy-loaded image and recommend removing the loading attribute from it.”
It continues: “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.”
A Similar Audit for Mobile Devices
The PageSpeed Insights Updates to Lighthouse 8.4 also helps detect if the mobile viewport meta tag is not there in the head section. The absence of the tag can further affect the First Input Delay score.
The audit release also explained: “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 if none is found.
You can get the latest Lighthouse’s version and audits from Chrome Dev tools, beginning from October 19, 2021.