GoogleChrome / GoogleChrome/lighthouse

Detect lazy-loaded LCP image performed using a JS library (instead of native lazy loading)

Open
#15,636 13 comments 0 reactions 1 assignee Claimed by @paulirish View on GitHub
P2
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

**Feature request summary**

LCP images that are lazy-loaded using a JavaScript library are not detected, and this is a large percentage of the total population of lazy-loaded LCP images - around half:
https://almanac.httparchive.org/en/2021/performance#fig-20
https://almanac.httparchive.org/en/2022/performance#lcp-lazy-loading
https://calendar.perfplanet.com/2022/lazy-loading-lcp-images-why-does-this-anti-pattern-happen/

I think most of the above queries checked for a class name containing the string "lazy". Some might have looked for a `data-src` attribute.

The numbers might be higher. We use a different query string for Shopify since we have something like 80% of our shops using this antipattern and around 70-95% are using JS libraries:

```sql
COUNTIF(REGEXP_CONTAINS(snippet, r'loading="lazy"|lazyload|data-src|swiper-lazy|data-rimg|data-lazy')) AS `Lazy loaded`
```

**What is the motivation or use case for changing this?**
The advice is a bit aggressive at promoting adding lazy loading but does not catch probably half the cases where lazy loading went too far. If we could balance the "add lazy loading" advice with better detection of poorly lazy loaded practices, then that would help.

We've done some work on the Shopify platform to help theme devs make the right decisions, but they are still using Lighthouse which can be problematic. For example, with card lists - to not accidentally lazy load on desktop, they need to eager load potentially the first 6-9 cards, for example. However, when stacked in a mobile viewport, those eager loaded images are now more than the px threshold for suggesting to lazy load below-the-fold. So they end up lazy loading them and if they are using lazysizes, Lighthouse never detects that the LCP was lazy loaded.

**How is this beneficial to Lighthouse?**
Making the audits more accurate and not encouraging potentially more harmful changes (lazy loading above the fold) in favor of trying to accommodate the "lazy load below the fold" audit. We still have a long way to go in educating developers to not lazy load above the fold. This impacts performance across the entire web.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.