Chapter 01 웹 성능이란 무엇인가? _1.1 웹 __1.1.1 웹의 역사 __1.1.2 웹의 대표적인 요소 _1.2 웹 성능이 중요한 이유 _1.3 웹 성능 측정 방법 __1.3.1 크롬 브라우저의 개발자 도구 __1.3.2 WebPageTest 서비스 __1.3.3 구글 PageSpeed _1.4 웹 성능을 만드는 지표 __1.4.1 사용자 환경 - 프런트엔드 __1.4.2 공급자 환경 - 백엔드 __1.4.3 전달 환경 - 네트워크 _1.5 웹 성능과 프런트엔드 __1.5.1 브라우저 렌더링 _1.6 웹 성능 예산 __1.6.1 정량 기반 지표 __1.6.2 시간 기반 지표 __1.6.3 규칙 기반 지표 __1.6.4 성능 예산 활용 Chapter 02 웹 최적화 _2.1 웹 최적화란 __2.1.1 프런트엔드 최적화 __2.1.2 백엔드 최적화 __2.1.3 프로토콜 최적화 _2.2 TCP/IP 프로토콜 __2.2.1 TCP 혼잡 제어 _2.3 HTTP 프로토콜 __2.3.1 HTTP 최적화 기술 __2.3.2 HTTP 지속적 연결 __2.3.3 HTTP 파이프라이닝 _2.4 DNS __2.4.1 DNS의 작동 원리 __2.4.2 사용 중인 다양한 도메인 확인 방법 __2.4.3 웹 성능을 최적화하는 도메인 운용 방법 _2.5 브라우저 __2.5.1 브라우저의 역사와 특징 __2.5.2 내비게이션 타이밍 API __2.5.3 내비게이션 타이밍 속성 __2.5.4 내비게이션 타이밍 속성값 구하기 Chapter 03 웹 사이트 성능을 개선하는 기본적인 방법 _3.1 HTTP 요청 수 줄이기 __3.1.1 스크립트 파일 병합 __3.1.2 인라인 이미지 __3.1.3 CSS 스프라이트 _3.2 콘텐츠 파일 크기 줄이기 __3.2.1 스크립트 파일 압축 전달 __3.2.2 스크립트 파일 최소화 __3.2.3 이미지 파일 압축 __3.2.4 브라우저가 선호하는 이미지 포맷 사용 __3.2.5 큰 파일은 작게 나누어 전송 _3.3 캐시 최적화하기 __3.3.1 인터넷 캐시 사용 __3.3.2 브라우저 캐시 사용 _3.4 CDN 사용하기 Chapter 04 이미지 최적화 _4.1 이미지의 중요성 _4.2 디지털 이미지의 종류와 특성 __4.2.1 래스터 이미지 vs 벡터 이미지 __4.2.2 무손실 이미지 형식 vs 손실 이미지 형식 _4.3 이미지 변환 기법 __4.3.1 무손실 압축 __4.3.2 손실 압축 _4.4 반응형 웹에서의 이미지 배치 전략 __4.4.1 반응형 웹의 문제점 __4.4.2 원인은 이미지 __4.4.3 반응형 이미지 __4.4.4 반응형 이미지 구현 방법 _4.5 적응형 이미지 전략 __4.5.1 적응형 이미지 아키텍처 __4.5.2 기기 정보에 따라 서버 로직 수행 __4.5.3 브라우저별 이미지 전달 __4.5.4 캐시 고려 사항 Chapter 05 웹에서 가속을 이끌어 내는 방법 _5.1 웹 브라우저 현황 알아보기 _5.2 웹 브라우저 동작 이해하기 __5.2.1 브라우저 아키텍처 __5.2.2 중요 렌더링 경로 _5.3 브라우저 렌더링 최적화하기 __5.3.1 DOM 최적화하기 __5.3.2 자바스크립트와 CSS 배치하기 __5.3.3 자바스크립트 최적화하기 __5.3.4 CSS 최적화하기 __5.3.5 이미지 로딩 최적화하기 _5.4 도메인 분할 기법 이용하기 __5.4.1 도메인 분할 기법과 HTTP/2 _5.5 사용자 경험 개선하기 __5.5.1 사용자 경험 지표 바로 알기 __5.5.2 사용자 요청에 빠르게 반응하기 __5.5.3 사용자 시선 붙잡기 __5.5.4 사용자 상호 작용 방해하지 않기 Chapter 06 캐시 최적화 _6.1 캐시 _6.2 웹 캐시 동작 원리 __6.2.1 HTTP __6.2.2 HTTP의 캐시 제어 방식 __6.2.3 캐시 유효성 체크 __6.2.4 캐시 콘텐츠 갱신 _6.3 캐시 최적화 방안 __6.3.1 캐시 가능한 콘텐츠 구분하기 __6.3.2 올바른 캐시 정책 설정하기 __6.3.3 캐시 주기 결정하기 __6.3.4 캐시에 적합한 디렉터리 구조 구성하기 __6.3.5 캐시 키 올바르게 사용하기 __6.3.6 CDN 사용하기 _6.4 동적 콘텐츠 캐시 __6.4.1 동적 콘텐츠 캐시 __6.4.2 POST 응답 캐시 _6.5 고급 캐시 전략 __6.5.1 Edge Side Include __6.5.2 HTML5 로컬 스토리지 Chapter 07 CDN _7.1 CDN을 사용하는 이유 _7.2 CDN의 원리 __7.2.1 CDN 서비스 아키텍처 __7.2.2 CDN 동작 방법 __7.2.3 CDN 적용 방법 _7.3 다중 캐시 전략 __7.3.1 캐시 축출 __7.3.2 롱테일 콘텐츠 __7.3.3 캐시 서버 간 캐시 콘텐츠 공유 __7.3.4 다중 계층 캐시 _7.4 전달 경로 최적화 __7.4.1 라스트 마일 최적화 __7.4.2 프로토콜 최적화 _7.5 기타 성능 옵션 __7.5.1 CDN이 대신 제공하는 기본 기능 __7.5.2 신기술 적용을 위한 CDN 기능 Chapter 08 웹 프로토콜 최적화 _8.1 HTTP의 발전 __8.1.1 HTTP/1.1 __8.1.2 HTTP/2 __8.1.3 HTTP/3 _8.2 HTTP/2의 최적화 기술 __8.2.1 HTTP/2의 이진 프레임 __8.2.2 멀티플렉싱 __8.2.3 헤더 압축 __8.2.4 서버 푸시 _8.3 HTTP/3의 최적화 기술 __8.3.1 QUIC __8.3.2 HTTP/3의 등장 배경 __8.3.3 HTTP/3의 특징 __8.3.4 HTTP/3을 지원하는 제품군 __8.3.5 새로운 프로토콜 적용 시 고려할 점 Chapter 09 웹 최적화 트렌드 _9.1 웹 최적화의 역사 __9.1.1 모바일 기기의 등장과 모바일 사이트 최적화 _9.2 PWA __9.2.1 PWA 주요 기술 __9.2.2 PWA 사례 _9.3 AMP __9.3.1 AMP의 특징 __9.3.2 AMP의 구성 요소 __9.3.3 AMP와 반응형 웹 디자인 _9.4 웹 최적화의 실상과 과제 __9.4.1 웹 최적화의 실상 __9.4.2 웹 최적화의 과제 Chapter 10 웹 최적화 실습하기 _10.1 WebPageTest로 웹 성능 진단하기 __10.1.1 WebPageTest 고급 기능 활용하기 __10.1.2 WebPageTest의 최적화 진단 요소 __10.1.3 WebPageTest API 활용하기 _10.2 구글의 웹 최적화 기술 적용하기 __10.2.1 Lighthouse 웹 사이트 측정 도구 __10.2.2 PageSpeed 웹 성능 최적화 모듈 _10.3 웹 사이트에 프로토콜 최적화 적용하기 __10.3.1 프로토콜 최적화를 위한 조건 __10.3.2 Let's Encrypt 인증서 발급 및 설치하기 __10.3.3 Apache 웹 서버에 HTTP/2 적용하기 __10.3.4 Nginx 웹 서버에 HTTP/2 적용하기 __10.3.5 QUICHE 라이브러리를 사용한 HTTP/3 적용 _10.4 다양한 조건에서 웹 성능 비교하기 __10.4.1 Golang에서 제공하는 이미지 타일 서비스 __10.4.2 WebPageTest를 사용한 웹 성능 비교 __10.4.3 웹 성능 개선 결과 확인