웹 성능 최적화 기법(웹에 날개를 달아주는)

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 웹 성능 개선 결과 확인

강상진 삼성 SDS와 Microsoft에서 이커머스, 보안, 콘솔 게임을 개발하는 개발자로 경력을 시작하여 Akamai에서 국내외 기업을 위해 CDN을 비롯해 웹 성능과 미디어 서비스, 보안 서비스를 컨설팅했습니다. 베트남 빈그룹에서 글로벌 IT 서비스를 위한 클라우드 아키텍처와 보안 전략을 담당했습니다. 글과 콘퍼런스, 교육을 통해 다양한 IT 기술을 많은 이에게 전달하고 공유하며, 상호 작용하는 IT 엔지니어의 삶을 즐기고 있습니다.