⚡ Bolt: Remove unnecessary priority from below-fold images#55
⚡ Bolt: Remove unnecessary priority from below-fold images#55
Conversation
Removes the `priority` prop from `<Image />` components in Section 2 and Section 4 of the homepage. These sections are below the fold, and prioritizing their images causes them to compete with the Largest Contentful Paint (LCP) element (the hero image), potentially delaying LCP. Reverting to default lazy loading behavior for these images optimizes the loading sequence. Co-authored-by: anyulled <100741+anyulled@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Summary of ChangesHello @anyulled, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request aims to enhance the website's loading performance, specifically improving the Largest Contentful Paint (LCP). It achieves this by preventing non-critical, below-the-fold images from being preloaded with high priority, thereby allowing the primary LCP hero image to load without bandwidth contention. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughRemoved Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request correctly identifies and removes the priority prop from next/image components that are below the fold. This is an excellent performance optimization that will prevent these images from competing for bandwidth with the LCP element, likely improving page load times. The changes are clear and effective. I've just found a minor typo in the documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
components/sections/home8/section2.tsx (1)
16-16: LGTM — correct removal ofpriorityfrom a below-fold background image.Same optional improvement applies here as in
section4.tsx: addsizes="100vw"to ensure the browser selects the right srcset entry for this full-width background.♻️ Suggested improvement
-<Image src="/assets/img/bg/header-bg20.png" alt="Background Texture" fill style={{ objectFit: "cover" }} /> +<Image src="/assets/img/bg/header-bg20.png" alt="Background Texture" fill style={{ objectFit: "cover" }} sizes="100vw" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/sections/home8/section2.tsx` at line 16, Add sizes="100vw" to the background Image element in section2.tsx so the browser picks the correct srcset for this full-width background; locate the Image JSX (the tag with src="/assets/img/bg/header-bg20.png" and alt="Background Texture") and add the sizes prop with value "100vw" while keeping the existing fill and style attributes.components/sections/home8/section4.tsx (1)
25-25: Correct removal ofpriorityfrom a below-fold decorative image.The change is intentional and accurate —
priority(which injects a<link rel="preload">) should be reserved for the LCP element.Optional: both
fillImages in the codebase are missing asizesprop. Thesizesattribute is essential when using thefilllayout, as it tells the browser which image size to load based on screen resolution — without it, the browser may download a larger image than necessary, leading to longer load times and higher data usage. For a full-viewport overlay likelayer1.png,sizes="100vw"is the appropriate value.♻️ Suggested improvement
-<Image src="/assets/img/elements/layer1.png" className="layer1" alt="" fill /> +<Image src="/assets/img/elements/layer1.png" className="layer1" alt="" fill sizes="100vw" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/sections/home8/section4.tsx` at line 25, The decorative Image usage (Image with fill) removed priority correctly, but you should add a sizes attribute to avoid over-downloading; update the Image element (the one rendering layer1.png) to include sizes="100vw" when using fill and check other components using Image with fill to add appropriate sizes values so the browser selects the correct image size.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/sections/home8/section2.tsx`:
- Line 16: Add sizes="100vw" to the background Image element in section2.tsx so
the browser picks the correct srcset for this full-width background; locate the
Image JSX (the tag with src="/assets/img/bg/header-bg20.png" and alt="Background
Texture") and add the sizes prop with value "100vw" while keeping the existing
fill and style attributes.
In `@components/sections/home8/section4.tsx`:
- Line 25: The decorative Image usage (Image with fill) removed priority
correctly, but you should add a sizes attribute to avoid over-downloading;
update the Image element (the one rendering layer1.png) to include sizes="100vw"
when using fill and check other components using Image with fill to add
appropriate sizes values so the browser selects the correct image size.
Removes the `priority` prop from `<Image />` components in Section 2 and Section 4 of the homepage. These sections are below the fold, and prioritizing their images causes them to compete with the Largest Contentful Paint (LCP) element (the hero image), potentially delaying LCP. Reverting to default lazy loading behavior for these images optimizes the loading sequence. Also fixes a broken Cypress test in `home-editions.cy.ts` which was asserting the existence of `h5` elements that are no longer present in the hero component. Co-authored-by: anyulled <100741+anyulled@users.noreply.github.com>
1 participant
💡 What: Removed
priorityprop fromImagecomponents inSection2(Stats) andSection4(Sponsors) of the homepage.🎯 Why: These images are below the fold but were being preloaded, stealing bandwidth from the critical LCP hero image. This is a performance anti-pattern.
📊 Impact: Expected to improve Largest Contentful Paint (LCP) by allowing the hero image to load without contention. Verified that
fetchpriority="high"is no longer present on these images.🔬 Measurement: Verified using a Playwright script that inspects the
fetchpriorityattribute on the rendered images.PR created automatically by Jules for task 14995694283834052529 started by @anyulled
Summary by CodeRabbit
Documentation
Bug Fixes
Tests