들어가기에 앞서
해당 글은 프론트엔드 성능최적화에 대한 기본 지식을 눌러 담은 글입니다. 글의 내용이 미비하거나 틀린 부분이 있을 수 있습니다. 해당 레포지토리의 이슈에 수정되어야 할 내용을 등록해주시면 감사히 글에 반영하겠습니다.
들어가며
프론트엔드 개발자라면 응당 관심을 가질 수 밖에 없는 주제인 성능 최적화에 대해서 기술해보고자 합니다. 해당 포스팅은 성능최적화가 필요한 이유부터 성능 분석을 위한 분석 툴, 그리고 다양한 최적화 방법에 대해서 서술합니다. 또한, 해당 주제를 공부 하면서 당연하지만 잊고 있었던 것들에 대한 지식들도 상기하는 좋은 기회가 되어 이도 공유하고자 합니다.
우선 성능 최적화를 해야하는 이유가 무엇일까요?
성능최적화를 해야하는 이유
성능은 어느 측면에서 중요할까요? 사용자 경험 측면에서 성능이 저하된 웹페이지는 이탈률이 높아질 수 밖에 없습니다. 모든 페이지가 다 그려지기까지 그 억겁의 시간 속에 갇혀있을 필요는 없겠죠. 이미 유명한 이야기지만 핀터레스트는 로딩 시간을 40% 줄이면서 검색 유입률과 가입자수를 15% 늘렸다고 합니다. 성능을 최적화 하면 사용자에게 조금 더 나은 경험을 제공함으로써 체류율이 높아지고 이는 더 많은 수익을 창출할 수 있는 계기가 됩니다.
성능 최적화
웹 성능을 결정하는 요소는 크게 로딩 성능과 렌더링 성능으로 나눌 수 있습니다.
로딩 성능은 서버에 있는 웹 페이지와 웹 페이지에 필요한 리소스들을 다운로드 할 때의 성능을 일컫습니다. 따라서, 로딩 성능을 최적화 하는 가장 좋은 방법은 리소스를 줄이거나 크기를 줄이는 방법이 있겠습니다. 또한 코드를 분할하여 다운로드하거나 리소스를 적절한 타이밍에 다운로드하는 방법도 있겠습니다.
렌더링 성능은 화면을 그릴 때의 성능을 말합니다. 렌더링 성능을 개선하는 방법은 매우 다양하며 서비스에 적절한 최적화 기법을 사용하기 위해서는 브라우저의 동작 원리나 프레임워크의 라이프사이클 등의 기본 지식을 이해하고 있는 것이 중요합니다.
분석 툴
크롬 개발자 도구의 Network 패널
해당 패널은 웹 페이지에서 발생하는 모든 네트워크 트래픽을 알려주며, 어느 시점에서 리소스가 로드 되는지 그리고 리소스의 크기 등도 알 수 있습니다. 위의 사진은 네이버의 네트워크 패널입니다.
크롬 개발자 도구의 Performance 패널
해당 패널은 웹 페이지가 로드 될 때, 실행되는 모든 작업을 보여줍니다. 리소스가 로드 되는 타이밍 뿐만 아니라, 웹 페이지에서 실행되는 자바스크립트 또한 알 수 있습니다. 위의 사진은 네이버의 퍼포먼스 패널입니다.
크롬 개발자 도구의 Lighthouse 패널
Lighthouse는 구글에서 만든 툴로, 웹사이트의 성능 점수를 측정하고 개선점을 확인할 수 있습니다. 개발자는 각각의 웹 바이탈(web vitals)에서 제공하는 개선점을 통해 어느 부분을 개선해야하는지 가이드를 잡을 수 있습니다. 위의 사진은 네이버의 라이트하우스 패널입니다.
웹 바이탈(web vitals)이란? Lighthouse가 성능지표를 측정하기 위해 잡은 6가지의 지표(metrics)입니다. 성능 지표는 각각의 지표들에 가중치를 부여해서 지표를 측정합니다.
- First Contentful Paint(FCP)
- 페이지가 로드될 때 DOM 컨텐츠의 첫번째 부분을 렌더링하는데 걸리는 시간을 일컫습니다. 페이지에서 이미지나 텍스트가 처음 로드되었을 때의 시간을 말할 수 있겠습니다.
- Speed Index(SI)
- 콘텐츠가 시각적으로 표시되는 속도를 일컫습니다. 아무것도 없는 빈 화면에서 모든 컨텐츠가 뿅 하고 한번에 그려지기까지(A) 보다 아무것도 없는 화면에서 차례로 컨텐츠가 그려지기까지(B) 가 더 좋은 점수를 받습니다.
- Largest Contentful Paint(LCP)
- 페이지가 로드될 때 화면 내에 있는 가장 큰 DOM 요소가 렌더링 되기 까지 걸리는 시간을 일컫습니다.
- Time To Interactive(TTI)
- 페이지와 사용자가 상호작용이 가능한 시점까지의 시간을 일컫습니다. 즉, 자바스크립트의 초기 로딩이 완료되어서 사용자가 의미있는 행동을 취할 수 있는 시간까지를 말합니다.
- Total Blocking Time(TBT)
- 페이지의 첫번째 컨텐츠가 로드된 순간부터 시작하여 사용자 입력에 응답하지 않도록 차단된 시점까지의 시간을 일컫습니다. 즉, FCP와 TTI 사이의 시간을 일컫습니다.
- Cumulative Layout Shift(CLS)
- 페이지 로드 과정에서 발생하는 레이아웃 이동을 측정합니다. 레이아웃 이동이란 페이지가 로드되는 시점에서 예기치않게 컨텐츠의 위치나 크기가 순간적으로 바뀌는 것을 일컫습니다.
webpack-bundle-analyzer
webpack 을 통해 번들링된 파일이 어떤 코드와 라이브러리를 담고 있는지 확인할 수 있습니다. 이 툴을 통해 최종적으로 번들링된 파일들이 어느정도의 비중을 차지하고 있는지 확인이 가능합니다.