Add SSR styling to reduce LCP for amp-base-carousel
by showing first slide at first paint
#36070
Labels
amp-base-carousel
by showing first slide at first paint
#36070
Description
When using
amp-base-carousel
, the contents are hidden until the custom element is built. This results in a negative impact on LCP. Depending on the configuration of theamp-base-carousel
, what if it could be SSR'ed so that the initial slide were displayed even prior to the element being built? This would greatly reduce LCP by allowing the first slide to be rendered with the initial paint of the page. It would also ensure that the first slide would render even when JavaScript is turned off or theamp-base-carousel
script fails to download.Consider this example: https://amp-base-carousel-ssr-styling.glitch.me/
Here's a video showing the page loading without throttling a few times, then a few times on fast 3G, and then a few times on slow 3G:
amp-base-carousel-ssr-styling.mov
The styling here applied is:
The specific styling would surely need to be tailored to how the
amp-base-carousel
is configured.The styling here is overriding these rules:
amphtml/css/ampshared.css
Lines 284 to 290 in bdfdcd0
amphtml/css/ampshared.css
Lines 269 to 277 in bdfdcd0
amphtml/css/ampshared.css
Lines 304 to 310 in bdfdcd0
amphtml/css/ampshared.css
Lines 284 to 290 in bdfdcd0
amphtml/extensions/amp-base-carousel/1.0/amp-base-carousel.css
Lines 12 to 17 in bdfdcd0
Such SSR styling would likely apply to other similar components, including
amp-image-slider
.Alternatives Considered
n/a
Additional Context
No response
The text was updated successfully, but these errors were encountered: