TECH NOTES
기술노트
현장에서 검증된 개발 지식을 기록합니다.
54321
Frontend
fetchpriority와 preload — LCP 이미지를 먼저 불러오게 만들기
LCP를 차지하는 히어로 이미지를 브라우저가 먼저 내려받게 만드는 fetchpriority와 preload 실전 가이드. loading=lazy 오용과 srcset 불일치 같은 흔한 실수, 적용 후 확인 방법까지 짚었다.
Frontend
scheduler.yield() — 긴 작업을 쪼개 INP를 살리는 법
긴 자바스크립트 작업을 scheduler.yield()로 잘게 쪼개 메인 스레드를 양보하고 INP를 개선하는 법. setTimeout·requestIdleCallback·Web Worker와 무엇이 다른지, 언제 써야 하는지 예제로 정리했다.
Frontend
content-visibility: auto — 긴 페이지 렌더링 비용을 줄이는 CSS 한 줄
화면 밖 요소의 렌더링을 통째로 건너뛰어 긴 페이지의 초기 렌더 비용을 줄이는 CSS 속성. contain-intrinsic-size 짝 사용법과 가상화와의 차이, 스크롤바가 튀는 함정과 해결책까지 실전 위주로 정리했다.
Frontend
웹 성능 최적화 2025 — Core Web Vitals 개선 전략
2025년 기준 Core Web Vitals 최적화 전략 — LCP, INP, CLS 개선 방법.
Frontend
웹 성능 최적화 — Core Web Vitals 개선 전략
Core Web Vitals(LCP, FID, CLS)를 개선하는 구체적인 전략과 측정 방법.