Fix LCP request discovery by optimizing initial blog image loading #7147
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Update the Card component to accept loading and fetchpriority props. Apply eager loading and high fetch priority to the first post in both Blog-grid and Blog-list sections to improve rendering performance. Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Contributor
|
🚀 Preview for commit 0669d28 at: https://6923910d3100b6bfa775b4be--layer5.netlify.app |
Member
|
Thank you, @Fireentity. I wonder if you have a sense of the before and after in terms of LCP the blog list / grid page. I recognize this can be hard to assess given that the lighthouseci workflow only executes on merged code. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses the "LCP request discovery" performance issue flagged in #6930 regarding the blog page. I updated the Card component to accept dynamic loading properties and modified the blog list and grid views to explicitly set loading="eager" and fetchpriority="high" for the first post's image. This ensures the Largest Contentful Paint element is prioritized and not lazy-loaded, significantly improving the page's initial render metrics while maintaining lazy loading for subsequent images.
This PR fixes #6930
Notes for Reviewers
Signed commits