performance · medium priority
PRPL Pattern
Push, Render, Pre-cache, Lazy-load — PWA 성능 패턴
intermediate 난이도4시간토스카카오네이버
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“식당에서 손님이 앉자마자 물과 메뉴판을 가져다주고 (Push), 주문 없이 먼저 기본 반찬을 세팅하고 (Render), 인기 메뉴 재료를 미리 손질해두고 (Pre-cache), 추가 메뉴는 주문 시에만 만드는 전략 (Lazy-load)”
PRPL은 "지금 당장 필요한 것"만 빠르게 보여주고, 나머지는 미리 준비하되 요청할 때만 제공하는 전략이다.
핵심 개념
HTTP/2 Server Push 또는 <link rel="preload">로 브라우저가 발견하기 전에 중요 자원을 미리 전송/로드한다.
Preload 힌트html
1<!-- 폰트 preload -->2<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>34<!-- 중요 CSS preload -->5<link rel="preload" href="/styles/critical.css" as="style">67<!-- LCP 이미지 preload -->8<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
Next.js — 폰트 최적화 (built-in preload)tsx
1// app/layout.tsx2import { Inter } from 'next/font/google';34// Next.js가 자동으로 preload 처리5const inter = Inter({6 subsets: ['latin'],7 display: 'swap',8 preload: true,9});
실무 적용
어떤 상황에서 사용하는가
Next.js 이커머스에서 모바일 LCP를 2.5초 이하로 개선해야 할 때
어떻게 적용하는가
1) Hero 이미지에 priority 속성으로 preload, 2) 상품 목록 아래 컴포넌트는 dynamic import, 3) Service Worker로 정적 자산 캐싱, 4) Critical CSS 인라인화
흔한 실수와 안티패턴
- 모든 것을 preload하면 대역폭 낭비 (중요도 낮은 자원까지 preload)
- Service Worker 업데이트 전략 미흡으로 구 버전 캐시 제공
- 코드 스플리팅 과도하게 적용해 오히려 요청 수가 늘어남
- Lazy load 컴포넌트에 로딩 상태 처리 누락
면접 질문
중급토스카카오
답변 방향 힌트
4가지 단계 각각의 목적과 구현 방법
반드시 언급할 키워드
- Push/Preload: 중요 자원 선행 로딩
- Render: 초기 경로 최소 자원으로 빠른 렌더
- Pre-cache: Service Worker 캐싱
- Lazy-load: 코드 스플리팅
예상 꼬리 질문
- Service Worker 캐싱 전략의 종류는?
- Code Splitting의 최적 단위는?