⚡ 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. |
![opencode-agent[bot]](https://avatars.githubusercontent.com/in/1549082?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
OpenCode cannot approve yet because required coverage evidence did not pass.
Review outcome
1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence
-
Problem: The required coverage-evidence job result was
failure, so OpenCode cannot establish approval sufficiency for this head. -
Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.
-
Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports
successwith required evidence or explicit no-source not-applicable evidence. -
Regression test: Keep the approval branch checking
needs.coverage-evidence.result == successbefore posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present. -
Result: REQUEST_CHANGES
-
Reason: coverage-evidence result was
failure, so required test/docstring evidence was not proven for current head180204628bcefde94f16a30979ac00a20aaf25e4. -
Head SHA:
180204628bcefde94f16a30979ac00a20aaf25e4 -
Workflow run: 29539225626
-
Workflow attempt: 1
Coverage evidence
Coverage evidence job did not run or did not publish coverage evidence.
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file (3 files)"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file (3 files)"]
R1 --> V1["required checks"]
Evidence --> S2["Test: test_styles.py"]
S2 --> I2["regression suite"]
I2 --> R2["Review risk: Test: test_styles.py"]
R2 --> V2["targeted test run"]
OpenCode Review Overview
Pull request overviewOpenCode cannot approve yet because required coverage evidence did not pass. Review outcome1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence
Coverage evidenceCoverage evidence job did not run or did not publish coverage evidence. Changed-File Evidence Mapflowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file (3 files)"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file (3 files)"]
R1 --> V1["required checks"]
Evidence --> S2["Test: test_styles.py"]
S2 --> I2["regression suite"]
I2 --> R2["Review risk: Test: test_styles.py"]
R2 --> V2["targeted test run"]
|
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