Amphtml: Lighthouse audit warns to defer offscreen images on AMP pages

[westonruter]

What's the issue?

A couple times now I've received reports that the Lighthouse performance audit is identifying “Defer offscreen images” as an opportunity for improvement… on AMP pages. The heuristic being used for lazy-loading images in Lighthouse is not matching up with AMP's lazy-loading implementation. These are AMP pages that are using amp-img.

Examples:

• https://www.ourtasteforlife.com/pink-beach-in-labuan-bajo/amp/
• https://elsoberano.org/ (an AMP-first site)

In the first case:

And in the second case:

In both cases, the images being reported as needing to be deferred are within 3 viewport heights from the top of the page. I recall that amp-img aggressively fetches images when they get within 3 viewports but heavier components like amp-youtube fetch within 1 viewport.

In any case, should the Lighthouse audit should be relaxed? Or should amp-img be more strict?

How do we reproduce the issue?

Run a Lighthouse performance audit on an AMP page that contains an amp-img in the second or third viewport from the top of the page.

What browsers are affected?

Lighthouse

[morsssss]

It would be really excellent to make sure AMP is consistent with Lighthouse! Or at least try to find out what Lighthouse's criteria are.

[westonruter]

cc @egsweeny

[dkhan11]

Any update on this? after investing tons of efforts in google AMP, our SEO is at its lowest level due to incorrect page rank. BTW - there is the same problem with loading fonts.

[westonruter]

I synced with the Lighthouse team last week about this. It appears to be a bug with the Lighthouse audit, but they are going to investigate.

[morsssss]

@dkhan11 , you do know that AMP isn't a ranking factor in Google Search?

Of course, speed is a ranking factor, so but hopefully you're investing in AMP because you want an improved user experience? 😎

[dkhan11]

@dkhan11 , you do know that AMP isn't a ranking factor in Google Search?

Of course, speed is a ranking factor, so but hopefully you're investing in AMP because you want an improved user experience? 😎

Hi @morsssss and thanks for the response,
Yes - we are aware of it. But we had high hopes that building our service ONLY with AMP will provide great user experience and high performance as well.

[morsssss]

Very good!

I'd be interested in hearing more about your experience, but off this bug thread.

[dkhan11]

Very good!

I'd be interested in hearing more about your experience, but off this bug thread.

I would love to. Feel free to contact me at [email protected] or let me know how to reach you.

[Andy9822]

Any news about it?
Maybe the incomig Lighthouse v6 will deal better with that?

[nainar]

@kristoferbaxter we should make sure that Lighthouse and AMP have a similar lazy loading strategy here.

[kristoferbaxter]

@addyosmani Who should we work with on Lighthouse for this?

[addyosmani]

@brendankenny would you have time to take a closer look here? :)

[nazmul1705]

@westonruter can you follow up on this? I am also getting same problem with all my websites. It will be really helpful if this bug get fixed :)

Trailers For Sale

Anvil Cargo Trailers For Sale

Diamond Cargo Trailers For Sale

Trailer Finance

You can see all of my websites are using AMP plugin and doing great! just need to solve this problem

https://www.screencast.com/t/RhQ1q7m0

Thanks
Nazmul

[brendankenny]

@brendankenny would you have time to take a closer look here? :)

Lighthouse's one (+ a little) viewport threshold was decided long ago and we can revisit the decision. I'll bring it up in today's eng meeting.

Is there any background on amp-img's three viewport threshold by any chance? I assume this fundamentally comes down to user behavior/expectations?

For those worried about the decision affecting Lighthouse scores, note that the relationship is the opposite. The Lighthouse performance score comes purely from the loading metrics, and these "opportunities" are suggestions for possible ways to improve those metrics. If it doesn't seem worth it to change a bunch of stuff to save a possible 0.15 seconds on TTI, the advice can safely be ignored.

That said, Lighthouse should provide useful advice so it isn't just noise that should be ignored, so we'll discuss :)

[morsssss]

@brendankenny a few years ago, I gave companies advice like this all the time - that sometimes PageSpeed Insights gave them suggestions that they couldn't possibly act on, and they could simply ignore those suggestions. But people really wanted to get great scores on PageSpeed Insights, so they were upset when their score got docked for a matter beyond their control.

I no longer work with companies on speeding up their sites, but I imagine the argument is still the same.``

[brendankenny]

@morsssss absolutely, and one of the reasons that Lighthouse attempts to be built around a set of scored metrics with advice to improve rather than a set of scored advice like the old PSI :)

Agreed, though, that it can still be difficult for folks to not feel like an orange "you could save 0.6s" isn't docking their score (even more so if it's your boss looking at a Lighthouse report for the first time). We'll try to find a good middle ground.

[brendankenny]

We've decided to move Lighthouse to the same three viewport threshold. It seems more reasonable than a single viewport, so it makes sense to switch, but it also still seems somewhat arbitrary, so we'd love it if there's any background on how it was chosen :)

Lighthouse tracking issue: https://github.com/GoogleChrome/lighthouse/issues/10471