search

vtex / faststore

Digital commerce toolkit for frontend developers
https://faststore.dev
MIT License
189 stars 60 forks source link

chore: add priority to the first product's image on PLP #2293

Closed lariciamota closed 5 months ago

lariciamota commented 5 months ago

What's the purpose of this pull request?

Add priority to the 1st product's image on a PLP. It was motivated by a store that was having the performance score penalized on lighthouse because its LCP was the first product on the PLP. We haven't had found this issue before because our starter has a hero image on PLP (that already has the priority set).

How it works?

On the ProductGrid component we send the loading prop as eager through the ProductCard component when it's the first product, then on the Image component the priority will be added.

How to test it?

  1. Run yarn dev and go to http://localhost:3000/technology
  2. Inspect the page and check that only the first product's image has the priority set as high:
    First product Other product
    Screenshot 2024-04-25 at 16 33 35 Screenshot 2024-04-25 at 16 34 14

Comparison

I've compared the LH scores from starter and newstore to check if this change had impacted. To be fair, I updated those stores to the latest version of faststore core (3.0.42) to get the "before" value and updated to this PR version of faststore core (codesandbox) to get the "after" value. Both stores increased 2 points of Performance:

Before After
newstore-before newstore-after
starter-before starter-after

References

vercel[bot] commented 5 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
faststore-site ✅ Ready (Inspect) Visit Preview Apr 25, 2024 7:36pm
codesandbox-ci[bot] commented 5 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.