From 1ad4ce2938719c8678e6b58f9e84128edf30ab66 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 4 Aug 2026 13:50:46 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20[performance=20improvem?=
=?UTF-8?q?ent]=20LCP=20SVG=20=EB=94=94=EC=BD=94=EB=94=A9=20=EC=B5=9C?=
=?UTF-8?q?=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.jules/bolt.md | 4 ++++
index.html | 6 ++++--
tests/test_styles.py | 11 +++++++++--
3 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/.jules/bolt.md b/.jules/bolt.md
index c10fb9b..5fb45ef 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -12,3 +12,7 @@
## 2026-07-10 - Remove unnecessary DOMPurify for performance
**Learning:** 애플리케이션이 `textContent`와 같은 안전한 DOM API만 사용하고 `innerHTML` 등의 위험한 싱크를 사용하지 않는다면 DOMPurify와 같은 라이브러리를 통해 Trusted Types 정책을 생성할 필요가 없음.
**Action:** 불필요한 번들 다운로드 및 스크립트 실행을 방지하기 위해 사용하지 않는 라이브러리를 식별하고 제거할 것.
+
+## 2026-08-04 - SVG 이미지와 decoding="async"로 인한 LCP 지연
+**Learning:** 초기 화면 렌더링에 중요한 위쪽 영역(Above-the-fold)의 SVG 이미지에 `decoding="async"` 속성이 있으면 렌더링이 메인 스레드를 차단하지 않게 되지만, 동시에 브라우저가 화면을 그리는 시점에 이미지가 준비되지 않아 Largest Contentful Paint(LCP) 발생 시점이 늦어질 수 있습니다.
+**Action:** Above-the-fold에 위치한 로고나 Hero 이미지 같은 핵심 리소스에서는 `decoding="async"` 속성을 제거하여 렌더링 지연을 막습니다. 반대로 `loading="lazy"` 속성을 가진 오프스크린 이미지는 메인 스레드를 막지 않도록 계속해서 `decoding="async"`를 유지합니다.
diff --git a/index.html b/index.html
index fd888db..a2dbbd7 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,8 @@
본문으로 건너뛰기