⚡ Bolt: 최상단 SVG 이미지 LCP 성능 개선 - #114
Conversation
|
👋 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. |
|
Warning Review limit reached
Next review available in: 38 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR improves Largest Contentful Paint (LCP) on the static homepage by removing decoding="async" from the two above-the-fold SVG images (brand avatar + hero graphic), while keeping async decoding for lazy-loaded offscreen images.
Changes:
- Removed
decoding="async"from the header brand SVG and hero SVG to avoid delaying LCP rendering. - Updated the Python regression test to distinguish lazy vs non-lazy images for decoding assertions.
- Documented the performance change in both the changelog and the performance journal.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
index.html |
Removes decoding="async" from the two LCP-critical SVG images while preserving async decoding on lazy/offscreen images. |
tests/test_styles.py |
Updates regression assertions to require decoding="async" on lazy images and forbid it on non-lazy images. |
CHANGELOG.md |
Records the LCP optimization under [Unreleased]. |
.jules/bolt.md |
Adds a dated performance note capturing the rationale and rule-of-thumb for future changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| lazy_images = [img for img in parser.images if img.get("loading") == "lazy"] | ||
| critical_images = [img for img in parser.images if img.get("loading") != "lazy"] | ||
|
|
||
| # Critical above-the-fold images should NOT have async decoding for LCP optimization | ||
| for img in critical_images: | ||
| assert img.get("decoding") != "async", f"Critical image {img.get('src')} has decoding='async'" | ||
|
|
||
| # Lazy-loaded images must have async decoding | ||
| for img in lazy_images: | ||
| assert img.get("decoding") == "async", f"Lazy image {img.get('src')} missing decoding='async'" |
|
Closing as a superseded duplicate of #141. The canonical PR implements the same eager/LCP image-hint change on the current base, adds non-vacuous eager/lazy/LCP contracts, and documents the HTML-standard semantics and measurement limits without claiming a guaranteed LCP improvement. |
Understood. Acknowledging that this work is superseded and obsolete, and stopping work on this task. |
💡 What: 최상단의 핵심 SVG 이미지 2개(로고 및 메인 그래픽)에서
decoding="async"속성을 제거했습니다.🎯 Why:
decoding="async"속성은 이미지 디코딩을 백그라운드로 미루어 메인 스레드의 블로킹을 막지만, Above-the-fold(뷰포트 내 최초 노출 영역)에 존재하는 핵심 이미지(LCP 요소)의 렌더링까지 늦추는 부작용이 있습니다. 이를 동기식으로 처리하면 초기 렌더링 속도와 LCP 지표가 향상됩니다.📊 Impact: 초기 화면의 로고 및 히어로 이미지 렌더링 지연을 최소화하여 LCP 향상.
🔬 Measurement: Lighthouse 등의 성능 측정 도구를 통해 향상된 LCP 타이밍을 확인 가능하며, Python 테스트 스위트로 lazy 이미지들에만 async 디코딩이 올바르게 적용되었는지 검증했습니다.
PR created automatically by Jules for task 10876012190373680489 started by @seonghobae