⚡ Bolt: SVG 및 LCP 이미지 초기 렌더링 지연 해소 (decoding 속성 최적화)#81
Conversation
- `index.html`에서 SVG 요소 및 `fetchpriority="high"`가 설정된 주요 LCP 이미지에 잘못 적용되어 있던 `decoding="async"` 속성을 제거했습니다. - SVG는 디코딩이 아닌 파싱 과정을 거치고, LCP 이미지는 렌더링을 지연시킬 경우 성능 저하(FCP, LCP 악화)를 유발하므로 속성 제거가 적절합니다. - `tests/test_styles.py`의 테스트 코드도 이러한 조건을 엄격히 검증하도록 개선하여, 향후 래스터 이미지에는 지연 디코딩이 적용되면서도 핵심 리소스는 렌더링을 지연하지 않도록 강제했습니다. - `.jules/bolt.md`에 관련된 성능 관련 학습 내용을 기록했습니다.
|
👋 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. |
1 participant
💡 What
index.html내에 렌더링되는 이미지들 중에서 SVG 형식의 이미지와 최상단 LCP(Largest Contentful Paint) 대상(예:fetchpriority="high"가 부여된 Hero 이미지)에서decoding="async"속성을 제거했습니다.🎯 Why
decoding="async"는 브라우저가 이미지 디코딩을 메인 스레드에서 비동기적으로 처리하게 만들어 스크롤 등의 사용자 상호작용 성능을 향상시킵니다. 그러나 다음과 같은 문제가 있습니다.📊 Impact
화면 상단의 주요 이미지들이 불필요한 비동기 지연 없이 즉각적으로 화면에 그려져 초기 체감 로딩 속도(LCP)가 개선됩니다. 또한, SVG 이미지에 불필요하게 부여된 속성을 제거하여 DOM 구조가 간결해집니다.
🔬 Measurement
pytest를 실행하여.svg로 끝나는 이미지 및fetchpriority="high"인 이미지에는 해당 속성이 없음을 검증하는 변경된test_images_decode_without_blocking_rendering테스트를 통과하는지 확인할 수 있습니다.PR created automatically by Jules for task 4721589353191343063 started by @seonghobae