Skip to content

⚡ Bolt: SVG 및 LCP 이미지 렌더링 최적화#85

Open
seonghobae wants to merge 1 commit into
mainfrom
bolt-optimize-svg-decoding-8597600822584320158
Open

⚡ Bolt: SVG 및 LCP 이미지 렌더링 최적화#85
seonghobae wants to merge 1 commit into
mainfrom
bolt-optimize-svg-decoding-8597600822584320158

Conversation

@seonghobae

Copy link
Copy Markdown
Contributor

💡 What: index.html 파일 내에 있는 모든 SVG 이미지 및 LCP(fetchpriority="high") 이미지에서 decoding="async" 속성을 제거했습니다. 더불어, 이를 검증하는 테스트 코드(test_images_decode_without_blocking_rendering)가 SVG 파일을 제외하고 비동기 디코딩 속성을 확인하도록 수정했습니다.

🎯 Why: SVG 이미지는 브라우저에서 '디코딩(decoding)'되는 것이 아니라 '파싱(parsing)'되는 대상입니다. 따라서 decoding="async" 속성은 무의미하며, 특히 화면 초기에 즉시 렌더링되어야 하는 LCP 이미지나 벡터 그래픽에 이 속성을 적용하면 동기적 렌더링 과정이 불필요하게 지연되어 오히려 렌더링 체감 속도와 퍼포먼스가 떨어지는 안티 패턴(anti-pattern)이 발생합니다.

📊 Impact: 메인 화면의 초기 LCP(Largest Contentful Paint) 속도를 미세하게 단축하고 파싱 단계에서 불필요한 프레임 지연(Frame delay)을 방지합니다.

🔬 Measurement:

  1. pytest tests/test_styles.py가 정상적으로 통과하는지 확인합니다.
  2. 개발자 도구의 Network 및 Performance 탭에서 초기 에셋 로드 시 메인 스레드 블로킹이나 LCP 지연이 개선되었는지 확인합니다.

PR created automatically by Jules for task 8597600822584320158 started by @seonghobae

- SVG 이미지와 LCP 우선순위 이미지에서 불필요한 `decoding="async"` 속성 제거
- `test_images_decode_without_blocking_rendering` 테스트가 SVG 이미지를 무시하도록 로직 수정
- 최적화 학습 내용 `.jules/bolt.md`에 기록
@google-labs-jules

Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant