PageSpeed calibration problem with Google AMP [amp-img]?

387 Views Asked by At

Google PageSpeed penalty "Defer offscreen images" since adopting Google AMP (amp-img). It seems that PageSpeed encourages AMP to load ALL images! Prior to AMP I used JS to LazyLoad images located beyond the initial viewport. I'm open to suggestions on how to retain AMP but avoid the PageSpeed penalty.

Example: (the code for this image sits below the initial viewport, near the bottom of the page)

::: Top area of page - initial viewport area ::: … "The fold" off-page, below fold, near bottom page on 2nd page of viewport

When rated on PageSpeed, despite this image being off-page the AMP runtime does not defer load and results in a penalty score!

(Code removed since the StackOverflow editor refused to allow it!)

Since AMP prohibits my old JS LazyLoad technique, I am at the mercy of this stated AMP behaviour: "The runtime may choose to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors." (https://amp.dev/documentation/components/amp-img?format=websites) So it seems that by adopting AMP I have relinquished control over lazy load to Google AMP's runtime, which "may" choose to delay. When PageSpeed rates an AMP page, you'd think AMP runtime would want to impress, right? You'd think AMP runtime WOULD "choose to delay" (amp-img) content appearing off-page (not within the initial viewport area). You'd be wrong.

The PageSpeed penalty message is as follows:

"Defer offscreen images. Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive"

I love AMP, but is there an opportunity for the guys at PageSpeed to collaborate with the guys over at AMP? I agree with PageSpeeds description of this situation, calling it an "Opportunity". Sadly when I adopted AMP I seem to have handed over this "opportunity" to AMP runtime...and am penalized for doing so.

Can anyone provide a pragmatic workaround, so that I can retain AMP but not get penalized on PageSpeed when using (amp-img) for images positioned beyond the initial viewport?

0

There are 0 best solutions below