프런트엔드 성능 최적화 Deep Dive (ebook)

김용찬

삼성 SDS, 카카오, 인터파크트리플을 거치며 풀스택 및 프런트엔드 개발자로 근무했다. 현재는 네이버 파이낸셜에서 프런트엔드 개발자로 근무하고 있다. 저서로는 《모던 리액트 Deep Dive》(위키북스, 2023)와 《npm Deep Dive》(위키북스, 2025), 역서로는 《리액트 인터뷰 가이드》(위키북스, 2024)가 있다.

• [01부] 네트워크와 로딩 최적화
•  
• ▣ 01장: 네트워크 최적화는 가장 손쉬운 성능 개선이다
• 1.1 프런트엔드 개발자가 네트워크를 봐야 하는 이유
• 1.2 CDN과 엣지 캐싱의 작동 원리
• 1.3 HTTP/2와 HTTP/3의 기술적 개선
• 1.4 정리
• 1.5 체크리스트
•  
• ▣ 02장: 네트워크 압축으로 전송 크기 줄이기
• 2.1 리소스 압축의 원리와 효과
• 2.2 정리
• 2.3 체크리스트
•  
• ▣ 03장: 브라우저 캐시는 믿는 게 아니라 설계하는 것이다
• 3.1 Cache-Control 헤더 완전 정복
• 3.2 파일명 해싱으로 안전한 장기 캐싱
• 3.3 Stale-While-Revalidate로 최신성과 성능 모두 잡기
• 3.4 BFCache로 뒤로가기를 즉시 복원하기
• 3.5 정리
• 3.6 체크리스트
•  
• ▣ 04장: 리소스 우선순위를 재정의하면 로딩이 빨라진다
• 4.1 라우저의 리소스 우선순위 메커니즘
• 4.2 소스 힌트로 우선순위 제어하기
• 4.3 fetchpriority 속성으로 세밀하게 제어하기
• 4.4 리소스 힌트 최적화 실전 전략
• 4.5 정리
• 4.6 체크리스트
•  
• ▣ 05장: 프리로드 스캐너를 방해하지 말고 활용하라
• 5.1 프리로드 스캐너의 작동 원리
• 5.2 프리로드 스캐너를 방해하는 안티패턴
• 5.3 프리로드 스캐너 친화적인 코드 작성하기
• 5.4 불가피한 동적 리소스 최적화
• 5.5 정리
• 5.6 체크리스트
•  
• ▣ 06장: async와 defer는 로딩 병목을 풀기 위한 가장 기본적인 도구다
• 6.1 스크립트가 렌더링을 막는 방식
• 6.2 defer: 순서를 보장하며 파싱 후 실행
• 6.3 async: 최대한 빨리 비순차 실행
• 6.4 async와 defer의 선택 기준
• 6.5 모듈 스크립트와 type="module"
• 6.6 동적 스크립트 로딩
• 6.7 흔한 실수와 안티패턴
• 6.8 정리
• 6.9 체크리스트
•  
• ▣ 07장: 렌더링 블로킹 리소스를 줄이는 것이 진짜 ‘빠름’의 시작이다
• 7.1 CSS와 자바스크립트의 렌더 블로킹
• 7.2 크리티컬 CSS 추출과 인라인화
• 7.3 미디어 쿼리를 활용한 조건부 로딩
• 7.4 정리
• 7.5 체크리스트
•  
• [02부] 번들과 리소스 최적화
•  
• ▣ 08장: 폴리필은 ‘필요한 경우’에만 로드하라
• 8.1 가능한 타깃 브라우저를 최소한으로 좁혀라
• 8.2 조건부 폴리필 로딩
• 8.3 core-js와 폴리필 최적화
• 8.4 정리
• 8.5 체크리스트
•  
• ▣ 09장: 트리 셰이킹보다 불필요한 리소스 자체를 없애는 것이 우선이다
• 9.1 번들 분석으로 문제를 가시화하라
• 9.2 트리 셰이킹이 제대로 작동하지 않는 이유
• 9.3 네이티브 API로 대체하거나 가벼운 대안을 선택하라
• 9.4 같은 라이브러리가 두 번 설치돼 있다
• 9.5 번들 최적화 우선순위 전략
• 9.6 정리
• 9.7 체크리스트
•  
• ▣ 10장: 코드 스플리팅은 기능이 아니라 전략이다
• 10.1 동적 import()가 번들을 쪼개는 원리
• 10.2 전략적 분할 지점 찾기
• 10.3 청크 최적화와 공통 모듈 추출
• 10.4 지연 로딩의 UX 최적화
• 10.5 정리
• 10.6 체크리스트
•  
• ▣ 11장: 서버가 할 수 있는 일은 클라이언트가 하지 않게 하라
• 11.1 클라이언트 중심 개발의 함정
• 11.2 클라이언트 로직을 서버로 이동하기
• 11.3 리액트 서버 컴포넌트
• 11.4 정리
• 11.5 체크리스트
•  
• ▣ 12장: 이미지는 화질이 아니라 전달 방식이 성능을 좌우한다
• 12.1 이미지 포맷 선택이 용량을 좌우한다
• 12.2 반응형 이미지로 불필요한 전송 막기
• 12.3 압축과 품질 최적화의 실전 기준
• 12.4 이미지 로딩 전략: 지연 로딩과 디코딩 최적화
• 12.5 이미지 로딩 UX 개선
• 12.6 자동화 도구로 최적화 간소화하기
• 12.7 정리
• 12.8 체크리스트
•  
• ▣ 13장: 동영상 최적화는 전송량과 로딩 전략이 핵심이다
• 13.1 동영상 포맷과 코덱 선택이 용량을 좌우한다
• 13.2 비트레이트와 해상도 최적화
• 13.3 video 태그 속성 최적화
• 13.4 동영상 로딩 전략
• 13.5 적응형 스트리밍과 고급 최적화
• 13.6 정리
• 13.7 체크리스트
•  
• ▣ 14장: 폰트는 디자인보다 성능 자산으로 관리하라
• 14.1 FOIT, FOUT, FOFT - 폰트 로딩의 세 가지 문제
• 14.2 font-display 속성으로 로딩 전략을 제어하라
• 14.3 서브셋 폰트로 용량을 대폭 줄여라
• 14.4 가변 폰트로 HTTP 요청을 줄여라
• 14.5 폰트 프리로드로 로딩을 앞당겨라
• 14.6 폴백 폰트 설계로 레이아웃 시프트를 방지하라
• 14.7 구글 폰트 vs 자체 호스팅 - 무엇을 선택할 것인가
• 14.8 정리
• 14.9 체크리스트
•  
• ▣ 15장: CSS는 최소한만 남겨야 빠르다
• 15.1 크리티컬 CSS 추출과 인라인화
• 15.2 미사용 CSS 제거
• 15.3 CSS-in-JS 성능 고려사항
• 15.4 정리
• 15.5 체크리스트
•  
• [03부] 렌더링과 런타임 최적화
•  
• ▣ 16장: 하이드레이션은 줄이는 것이 아니라 제거하는 것이다
• 16.1 하이드레이션이 TTI를 지연시키는 이유
• 16.2 스트리밍 SSR로 점진적 렌더링
• 16.3 부분 하이드레이션으로 필요한 부분만
• 16.4 Resumability로 하이드레이션 제거
• 16.5 정리
• 16.6 체크리스트
•  
• ▣ 17장: 데이터 캐싱과 낙관적 업데이트로 체감 속도를 높여라
• 17.1 서버 상태 vs 클라이언트 상태
• 17.2 SWR과 리액트 쿼리 캐싱 전략
• 17.3 캐시 무효화와 재검증
• 17.4 낙관적 업데이트로 즉각적인 피드백 제공
• 17.5 정리
• 17.6 체크리스트
•  
• ▣ 18장: 자바스크립트는 짧게 자주 실행해야 한다
• 18.1 긴 작업과 메인 스레드 블로킹 문제
• 18.2 긴 작업 분할과 scheduler.yield()
• 18.3 requestIdleCallback으로 급하지 않은 작업 미루기
• 18.4 이벤트 리스너 최적화
• 18.5 웹 워커로 메인 스레드 부담 줄이기
• 18.6 정리
• 18.7 체크리스트
•  
• ▣ 19장: 메모리 누수는 코드가 아니라 생명주기의 문제다
• 19.1 메모리 누수가 발생하는 전형적인 패턴
• 19.2 useEffect 정리 함수의 올바른 사용
• 19.3 타이머와 인터벌 관리
• 19.4 구독과 이벤트 리스너의 생명주기 관리
• 19.5 크롬 개발자 도구로 메모리 누수 디버깅하기
• 19.6 메모리 누수 방지를 위한 코드 패턴
• 19.7 정리
• 19.8 체크리스트
•  
• ▣ 20장: CLS는 동적 콘텐츠를 어떻게 다루느냐의 문제다
• 20.1 광고가 CLS의 주범인 이유와 그 대응 전략
• 20.2 서드파티 임베드 콘텐츠의 크기 예약
• 20.3 동적 UI 요소를 CLS 없이 삽입하는 방법
• 20.4 CSS contain으로 레이아웃 범위 제한하기
• 20.5 정리
• 20.6 체크리스트
•  
• ▣ 21장: 애니메이션은 60fps가 기본이다
• 21.1 레이아웃 트리거 최소화: transform/opacity 우선하기
• 21.2 컴포지터 레이어와 GPU 가속 활용
• 21.3 will-change의 올바른 사용법과 함정
• 21.4 requestAnimationFrame으로 프레임 동기화
• 21.5 CSS가 기본이고 JS는 필요할 때만
• 21.6 애니메이션 성능 측정과 디버깅
• 21.7 정리
• 21.8 체크리스트
•  
• [04부] 프레임워크와 고급 주제
•  
• ▣ 22장: 컴포넌트 최적화는 상태 범위를 줄이는 것에서 시작한다
• 22.1 프레임워크별 렌더링 모델을 이해해야 최적화할 수 있다
• 22.2 상태는 사용하는 곳 가까이에 둬라
• 22.3 전역 상태 공유는 구독 범위를 최소화해야 한다
• 22.4 메모이제이션은 최후의 수단이다
• 22.5 리스트 렌더링에서 키는 성능의 핵심이다
• 22.6 렌더링 성능을 측정하고 디버깅하라
• 22.7 정리
• 22.8 체크리스트
•  
• ▣ 23장: 서드파티 코드는 당신이 통제해야 한다
• 23.1 서드파티 스크립트의 영향을 정확히 측정하라
• 23.2 정말 필요한 스크립트인지 먼저 검토하라
• 23.3 지연 로딩으로 초기 로드를 줄여라
• 23.4 파사드 패턴으로 체감 성능을 높여라
• 23.5 웹 워커로 메인 스레드를 보호하라
• 23.6 iframe 샌드박싱으로 격리하라
• 23.7 정리
• 23.8 체크리스트
•  
• ▣ 24장: 다국어는 사용자별로 코드를 달리 제공하라
• 24.1 사용자 언어를 정확히 감지하고 라우팅하라
• 24.2 프레임워크별 언어 코드 스플리팅을 구현하라
• 24.3 번역 파일을 네임스페이스로 나누어 지연 로딩하라
• 24.4 CDN을 활용해 언어별 콘텐츠를 효율적으로 전달하라
• 24.5 다국어 이미지와 폰트를 조건부로 로드하라
• 24.6 다국어 SEO를 성능과 함께 고려하라
• 24.7 정리
• 24.8 체크리스트
•  
• ▣ 25장: 차세대 웹 표준으로 성능을 한 단계 더 개선하라
• 25.1 View Transitions API로 부드러운 페이지 전환
• 25.2 Speculation Rules API로 프리렌더링 제어
• 25.3 Long Animation Frames API로 INP 디버깅
• 25.4 공유 압축 사전으로 압축률 향상
• 25.5 새로운 표준 도입 시 판단 기준
• 25.6 정리
• 25.7 체크리스트
•  
• ▣ 26장: 마치며
• 26.1 어디서부터 시작할 것인가
• 26.2 측정하지 않으면 개선할 수 없다
• 26.3 성능 최적화는 일회성이 아니라 문화다
• 26.4 다음 단계: 지속적인 학습
• 26.5 마무리
•  
• [부록A] 핵심 웹 지표의 역사

• GitHub 저장소: https://github.com/yceffort/web-performance-deep-dive-example/
• ZIP 형식으로 다운로드: https://github.com/yceffort/web-performance-deep-dive-example/archive/refs/heads/main.zip