amp.dev icon indicating copy to clipboard operation
amp.dev copied to clipboard
verified publisher icon ampproject

Change the first viewport images in amp.dev to improve LCP

Open nainar opened this issue 5 years ago • 5 comments

Can we remove the animated images as a short term solution?

@matthiasrohmer @kevinkimball @kristoferbaxter

nainar avatar Oct 14 '20 17:10 nainar

My impression from the profiling that I did on the page is the issue is not the animation but the number of images within the first viewport. But yes, I think if you are ok to remove them entirely that should improve LCP. I can profile it and see

kevinkimball avatar Oct 14 '20 18:10 kevinkimball

  1. If these images are converted to avif format, they drop by a significant size. https://amp.dev/static/img/case-band-image-2.jpg?width=330&hash=33e5e2d61e897ee4dc33b6f74f25fdb7207681f9 => from 15kB to 7kB

  2. With native image support coming soon, the CLS impact is highly reduced (there are two intents to implement in this space). If the AMP Optimizer wants to start making this change in-tandem with the AMP runtime... this would expedite the effort.

kristoferbaxter avatar Oct 14 '20 19:10 kristoferbaxter

We reduced the image count by two with https://github.com/ampproject/amp.dev/pull/4900 - that's not the golden shot yet but should improve things a little.

What I'd like to add to this discussion: I know that the amp.dev homepage should perform well for CWV - also because it is probably the benchmark for folks who think about using AMP and want to see how it performs.

On the other hand the homepage is also the page that sells AMP to potential users who are not that technically versed but judge products by their looks/design. Not saying that this job is necessarily done by the currently selected set of images - we are working with Alex to fix this end at the moment.

Which aspect is more important for you all?

matthiasrohmer avatar Oct 29 '20 15:10 matthiasrohmer

I believe we should be aiming for both, an expressive document that meets Core Web Vitals by using the best recommendations we have available.

This includes using modern image formats, with appropriate sizing.

kristoferbaxter avatar Oct 29 '20 15:10 kristoferbaxter

@matthiasrohmer @sebastianbenz

Couple things

  • thumbor doesn't support avif - can we add an early escape for /.avif$/ in the imageOptimizer logic? Or am I being naive?
  • are we wanting to vary a response to serve the image, or is native image support going to allow us to use <picture> and <source> with media attrs?

patrickkettner avatar Nov 30 '20 18:11 patrickkettner