Skip to content

fix: align eager, lazy, and LCP image hints with HTML standard - #141

Open
seonghobae wants to merge 5 commits into
mainfrom
bolt-lcp-svg-optimization-4787273986862805491
Open

fix: align eager, lazy, and LCP image hints with HTML standard#141
seonghobae wants to merge 5 commits into
mainfrom
bolt-lcp-svg-optimization-4787273986862805491

Conversation

@seonghobae

@seonghobae seonghobae commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

What

  • Removes forced decoding="async" from eager first-viewport images and the single declared LCP candidate, leaving the standards-defined missing-value default (auto) to the user agent.
  • Retains decoding="async" for explicitly lazy-loaded images.
  • Adds non-vacuous regression contracts for eager, lazy, and high-priority LCP-candidate image sets.
  • Records the decision, limitations, measurement plan, and APA 7th references in docs/doctoring/image-rendering-hints.md.

Why

The HTML Living Standard defines decoding as a preference hint whose missing-value default is auto. It does not guarantee a main-thread or background-thread execution path. fetchpriority independently influences fetch priority. This PR therefore avoids claiming that removing decoding="async" alone universally improves LCP.

Verification required at the exact current head

  • python3 -m pytest tests/
  • all required security, static-analysis, and repository-policy checks
  • independent non-author approval on the exact current head
  • deployment performance measured separately under representative device and network conditions

References

  • WHATWG. (2026, July 20). HTML living standard: The img element.
  • Osmani, A., Sohoni, L., Meenan, P., & Pollard, B. (2023, November 14). Optimize resource loading with the Fetch Priority API. web.dev.

This PR supersedes the stale duplicate #100 by carrying forward its valid standards reasoning and stronger non-vacuous tests on the current base.

Summary by CodeRabbit

  • 성능 개선

    • 첫 화면의 주요 이미지가 브라우저 기본 디코딩 전략을 사용하도록 조정했습니다.
    • 지연 로딩 이미지는 비동기 디코딩을 유지하고, 단일 LCP 후보에는 높은 우선순위를 적용했습니다.
  • 문서

    • 이미지 렌더링 힌트와 성능 측정 기준을 문서화했습니다.
  • 테스트

    • 이미지 로딩·디코딩 동작과 주요 섹션의 레이아웃 안정성 검증을 강화했습니다.

@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.

@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

홈페이지 이미지 렌더링 힌트 계약을 정리했습니다. eager 이미지는 기본 auto 디코딩을 사용합니다. lazy 이미지는 decoding="async"를 유지합니다. 단일 LCP 후보의 fetchpriority="high" 규칙, 관련 문서, 마크업, 정적 회귀 테스트를 함께 갱신했습니다.

Changes

이미지 렌더링 힌트

Layer / File(s) Summary
렌더링 힌트 계약
docs/doctoring/image-rendering-hints.md, .jules/bolt.md, CHANGELOG.md
이미지 로딩, fetchpriority, decoding 계약을 문서화했습니다. 단일 LCP 후보는 fetchpriority="high"를 사용합니다. eager 이미지는 decoding을 생략합니다. lazy 이미지는 decoding="async"를 유지합니다. 정적 테스트 계약과 배포 후 측정 한계도 기록했습니다.
홈페이지 이미지 마크업
index.html
브랜드 로고와 히어로 이미지에서 decoding="async" 속성을 제거했습니다. 다른 로딩 동작과 속성은 유지됩니다.
이미지 회귀 검증
tests/test_styles.py
홈페이지 img 속성을 수집하는 헬퍼와 타입 힌트를 추가했습니다. eager 이미지의 decoding 생략, lazy 이미지의 decoding="async", 단일 LCP 후보의 eager·high-priority 조건을 각각 검증합니다. 기존 CSS 회귀 테스트는 유지하고, tall section의 contain-intrinsic-size 검증을 추가했습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목은 eager, lazy 및 LCP 이미지 힌트 정합성 개선이라는 주요 변경 사항을 간결하고 정확하게 설명합니다.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch bolt-lcp-svg-optimization-4787273986862805491

Comment @coderabbitai help to get the list of available commands.

@seonghobae seonghobae changed the title ⚡ Bolt: LCP 이미지 성능 최적화 fix: align eager, lazy, and LCP image hints with HTML standard Aug 5, 2026
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