DEVOCEAN

<프론트엔드 성능 최적화 가이드> 책을 토대로 Openlab 웹 프론트엔드 최적화 스터디에 참여해 발표한 내용을 정리했습니다.

1장 블로그 최적화 서비스 최적화 챕터 중

• Lighthouse 활용

• 이미지 최적화

파트를 맡아 Lighthouse의 정의 및 로직, 사용 방법과 결과를 공유드리도록 하겠습니다.

Lighthouse란

Lighthouse의 정의는 아래와 같습니다.

Lighthouse is an opensource, automated tool for improving the quality of web pages.

이와 같이 웹 페이지의 성능을 개선하고, 측정하기 위해 Lighthouse를 다양한 방법으로 사용할 수 있습니다.

사용 방법은 아래와 같습니다.

• Chrome Devtools Lighthouse 탭

• Github에서 Lighthouse CLI 사용커스텀 활용, 튜닝 가능

• Node module로 사용 등

일반적으로 Chrome Devtools에 진입해 Lighthouse 탭으로 들어가 확인을 하지만,

추가로 CLI를 사용해 튜닝하거나, node modules로 추가해 node app을 만들어 사용할 수도 있습니다.

Lighthouse 평가 지표

Lighthouse는 총 4가지 지표들로 평가되는데요, 아래와 같습니다.

저희는 Performance 탭을 중심으로 알아볼 예정입니다.

PWA 항목은 더이상 Lighthouse 탭에서 평가되지 않지만, 최근까지 Lighthouse에서 평가해 주던 항목 중 하나입니다.

이와 같이, Performance 탭에서 측정된 5가지 항목을 종합해 점수를 내는 걸 확인할 수 있습니다.

각각의 평가 지표에 대해서 자세히 알아보겠습니다.

Performance

Lighthouse는 아래와 같이 총 5가지 항목으로 Performance 점수를 구성합니다.

FCP(First Contentful Paint) - 10%

FCP는 사용자가 페이지를 처음 탐색한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점까지의 시간을 측정합니다.

Speed Index - 10%

속도 색인은 페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도를 측정합니다.

TBT(Total Blocking Time) - 30%

TBT는 페이지가 마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 응답하지 못하도록 차단된 총 시간을 측정합니다.

LCP(Largest Contentful Paint) - 25%

사용자가 처음 페이지로 이동했을 때를 기준으로 표시 영역에 표시되는 가장 큰 이미지, 텍스트 블록, 동영상 등의 렌더링 시간을 측정합니다.

추가 자료

Cumulative Layout Shift - 25%

페이지의 전체 수명 주기 동안 발생하는 모든 예상치 못한 레이아웃 변경에 대한 최대 버스트의 레이아웃 변경 점수를 의미합니다.

추가 자료

이렇게 Lighthouse의 평가 항목에 대해서 알아보았습니다.

Lighthouse가 점수를 내고, 개선을 위해 제안하는 항목들을 잘 이해하고 활용하면 웹 성능을 개선할 수 있습니다.

Lighthouse 실행

자 이제 블로그 웹 사이트에서 직접 Lighthouse를 실행해보고, 측정 결과를 토대로 성능 향상 방법을 찾아 보겠습니다.

우측에는 개선하기 위한 방법들이 적혀 있습니다.

'Properly size images'문제를 개선해, 성능을 향상해 보겠습니다.

developer tab에서 확인하면 img를 unsplash에서 불러오는 것을 확인할 수 있고,

렌더링된 사이즈는 120 x 120px인데 비해 1200 x 1200px의 이미지를 불러오는 것을 확인할 수 있습니다.

이를 해결하기 위해 현재 블로그 앱에서 이미지를 불러오는 방법을 살펴보도록 하겠습니다.

위와 같은 로직으로 불러옴을 확인했습니다. 아래와 같은 fetch를 호출하는 부분을 살펴 보면

위와 같이 이미지를 불러오고 있습니다.

실제 필요한 이미지의 사이즈인 120 x 120px로 불러오는 코드로 고쳐야 하는데, 레티나 디스플레이 등 더 섬세한 화면 표시를 하는 화면을 고려해, 240 x 240px로 불러오도록 코드를 고쳐 보겠습니다.

코드를 고치고, 변경된 코드 성능이 향상되었는지 살펴보겠습니다.

Network 탭에서 Img payload를 확인해보면 payload가 줄면서 Content download 시간을 포함해 더 적은 용량을 빠른 시간 내에 불러올 수 있었고, 이는 결과적으로

Lighthouse 탭의 분석에서도 'Properly size images'가 사라진 것을 확인할 수 있습니다.

이와 같이 Lighthouse를 사용해 웹 페이지의 Performance에 영향을 미치는 요인과 점수를 확인할 수 있었고,

점수를 향상시키기 위한 분석들을 얻었습니다.

이러한 분석을 토대로 개선하기 위해 코드를 살펴보고, payload를 줄이기 위해 이미지 사이즈를 조절하며 실제로 코드 수준에서 성능을 개선하는 과정까지 살펴보았습니다.

출처

웹 프론트엔드 성능 최적화 가이드 예제

Ligthouse Github

Chrome developer

Web.dev