웹이 가벼워지면 사용자의 만족도는 올라간다

웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초로 느려지면 사용자의 이탈률은 32% 증가합니다. 많은 사용자들은 느린 웹 서비스를 기다려 주지 않습니다. 이런 사용자를 머무르게 하고, 유도된 행위를 하게 하려면 서비스 성능이 필수로 뒷받침되어야 합니다.

구글은 오래전부터 ‘웹 성능’이라는 주제에 관심을 갖고, 성능 향상을 위해 다양한 시도를 해 왔습니다. 사람들은 질문에 대한 답을 가능한 한 빨리 찾고자 하며, 실제로 페이지 속도에 신경 쓴다는 사실을 연구를 통해 증명하기도 했습니다. 그 과정에서 Lighthouse와 AMP 같은 기술을 개발하고, 성능 정책을 주기적으로 업데이트 하며 웹 개발자들에게 성능 최적화를 권장하고 있습니다.

또한 구글은 개발자들이 권장 사항을 반드시 따르게 하기 위해, 로딩 속도가 빠른 웹 페이지의 검색 결과를 상단에 표시합니다. 사용자가 웹사이트에 방문해서 떠나가지 않게 하는 것뿐만 아니라, 애초에 웹사이트에 방문하도록 하는 데에도 ‘성능’이 영향을 미친다는 뜻입니다.

'뒤로 가기' 버튼을 누르고 싶나요?

프론트엔드 개발자의 경험치를 높이는 단 한 권의 가이드

프론트엔드 개발자라면 이제 기능 구현뿐만 아니라 ‘웹 성능 최적화’를 반드시 고민해야 합니다. 프론트엔드 개발 분야는 등장 이후 매우 빠른 속도로 발전하였습니다. 앵귤러, 리액트, 뷰 등 프론트엔드 개발을 돕는 기술이 대거 등장하여 성장을 가속화했습니다. 웹 개발에 어느 정도 익숙한 개발자라면 처음 구현해 보는 기능도 검색과 참고 자료를 통해 어렵지 않게 구현해 낼 수 있을 것입니다. 반면 ‘성능 최적화’라는 주제는 비교적 최근에야 주목받고 있어, 참고 자료가 많지 않습니다.

《프론트엔드 성능 최적화 가이드》는 어디서도 알려 주지 않는 실전 웹 성능 최적화 기법을 다룹니다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르며, 최적화 기법도 매우 다양하기 때문에 정형화된 규칙은 없습니다. 저자는 성능 최적화를 ‘어떻게’ 배우는 게 좋은가에 대해 원론적인 고민을 한 끝에, 이론을 공부하기보다는 예제 서비스를 직접 분석하고 실습하는 방식이 가장 효과적이라는 결론을 내렸습니다. 가장 흔히 개발하고 접하는 4가지 실습 서비스를 통해, 최적화 기법뿐만 아니라 브라우저 동작 원리와 성능 측정 및 분석 방법을 자연스럽게 익히도록 구성했습니다.

인사이트 블로그의 성능 점수

이 책에서 다루는 내용

블로그 서비스 최적화
  • 이미지 CDN을 활용한 이미지 사이즈 최적화
  • 코드 분할과 컴포넌트 지연 로딩
  • 텍스트 압축
  • 병목 코드 최적화

올림픽 통계 서비스 최적화
  • CSS 애니메이션 최적화
  • 컴포넌트 지연 로딩
  • 컴포넌트 사전 로딩
  • 이미지 사전 로딩

홈페이지 최적화
  • 이미지 사이즈 최적화
  • 동영상 사이즈 최적화
  • 폰트 최적화
  • 캐시 최적화
  • 불필요한 CSS 제거

이미지 갤러리 서비스 최적화
  • 이미지 지연 로딩
  • 레이아웃 이동 피하기
  • 리덕스의 useSelector 렌더링 최적화
  • 메모이제이션의 개념과 최적화
  • 병목 함수 로직 개선

실습을 통해 웹에서 주로 발생하는 문제 유형과 그에 대한 해결 방법을 명료하게 제시한다.

김성준, 네이버 엔지니어

프론트엔드 성능의 중요성과 최적화 기법에 익숙하지 않은 독자들에게 길라잡이가 될 책이다.

서백민, 라인플러스 프론트엔드 엔지니어

프론트엔드 개발에서 성능 최적화는 선택이 아니라 필수다. 이 책은 한 번쯤 고민해 봤을 최적화 포인트와 해결 방법을 쉽게 설명한다.

유태규, 라인비즈플러스 엔지니어

사용자에게 seamless한 경험을 선사하고 싶다면 이 책이 좋은 가이드가 될 것이다.

이준범, 해치랩스 엔지니어

웹 성능계의 백종원 레시피 같은 실전 레시피

이환섭, 카카오 모빌리티 프론트엔드 엔지니어

지금껏 본 적 없는 실전 웹 페이지 분석 접근

최승진, 두나무 백엔드 엔지니어

《프론트엔드 성능 최적화 가이드》는 다음 서점에서 구입하실 수 있습니다.

YES24 | 알라딘 | 교보문고

그림 출처: https://icons8.com/