CSS 한 줄로 강제 레이아웃 27.3ms를 1.8ms로 — content-visibility 실측
같은 HTML, 같은 바이트인데 CSS 한 줄만 넣었더니 강제 레이아웃이 27.3ms에서 1.8ms로 줄었다. 400개 섹션 페이지 두 벌을 Chrome 트레이스로 재고, content-visibility: auto의 절감분과 contain-intrinsic-size 함정까지 정리한다.
태그
웹성능
4개 글
클릭 한 번에 264ms — 같은 일을 쪼갰더니 56ms, INP 실측기
INP는 2024년 FID를 대체한 Core Web Vitals 응답성 지표다. 같은 220ms 작업을 통짜로 돌릴 때와 scheduler.yield로 쪼갤 때를 Event Timing API로 측정했다. 264ms(개선 필요)가 56ms(양호)로 떨어지는 과정을 코드와 로그로 기록한다.
버튼을 누르려는 순간 화면이 밀렸다 — CLS 0.559를 0.014로 내린 실측 기록
로딩 중 레이아웃이 밀리는 건 취향 문제가 아니라 측정 가능한 지표다. 같은 페이지를 두 가지로 만들어 layout-shift PerformanceObserver로 CLS를 재고, 이미지 크기 예약과 슬롯 확보만으로 0.559(POOR)를 0.014(GOOD)까지 내린 기록이다.
히어로 이미지는 117KB였는데 LCP는 1.2초 — 브라우저가 이미지를 늦게 찾는 진짜 이유
LCP가 느린 건 이미지가 무거워서가 아니라 브라우저가 언제 그 이미지를 발견하느냐의 문제다. CSS 배경 이미지가 프리로드 스캐너에 안 보이는 현상을 Chrome DevTools로 실측하고 fetchpriority로 LCP 1247ms를 109ms까지 내린 실전 기록.