I reduced this PLP’s LCP by nearly 3s just by replacing the JS animation with CSS animation (and removing the CSS that initially hid the components until the JS was ready):
This site was using a JS library to create multiple elegant animations as the page loads. It looks really nice, but it was loading really slowly…
Because relying on JS for these animations means the JS first has to download, which might have to wait for other JS to download first, then process, which might have to wait for other JS to process first, before it can “reveal” the content.
By switching to CSS, which is ready as soon as the page is ready to render (as soon as the DOM and CSSOM are ready, no processing or waiting to process), the content can be revealed to the user much, much sooner. In this case, nearly 3s sooner.
Which user experience would you prefer?
#NoLoJS FTW.
Happy CSSing,
Atg