[책 리뷰] 프론트엔드 성능 최적화 가이드 #내돈내산

[책 리뷰] 프론트엔드 성능 최적화 가이드

예전에 리액트 프로젝트를 하면서 성능 문제를 겪은 적이 있습니다.

development 모드라 빌드 전이기는 했지만, 성능이 너무 낮게 나왔었습니다.

성능을 보고 모든 팀원들이 충격에 먹었었는데, 지금 생각해보니 코드를 남발하기만 하고 최적화 작업을 해주지 않았었습니다.

처음에 어떻게 하면 프로젝트의 성능을 끌어 올릴 수 있는지 몰라 막막했는데, 이 책을 읽고 나서 앞으로는 기능 구현만 신경쓸 것이 아니라는 것을 깨닫게 되었습니다.

 

 

Lighthouse 분석

이 책은 제목 그대로 웹사이트의 성능을 리액트를 기준으로 최적화해주는 가이드북입니다.

이전에는 Lighthouse 의 전체적인 성능 수치만 확인했을 뿐 그 안의 요소 하나하나에 대한 분석은 하지 않았습니다.

이 책에서는 이런 Lighthouse 의 사용법을 제대로 알려줍니다.

 

 

이미지 사이즈 최적화

추천(Opportunity) 섹션과 진단(DIAGNOSTICS) 섹션에 나온 성능 개선사항들을 해결하는 과정이 상세히 나와있습니다.

프로젝트를 하면서 이미지를 최적화하라는 항목을 굉장히 많이 봐왔습니다.

이 책에서는 Unsplash 의 이미지 CDN 을 이용하고 있습니다.

CDN 을 이용할 시 이미지 사이즈를 어떻게 조절하는지, 어느 정도의 사이즈로 조절하면 좋은지에 대해서 친절하게 설명해주고 있습니다.

 

 

웹팩 번들 분석 툴

Webpack Bundle Analyzer 를 이용해서 어떤 라이브러리가 용량을 많이 차지하고 있는지 파악이 가능합니다.

이 라이브러리는 번들 파일 안에 있는 모든 패키지들을 나타냅니다.

패키지의 출처를 확인하고, 코드를 분할하여 코드의 질을 향상시킬 수 있습니다.

 

 

네트워크 탭, 성능 탭 분석

네트워크 탭과 성능 탭을 분석하여 컴포넌트의 지연 로딩과 이미지의 사전 로딩을 통해 프로젝트의 성능을 향상시킬 수 있습니다.

사용하지 않는 컴포넌트는 지연하여 웹 페이지의 첫 로딩을 빠르게 할 수 있습니다.

또한 이미지 모달창의 경우 이미지를 모달 창이 뜨기 전보다 먼저 로드하여 모달창의 성능을 향상시킬 수 있습니다.

 

 

브라우저의 렌더 과정

브라우저는 HTML 을 브라우저가 이해할 수있는 언어로 파싱하여 트리(tree)구조의 DOM 을 형성합니다.

CSS 또한 HTML 과 마찬가지의 과정을 거쳐서 CSSOM 이라는 트리 구조가 생성되게 됩니다.

이렇게 생성된 트리구조를 바탕으로 렌더 트리를 구성하고, 화면의 요소들의 크기와 위치를 계산하여 화면에 배치합니다.

그 후 레이어를 나눠 색을 채우고 최종적으로 레이어를 합쳐 브라우저에 렌더링하게 됩니다.

 

브라우저가 새로고침될 때마다 이러한 과정을 반복하는데, 최적화를 하기 위해서는 요소의 크기와 위치를 계산하여 배치하는 레이아웃 단계나 색을 입히는 페인트 단계를 건너뛰게 하는 코드를 사용해서 애니메이션 작업을 최적화할 수 있습니다.

 

 

이 책에서 아쉬웠던 점

PC의 환경에 따라 다르겠지만, 깃허브에 올라와 있는 예제와 Lighthouse 및 개발자도구의 상황이 매우 다릅니다.

그래서 책에 의지할 수 밖에 없었고, 분석을 제대로 진행할 수 없었다는 점입니다.

모든 부분에서 그런 것은 아니었지만 이 부분은 상당히 아쉬웠습니다.

 

 

총평

이 책은 프로젝트 성능을 최적화하는 방법에 대한 가이드를 제시하고 있습니다.

크롬 개발자 도구를 하나 하나 분석해서 어떻게 사이트를 분석하며, 어떻게 최적화를 하는지의 과정이 상세히 기술되어있습니다.

프로젝트의 성능에 대해서 고민하는 웹 개발자를 위한 좋은 책이라고 생각됩니다.

앞으로 이 책에서 읽은 것을 바탕으로 웹 페이지를 최적화하여, 사이트를 이용하는 사용자의 경험을 향상시킬 수 있도록 노력해봐야겠습니다.