웹 성능 최적화는 왜 중요할까요?
웹 성능의 최적화를 통해 UX(사용자 경험)을 향상시킬 수 있고 이를 통해 체류시간이 길어진다면
이탈률 감소, 전환율 상승을 기대할 수 있기 때문입니다.
그리고 이것은 곧 수익으로 연결됩니다.
웹 성능을 결정하는 요소
- 로딩
- 다운로드하는 리소스의 수, 크기를 줄여 개선할 수 있어요.
- 코드분할을 이용해서 나누어서 다운로드하거나, 리소스에 우선순위를 부여해 필요한 리소스부터 다운로드를 받아 개선할 수 있어요.
- 렌더링
- 렌더링을 개선하는 방법은 매우 많고 다양해요.
- 자바스크립트 코드의 영향을 많이 받기 때문에 효율적인 코드작성을 해야해요.
도구
Lighthouse
본인이 작성했던 프로젝트를 개발모드로 실행시키고 개발자도구 > Lighthouse > 아래 이미지처럼 Navigation, Desktop, Performance만 체크하고 Analyze page load를 클릭하여 데스크탑의 로딩에서 발생하는 성능 문제 분석을 시작해 봅시다.
클릭 후 아래와 같이 결과를 받을 수 있는데요.
아래 이미지의 6가지 지표를 Web Vitals(웹 바이탈)이라고 불러요.
각 지표의 의미를 알아보도록 할게요.
1. First Contentful Paint (FCP): 브라우저가 DOM의 콘텐츠의 첫 부분을 렌더링 하는데 걸린 시간이에요.
2. Speed Index (SI): 페이지를 로드하며 콘텐츠가 표시되는 속도 (A, B 페이지 모두 총 3초가 걸려 렌더링이 완료되었다 하더라도
A페이지는 1초에 33.33%씩, B페이지는 3초에 100%를 렌더링 했다면 A가 높은 점수를 받아요.)
3. Largest Contentful Paint (LCP): 페이지 로드될 때 가장 큰 콘텐츠가 렌더링 되기까지 걸리는 시간을 나타내요.
4. Time to Interactive (TTI): 유저가 페이지와 인터랙션이 가능한 시점까지 걸리는 시간을 의미해요.
5. Total Blocking Time (TBT): 유저의 입력에 응답하지 않도록 차단된 시간을 나타내요. FCP 와 TTI 사이 시간동안 발생해요.
6. Cumulative Layout Shift (CLS): 페이지 로드 중 예상하지 못한 레이아웃 이동을 측정한 지표에요.아래로 스크롤을 내리면 개선할 수 있는 제안과 분석 환경에 대해 자세하게 볼 수 있어요.
성능 분석 환경에서
Emulated Desktop with Lighthouse 부분에 커서를 올려두면 CPU throttling에 1x볼 수 있습니다.
아래 표를 확인해보면 Hight-End Desktop에 매치되는 것을 확인할 수 있고 분석을 mobile로 했다면 2x, 4x, 10x 등으로 확인할 수 있겠네요.
Network throttling에 커서를 올려두면 10,240 Kbps throughput (Simulated)를 확인할 수 있는데요.
네트워크 속도를 제한하고 로드성능을 측정했다는 의미이고 그렇기 때문에 그냥 로드를 한 경우보다 분석을 한 경우가 속도가 더 느렸습니다.
보통 모바일로 하면 더 낮은 수치가 나옵니다.
프론트엔드 개발자의 성능 최적화 1편은 Lighthouse에 대해 알아보는 시간을 가졌습니다.
2편에서는 위 이미지에서 확인 했던 로드 성능에 도움이되는 제안, 성능 개선에 대한 정보를 살펴보며 시작하는 것으로 시작하도록 하겠습니다.
감사합니다.
