Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Apr 26, 2024

Conversation

lariciamota
Copy link
Contributor

@lariciamota lariciamota commented Apr 25, 2024

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

@lariciamota lariciamota self-assigned this Apr 25, 2024
Copy link

vercel bot commented Apr 25, 2024

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

Copy link

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.

@@ -629,6 +629,18 @@ export type StoreAggregateRating = {
reviewCount: Scalars['Int']['output']
}

/** Attribute of a given product. */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those changes were made when I run yarn dev, not sure why it wasn't already on main

@lariciamota lariciamota marked this pull request as ready for review April 26, 2024 12:00
@lariciamota lariciamota requested a review from a team as a code owner April 26, 2024 12:00
@lariciamota lariciamota requested review from emersonlaurentino and lucasfp13 and removed request for a team April 26, 2024 12:00
Copy link
Contributor

@hellofanny hellofanny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 🚀

@lariciamota lariciamota merged commit 60fdcd3 into main Apr 26, 2024
7 checks passed
@lariciamota lariciamota deleted the chore/plp-priority-lcp branch April 26, 2024 18:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants