추천의 글 = ⅷ 지은이의 글 = ⅹ 1장 블로그 서비스 최적화 = 1 실습 내용 소개 = 1 이 장에서 학습할 최적화 기법 = 2 분석 툴 소개 = 3 서비스 탐색 및 코드 분석 = 6 코드 다운로드 = 6 서비스 실행 = 7 서비스 탐색 = 7 코드 분석 = 8 Lighthouse 툴을 이용한 페이지 검사 = 11 Lighthouse로 검사하기 = 11 Lighthouse 검사 결과 = 12 이미지 사이즈 최적화 = 17 비효율적인 이미지 분석 = 17 이미지 CDN = 20 적절한 이미지 사이즈로 최적화 = 24 병목 코드 최적화 = 26 Performance 패널 살펴보기 = 26 페이지 로드 과정 살펴보기 = 33 병목 코드 개선 = 37 최적화 전후 비교 = 40 코드 분할 & 지연 로딩 = 42 번들 파일 분석 = 42 코드 분할이란 = 48 코드 분할 적용하기 = 51 텍스트 압축 = 55 production 환경과 development 환경 = 55 텍스트 압축이란 = 60 텍스트 압축 적용 = 62 2장 올림픽 통계 서비스 최적화 = 65 실습 내용 소개 = 65 이 장에서 학습할 최적화 기법 = 65 분석 툴 소개 = 67 서비스 탐색 및 코드 분석 = 68 코드 다운로드 = 68 서비스 실행 = 68 서비스 탐색 = 69 코드 분석 = 72 애니메이션 최적화 = 75 문제의 애니메이션 찾기 = 75 애니메이션의 원리 = 76 브라우저 렌더링 과정 = 78 리플로우와 리페인트 = 83 하드웨어 가속(GPU 가속) = 84 애니메이션 최적화 = 86 최적화 전후 비교 = 88 컴포넌트 지연 로딩 = 89 번들 파일 분석 = 89 모달 코드 분리하기 = 90 컴포넌트 사전 로딩 = 93 지연 로딩의 단점 = 93 컴포넌트 사전 로딩 타이밍 = 95 이미지 사전 로딩 = 98 느린 이미지 로딩 = 98 이미지 사전 로딩 = 99 3장 홈페이지 최적화 = 105 실습 내용 소개 = 105 이 장에서 학습할 최적화 기법 = 105 분석 툴 소개 = 108 서비스 탐색 및 코드 분석 = 110 코드 다운로드 = 110 서비스 실행 = 110 서비스 탐색 = 112 코드 분석 = 113 이미지 지연 로딩 = 118 네트워크 분석 = 118 Intersection Observer = 121 Intersection Observer 적용하기 = 124 이미지 사이즈 최적화 = 130 느린 이미지 로딩 분석 = 130 이미지 포맷 종류 = 131 Squoosh를 사용하여 이미지 변환 = 133 최적화 전후 비교 = 143 동영상 최적화 = 144 동영상 콘텐츠 분석 = 144 동영상 압축 = 146 압축된 동영상 적용 = 149 최적화 전후 비교 = 149 팁 = 149 폰트 최적화 = 151 FOUT, FOIT = 152 폰트 최적화 방법 = 153 캐시 최적화 = 165 캐시란? = 166 Cache-Control = 170 캐시 적용 = 171 적절한 캐시 유효 시간 = 174 불필요한 CSS 제거 = 176 PurgeCSS = 179 4장 이미지 갤러리 최적화 = 185 실습 내용 소개 = 185 이 장에서 학습할 최적화 기법 = 186 분석 툴 소개 = 187 서비스 탐색 및 코드 분석 = 188 코드 다운로드 = 188 서비스 실행 = 189 서비스 탐색 = 190 코드 분석 = 191 레이아웃 이동 피하기 = 197 레이아웃 이동이란? = 197 레이아웃 이동의 원인 = 199 레이아웃 이동 해결 = 200 이미지 지연 로딩 = 205 리덕스 렌더링 최적화 = 207 리액트의 렌더링 = 207 리렌더링의 원인 = 210 useSelector 문제 해결 = 211 병목 코드 최적화 = 214 이미지 모달 분석 = 214 getAverageColorOfImage 함수 분석 = 216 찾아보기 = 222