기술노트

하이드레이션은 왜 비싼가. 아일랜드 아키텍처와 Qwik의 resumability, Astro의 client:* 지시자로 자바스크립트를 줄이는 법, 그리고 언제 SPA를 그냥 쓰는 게 더 나은지까지 실무 경험으로 정리했습니다.

FID를 대체한 INP(Interaction to Next Paint) 실전 최적화 가이드. 롱태스크 쪼개기, scheduler.yield(), React transition, LCP·CLS 동반 개선, RUM 측정과 340→170ms 실전 사례까지 정리했다.

LCP를 차지하는 히어로 이미지를 브라우저가 먼저 내려받게 만드는 fetchpriority와 preload 실전 가이드. loading=lazy 오용과 srcset 불일치 같은 흔한 실수, 적용 후 확인 방법까지 짚었다.

긴 자바스크립트 작업을 scheduler.yield()로 잘게 쪼개 메인 스레드를 양보하고 INP를 개선하는 법. setTimeout·requestIdleCallback·Web Worker와 무엇이 다른지, 언제 써야 하는지 예제로 정리했다.

화면 밖 요소의 렌더링을 통째로 건너뛰어 긴 페이지의 초기 렌더 비용을 줄이는 CSS 속성. contain-intrinsic-size 짝 사용법과 가상화와의 차이, 스크롤바가 튀는 함정과 해결책까지 실전 위주로 정리했다.

2025년 기준 Core Web Vitals 최적화 전략 — LCP, INP, CLS 개선 방법.

Core Web Vitals(LCP, FID, CLS)를 개선하는 구체적인 전략과 측정 방법.