추가 적립 안내

이론부터 실습까지, 현장에 적용할 수 있는 웹 성능 최적화의 모든 것

이 책은 국내에서 오랫동안 웹 성능을 연구하고 최적화를 적용해 온 전문가 3인의 경험을 체계적으로 집약한 책입니다. 웹 성능, 웹 성능에 영향을 주는 요소, 웹 성능을 평가하는 방법과 최적화 트렌드 그리고 기술에 이르기까지 프런트엔드 최적화에 관한 전반적인 내용을 다루고 있습니다.

또한 단순히 개념과 이론을 설명하는 것에 그치지 않고 다양한 예제와 실습을 통해 직접 웹 사이트 성능을 평가하고 최적화를 진행해 볼 수 있도록 구성되었습니다. 따라서 이 책을 통해 웹 사이트 개발부터 운영까지 전 과정에 다양한 최적화 방법들을 적용하면 더욱 빠르고 기능적인 사이트를 만들고 운영할 수 있습니다.

김도균(Akamai Technologies 한국 법인 웹사업부 본부장)
우리는 인터넷 없이는 살아가기 힘든 세상을 살고 있습니다. VR, IoT, Connected Car 등 인터넷의 중요성은 더 커지고 있습니다. 조금이라도 더 빠르고 안정적인 웹 사이트를 개발하고 운영하는 것이 경쟁력이 된 시대적 변화 속에서 웹 최적화는 필수입니다. 하지만 웹 사이트 성능을 최적화하려면 프런트엔드, 백엔드, 네트워크 등에 대한 전반적인 이해와 노하우가 있어야 가능합니다. 이 책은 그 모든 노하우를 한 번에 이해할 수 있도록 구성되어 그동안 웹 사이트 최적화에 고민이 많았던 분들께 매우 훌륭한 길잡이가 될 것입니다.

노승헌(라인플러스, Service Engineering)
초기 인터넷은 다양한 프로토콜과 서비스가 존재하는 곳이었지만 지금의 인터넷은 그 자체가 웹(web)이라 불려도 어색하지 않게 되었습니다. 이 책은 HTTP의 기본기와 활용에 필요한 기술들을 알려줍니다. 뿐만 아니라 진화하고 있는 프로토콜의 이해를 바탕으로 웹 성능 최적화에 대한 가이드라인을 제시해 주고 있습니다. 넓은 범위의 기술을 부담스럽지 않은 깊이로 다루고 있어 초~중급 웹 개발자, 혹은 관련된 엔지니어링 업무를 수행하는 분들께 좋은 지침서가 될 것입니다.

강태희(네이버 뮤직나우 개발자)
이 책은 최적화 방안 중 많은 웹 개발자들이 놓치기 쉬운 프로토콜 최적화 방안에 대해서도 다루고 있습니다. 또한 새로운 프로토콜의 특징과 구조 및 동작 원리를 알기 쉽게 설명합니다. 실무 개발자들과 웹 개발을 공부하는 학생들에게 본인의 시스템에 적합한 최적화 방법과 더불어 성능 향상을 위한 통찰력을 제공하는 책입니다.

김형국(LG전자 디지털트랜스포메이션센터 팀장)
서비스 기획자 관점에서 웹 성능은 마케팅, 영업, 그리고 그 서비스를 사용하는 사용자의 경험, 심지어 백엔드와 파트너 시스템의 성능에까지 영향을 미칠 정도로 그 영향력이 큽니다. 이 책은 개발자를 위한 웹 프런트엔드의 성능 개선과 최적화를 주로 다루고 있는 듯 보입니다. 그러나 동시에 성능 개선에 대한 고민은 궁극적으로 사용자에게 보다 나은 서비스 경험을 제공하기 위한 기획자와 서비스 운영자들의 고민을 반영하고 있다는 점 역시 느낄 수 있었습니다. 따라서 이 책은 개발 과정에서 개발자들이 어떻게 고객과 소통해야 하는지를 함께 고민할 수 있는 좋은 지침서가 될 것을 확신합니다.

신대석(마이다스인 CTO)
현대의 웹은 고전적인 웹 사이트가 운영되는 플랫폼일 뿐만 아니라 화상 회의, 인공지능, VR, AR 등의 서비스와 사용자를 이어주는 범용 플랫폼입니다. 리치 콘텐츠는 증가했지만 사용자는 여전히 IT 서비스와 실시간에 가까운 상호 작용을 선호합니다. 국내 개발자들도 이제 웹 프런트엔드 성능 최적화에 관심을 가져야 하는데 이 책을 통해 빠르게 개념을 이해하고 다양한 최적화 기술을 적용해볼 수 있으리라 믿습니다.

강대명(benx 인프라 엔지니어)
단순히 코딩을 잘한다고 웹의 성능을 개선할 수 있는 것이 아니라 브라우저의 동작 원리를 제대로 이해해야 합니다. 이 책은 실용적인 웹 성능 개선 방법을 여러 측면으로 다루고 있습니다. 책을 읽으며 ‘우와! 웹 성능 최적화를 이렇게 자세하게 다룰 수 있구나’라고 느꼈고 제게도 많은 도움이 되었습니다. 독자 여러분께도 이 책이 도움이 되길 바랍니다.

이준영(카카오페이 백엔드 개발자)
백엔드 개발자로서 주로 비즈니스 로직의 알고리즘, 데이터베이스의 쿼리 속도, 동시성이나 병렬성 등 애플리케이션과 직접 관계된 부분에 초점을 맞춰 웹 성능을 개선하고 있습니다. 하지만 이 책을 읽으면서 ‘그동안 참 안일하게 개발해 왔구나' 하는 생각과 함께 부끄러움을 느꼈습니다. 이 책은 웹이 포괄하고 있는 요소들과 그 요소의 특징을 이용한 성능 개선의 방법을 제시합니다. 프런트엔드, 백엔드 개발자 모두에게 단순히 잘 동작하는 개발 방법을 넘어 더 나은 성능을 제공하는 웹 애플리케이션을 개발하는 방법을 알려줄 것입니다.

장재혁(삼성SDS 백엔드 개발자)
개발자로서 초기에 웹 사이트를 개발할 때에는 새로운 기술들을 이용해서 유행하는 UI/UX를 도입하는 데에만 관심을 가졌습니다. 하지만 대규모 서비스를 개발하고 유지 보수하면서 웹 사이트 최적화가 기본적으로 되어 있어야 이러한 기술이나 아키텍처 등이 의미 있다는 것을 알게 되었습니다. 이 책의 장점은 웹의 근간인 네트워크 프로토콜에서부터 폭넓게 웹 성능 최적화를 설명해 준다는 점입니다. 처음 웹 사이트 최적화에 대해 접하거나 실습을 통해 최적화를 적용해보고 싶은 분들께 이 책이 큰 도움이 될 것입니다.

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