⚡ Bolt: [performance improvement] conditionally optimize LCP images in ProjectsView - #187
⚡ Bolt: [performance improvement] conditionally optimize LCP images in ProjectsView#187fysp11 wants to merge 1 commit into
Conversation
- Replaces unsupported Astro `<Image>` tags inside React components with standard `<img>` elements. - Pre-computes WebP optimized image paths at build time in `index.astro` using `getImage` and `import.meta.glob`, passing optimized paths down to React. - Conditionally applies `loading="eager"` and `fetchPriority="high"` only to above-the-fold images to optimize LCP without causing network contention for lazy-loaded content. Co-authored-by: fysp11 <13081700+fysp11@users.noreply.github.com>
|
👋 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. |
Preview deployments for fysp11.github.io ⚡️
Commit: Deployment ID: Static site name: |
1 participant
💡 What: The
ProjectsView.tsxcomponent was incorrectly using Astro's built-in<Image>component, which is unsupported inside React components. We replaced it with standard HTML<img>elements, pre-computed optimized WebP paths at the server level inindex.astro, and conditionally appliedloading="eager"/fetchPriority="high"only to the first two above-the-fold images while lazily loading the rest.🎯 Why: Rendering unoptimized images or improperly applying eager loading attributes to large, unbounded lists degrades page load speed (Largest Contentful Paint) and causes network waterfall contention. By computing optimizations at build time and conditionally eager loading critical assets, we substantially improve initial paint times.
📊 Impact: Expect a noticeable improvement to LCP score and reduced network bandwidth usage for off-screen images.
🔬 Measurement: Verify by running the application (
pnpm run build), opening the network tab, and ensuring that initial viewport images load optimally while below-the-fold images wait to be fetched until they enter the viewport.PR created automatically by Jules for task 6495021936313522973 started by @fysp11