⚡ Bolt: LCP 및 SVG 이미지 렌더링 최적화#95
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. |
There was a problem hiding this comment.
Pull request overview
SVG 및 LCP 이미지에서 불필요하거나 오히려 LCP를 지연시킬 수 있는 decoding="async" 속성을 제거해 초기 렌더링 우선순위를 개선하는 변경입니다. 정적 사이트(plain HTML/CSS/JS)에서 이미지 렌더링 힌트를 더 정확히 적용하도록 정리하고, 이에 맞춰 테스트 및 성능 학습 기록을 업데이트합니다.
Changes:
index.html의 SVG 이미지들과fetchpriority="high"가 적용된 히어로 SVG에서decoding="async"제거tests/test_styles.py에서 SVG를decoding="async"검사 대상에서 제외하도록 테스트 로직 업데이트.jules/bolt.md에 SVG/LCPdecoding="async"최적화 패턴 학습 내용 추가
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| index.html | SVG/LCP 렌더링 우선순위 관점에서 불필요한 decoding="async" 속성 제거 |
| tests/test_styles.py | “래스터 이미지에만 async decoding 적용”이라는 의도를 테스트에 반영 |
| .jules/bolt.md | 성능 최적화 학습/액션 패턴 문서화(저널) 업데이트 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| assert parser.images | ||
| assert all(image.get("decoding") == "async" for image in parser.images) | ||
| raster_images = [img for img in parser.images if not str(img.get("src")).endswith(".svg")] |
| ## 2024-07-25 - SVG와 LCP 이미지의 decoding="async" 사용 | ||
| **Learning:** SVG 이미지는 디코딩되지 않고 파싱되며, `decoding="async"` 속성은 브라우저의 파싱/렌더링 우선순위에 영향을 주어 오히려 렌더링을 지연시킬 수 있습니다. 특히 LCP(Largest Contentful Paint)에 해당하는 중요 이미지에 이 속성을 적용하는 것은 성능 안티 패턴입니다. | ||
| **Action:** SVG 이미지와 `fetchpriority="high"`가 적용된 LCP 이미지에는 `decoding="async"`를 사용하지 않고, 뷰포트 밖의 래스터 이미지(비-SVG)에만 적용하여 렌더링 성능을 최적화해야 합니다. |
💡 What:
index.html내의 5개 SVG 이미지 및 높은 우선순위(fetchpriority="high")를 가진 LCP 이미지에서decoding="async"속성을 제거했습니다.tests/test_styles.py의 테스트 코드에서 SVG 이미지를 검사 대상에서 제외하도록 업데이트했습니다..jules/bolt.md에 LCP 및 SVG 이미지의 최적화 패턴에 대한 학습 내용을 기록했습니다.🎯 Why:
decoding="async"속성은 불필요합니다.decoding="async"를 적용하는 것은 메인 렌더링을 늦추는 성능 안티 패턴(anti-pattern)입니다.📊 Impact:
🔬 Measurement:
python3 -m pytest tests/테스트 코드를 통해 뷰포트 바깥의 래스터 이미지들에만 해당 속성이 남아있는지 확인합니다.PR created automatically by Jules for task 2070718722301196482 started by @seonghobae