웹이 가벼워지면 사용자의 만족도는 올라간다
웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초로 느려지면 사용자의 이탈률은 32% 증가합니다. 많은 사용자들은 느린 웹 서비스를 기다려 주지 않습니다. 이런 사용자를 머무르게 하고, 유도된 행위를 하게 하려면 서비스 성능이 필수로 뒷받침되어야 합니다.
구글은 오래전부터 ‘웹 성능’이라는 주제에 관심을 갖고, 성능 향상을 위해 다양한 시도를 해 왔습니다. 사람들은 질문에 대한 답을 가능한 한 빨리 찾고자 하며, 실제로 페이지 속도에 신경 쓴다는 사실을 연구를 통해 증명하기도 했습니다. 그 과정에서 Lighthouse와 AMP 같은 기술을 개발하고, 성능 정책을 주기적으로 업데이트 하며 웹 개발자들에게 성능 최적화를 권장하고 있습니다.
또한 구글은 개발자들이 권장 사항을 반드시 따르게 하기 위해, 로딩 속도가 빠른 웹 페이지의 검색 결과를 상단에 표시합니다. 사용자가 웹사이트에 방문해서 떠나가지 않게 하는 것뿐만 아니라, 애초에 웹사이트에 방문하도록 하는 데에도 ‘성능’이 영향을 미친다는 뜻입니다.
프론트엔드 개발자의 경험치를 높이는 단 한 권의 가이드
프론트엔드 개발자라면 이제 기능 구현뿐만 아니라 ‘웹 성능 최적화’를 반드시 고민해야 합니다. 프론트엔드 개발 분야는 등장 이후 매우 빠른 속도로 발전하였습니다. 앵귤러, 리액트, 뷰 등 프론트엔드 개발을 돕는 기술이 대거 등장하여 성장을 가속화했습니다. 웹 개발에 어느 정도 익숙한 개발자라면 처음 구현해 보는 기능도 검색과 참고 자료를 통해 어렵지 않게 구현해 낼 수 있을 것입니다. 반면 ‘성능 최적화’라는 주제는 비교적 최근에야 주목받고 있어, 참고 자료가 많지 않습니다.
《프론트엔드 성능 최적화 가이드》는 어디서도 알려 주지 않는 실전 웹 성능 최적화 기법을 다룹니다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르며, 최적화 기법도 매우 다양하기 때문에 정형화된 규칙은 없습니다. 저자는 성능 최적화를 ‘어떻게’ 배우는 게 좋은가에 대해 원론적인 고민을 한 끝에, 이론을 공부하기보다는 예제 서비스를 직접 분석하고 실습하는 방식이 가장 효과적이라는 결론을 내렸습니다. 가장 흔히 개발하고 접하는 4가지 실습 서비스를 통해, 최적화 기법뿐만 아니라 브라우저 동작 원리와 성능 측정 및 분석 방법을 자연스럽게 익히도록 구성했습니다.
이 책에서 다루는 내용
블로그 서비스 최적화
- 이미지 CDN을 활용한 이미지 사이즈 최적화
- 코드 분할과 컴포넌트 지연 로딩
- 텍스트 압축
- 병목 코드 최적화
올림픽 통계 서비스 최적화
- CSS 애니메이션 최적화
- 컴포넌트 지연 로딩
- 컴포넌트 사전 로딩
- 이미지 사전 로딩
홈페이지 최적화
- 이미지 사이즈 최적화
- 동영상 사이즈 최적화
- 폰트 최적화
- 캐시 최적화
- 불필요한 CSS 제거
이미지 갤러리 서비스 최적화
- 이미지 지연 로딩
- 레이아웃 이동 피하기
- 리덕스의 useSelector 렌더링 최적화
- 메모이제이션의 개념과 최적화
- 병목 함수 로직 개선
실습을 통해 웹에서 주로 발생하는 문제 유형과 그에 대한 해결 방법을 명료하게 제시한다.
김성준, 네이버 엔지니어
프론트엔드 성능의 중요성과 최적화 기법에 익숙하지 않은 독자들에게 길라잡이가 될 책이다.
서백민, 라인플러스 프론트엔드 엔지니어
프론트엔드 개발에서 성능 최적화는 선택이 아니라 필수다. 이 책은 한 번쯤 고민해 봤을 최적화 포인트와 해결 방법을 쉽게 설명한다.
유태규, 라인비즈플러스 엔지니어
사용자에게 seamless한 경험을 선사하고 싶다면 이 책이 좋은 가이드가 될 것이다.
이준범, 해치랩스 엔지니어
웹 성능계의 백종원 레시피 같은 실전 레시피
이환섭, 카카오 모빌리티 프론트엔드 엔지니어
지금껏 본 적 없는 실전 웹 페이지 분석 접근
최승진, 두나무 백엔드 엔지니어
《프론트엔드 성능 최적화 가이드》는 다음 서점에서 구입하실 수 있습니다.
그림 출처: https://icons8.com/
도서출판 인사이트 