#Image Optimization#WebP#AVIF#Performance#Next.js
Image Optimization 실제: WebP, AVIF, 반응형 이미지
블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.
2026년 2월 11일
Codemapo
블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.
느리다고 느껴서 감으로 최적화했는데 오히려 더 느려졌다. 프로파일러로 병목을 정확히 찾는 법을 배운 이야기.
텍스트에서 바이너리로(HTTP/2), TCP에서 UDP로(HTTP/3). 한 줄로서기 대신 병렬처리 가능해진 웹의 진화. 구글이 주도한 QUIC 프로토콜 이야기.
HTML 파싱부터 DOM, CSSOM 생성, 렌더 트리, 레이아웃(Reflow), 페인트(Repaint), 그리고 합성(Composite)까지. 브라우저가 화면을 그리는 6단계 과정과 치명적인 렌더링 성능 최적화(CRP) 가이드.
서버 컴포넌트를 클라이언트 컴포넌트 안에 import 했더니, DB 연결이 끊기고 에러가 폭발했습니다. Next.js App Router의 핵심인 'Composition Pattern'을 구멍 뚫린 도넛에 비유해 설명하고, Context Provider를 올바르게 분리하는 방법을 정리해봤습니다.
