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