⚡ Bolt: [performance improvement] Pre-optimize Project images and Fix Astro Image in React - #162
Conversation
- Replace `astro:assets` `Image` component with standard `img` in React `ProjectsView.tsx` to prevent hydration issues and optimize payload. - Pre-process images in `index.astro` using `getImage` to generate WebP and specific resolutions (800x600 for grid, 80x80 for list). - Enhance image performance via `fetchPriority="high"`, `loading="eager"`, and `decoding="async"`. 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: Implemented build-time image optimization for the Projects list view and removed the unsupported Astro
Imagecomponent from the React codebase. Pre-processed images via Astro'sgetImagefunction and passed the optimized source URLs to standard Reactimgelements.🎯 Why: The Astro
<Image />component does not work as intended inside React.tsxfiles, breaking optimization and causing large payload downloads or hydration issues. Furthermore, images in the list view were loading unoptimized full-size versions.📊 Impact: Reduces overall image payload size significantly (especially on list view, by providing 80x80 WebP thumbnails instead of full-size assets). Improves LCP via eager loading and high fetch priority on above-the-fold assets.
🔬 Measurement: Verify network tab for smaller
.webpimage payloads and standard HTMLimgrendering inProjectsView.tsx. Runpnpm run checkto verify build succeeds.PR created automatically by Jules for task 4300573830478874479 started by @fysp11