목차
추천의 글 = ⅷ
지은이의 글 = ⅹ
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
닫기