디자이너를 위한 웹 성능 최적화 기법

디자이너라면 아름다움과 성능 사이에서 선택의 순간을 만나게 된다. 좋은 내용과 레이아웃, 이미지, 상호작용은 사용자를 매료시키는 핵심적 요소이며 각각의 요소는 페이지 로딩 시간과 최종 사용자 경험에 막대한 영향을 미친다. 이 책은 중요한 디자인 결정을 위한 테스트와 벤치마크 방법, 페이지 속도를 고려해 프로젝트에 접근하는 방법을 실제 사례 중심으로 소개하고 있다.

1장 성능이 곧 사용자 경험이다 사용자 경험이 사이트의 인상에 미치는 영향 - 재방문하는 사용자 - 검색엔진 순위 모바일 사용자에게 미치는 영향 - 모바일 네트워크 - 모바일 사용 패턴 - 모바일 하드웨어 디자이너가 성능에 미치는 영향 2장 페이지 속도의 원리 브라우저가 콘텐츠를 렌더링하는 방법 - 요청 - 연결 페이지 크기 체감 성능 - 중요 렌더링 경로 - 쟁크 페이지 속도에 영향을 미치는 다른 요소 - 지리 - 네트워크 - 브라우저 3장 이미지 최적화 이미지 포맷 고르기 - JPEG - GIF - PNG - 추가 압축 이미지 요청 대체하기 - 스프라이트 - CSS3 - 데이터 URI와 베이스64로 인코딩한 이미지 - SVG 이미지 최적화를 위한 계획 수립과 수행 - 정기 검사 일정 잡기 - 스타일 가이드 만들기 - 다른 이미지 제작자 멘토링하기 4장 마크업과 스타일 최적화 HTML 청소하기 - 디비티스 - 문맥 기반 - 접근성 - 프레임워크와 그리드 CSS 정리하기 - 사용하지 않는 스타일 - 스타일을 합치고 줄이기 - 스타일시트 이미지 정리하기 - 특이성 제거하기 웹 글꼴 최적화 재사용할 수 있는 마크업 만들기 - 스타일 가이드 마크업에 대한 추가 고려사항 - CSS와 자바스크립트 로딩 - 최소화와 GZIP - 자원 캐싱하기 5장 반응형 웹 디자인 전략적 콘텐츠 로딩 - 이미지 - 글꼴 접근 방법 - 프로젝트 문서화 - 모바일 퍼스트 - 모든 것 측정하기 6장 반복적 성능 측정 브라우저 도구 - 와이슬로우 - 크롬 개발자 도구 모의 테스트 실제 사용자 모니터링 시간에 따른 변화 7장 아름다움과 성능 사이 균형 찾기 성능 작업을 워크플로의 일부로 만들기 성능 예산을 이용해 새로운 디자인 시도하기 성능을 염두에 두며 디자인 실험하기 8장 조직 문화 바꾸기 성능 경찰과 성능 문지기 상향식 관리 - 비즈니스 지표에 미치는 영향 - 사이트 속도 체감하기 디자이너, 개발자와 일하기 - 교육하기 - 역량 강화