올해 첫 챕터 (1-2월) 나의 one goal은 내가 개발하고 있는 웹사이트 성능을 개선하는 것인데 google pageSpeed Insight와 lighthouse로 성능을 측정하고, 개선한 후 다시 비교해보기로 했다.
프론트엔드 성능 최적화 가이드 책(우측)과 구글링한 자료를 통해서
lightHouse의 지표들을 이해하고 개선해보는 작업을 진행하려고 한다!
lighthouse 에서 검사를 할 때 총 세 가지 모드를 선택할 수 있는데,
Navigation 모드는 초기 페이지 로딩 시 발생하는 성능 문제를 분석하는 모드이고,
Timespan 모드는 사용자가 정의한 시간동안 발생한 성능 문제를 분석하는 모드이고,
Snapshot은 현재 상태의 성능 문제를 분석하는 모드이다.
내가 해결하고 싶은 문제는 웹페이지 초기 로딩시간을 줄이는 것이기에
Navigation 모드(기본 모드)를 기준으로 검사를 진행했다.
모바일페이지 lighthouse 검사 결과
모바일의 경우 CPU 성능을 4x로 제한하여 검사하기 때문에 모바일 점수가 더 낮게 나온다. (검사 결과 하단의 Emulated Desktop 정보 참고) 현재 점수는 Performance 48점, Accessibility 78점, Best Practice 95점, SEO 92점이다.
Best Practices는 보안측면과 최신 표준에 중점을 두고 분석한 지표인데 green zone이 나왔고, SEO 또한 green zone이 나왔다.
로딩 성능을 개선해서 Performance를 높이고, 접근성을 향상 시키는 것이 주요한 과제가 될 것 같다!
Performance 개선
48점이라는 Performance 점수는 아래의 Metrics(FCP, LCP, TBT, CLS, SI) 들에 가중치를 적용하여 평균을 낸 점수인데, 이 metrics들을 웹 바이탈(web Vitals) 라고 한다. 결과를 살펴보니 CLS 지표를 제외하고 모두 red zone 인데 이를 어떻게 향상 시킬 수 있을지 웹 바이탈을 하나씩 살펴보면서 이해하고 개선해보자.
FCP | First Contentful Paint
First Contentful Paint 라는 이름에서 알 수 있듯이, 웹페이지가 로드될 때 DOM 컨텐츠의 첫번째 부분을 렌더링하는데 걸리는 시간에 관한 지표이고, 이 점수는 Performance 점수를 계산할 때 10%의 가중치를 갖는다.
나의 검사 결과에서 FCP는 2.1s 인데, 이는 첫 컨텐츠가 뜨기까지 2.1초가 걸렸다는 의미이다. (다만 lighthouse 검사의 경우 CPU와 네트워크 속도를 제한한 상태에서 측정을 하기 때문에 실제 페이지가 뜨는 속도보다는 더 느릴 것이다)
SI | Speed Index
SI는 페이지 로드 중에 컨텐츠가 시각적으로 표시되는 속도를 나타내는 지표이고, 이 점수 또한 Performance 점수를 계산할 때 10%의 가중치를 갖는다.. SI 지표를 이해하기 위해서 같은 컨텐츠를 표시하는데 같은 시간이 걸리는 두 개의 웹사이트 중 어떤 웹사이트가 SI 점수가 더 높을지 생각해보자.
A 웹사이트 : 모든 컨텐츠가 표시되는 데 총 3초 소요. 1초마다 조금씩 이미지가 순차적으로 표시됨.
B 웹사이트 : 모든 컨텐츠가 표시되는 데 총 3초 소요. 3초가 됐을때 모든 이미지가 한번에 표시됨
두 웹 페이지는 모든 컨텐츠를 표시하는데 동일하게 3초가 소요되었지만, A 페이지의 일부 컨텐츠는 B 페이지보다 먼저 표시되었기 때문에 A페이지가 B페이지보다 전반적으로 더 빠른 속도로 로드되었다고 계산되며, 더 높은 SI 점수를 받게 된다.
LCP | Largest Contentful Paint
Largest 라는 키워드 처럼 페이지가 로드될 때 화면 내의 가장 큰 이미지나 텍스트 요소가 렌더링 되기까지 걸리는 시간을 나타낸다. 이 지표는 Performace 총점을 계산할 때 25%의 꽤 큰 가중치를 갖는 지표이다.
나의 검사 결과에서 LCP는 12.7s 인데, 이는 가장 큰 요소가 렌더링되는데 12.7초가 걸렸다는 의미이다. (위에서 언급한 바와 같이 lighthouse 검사는 제한된 CPU와 네트워크 환경을 사용한다는 것을 감안하자!)
TTI | Time To Interactive (Deprecated)
Time To Interactive 도 단어 그대로 사용자가 페이지와 상호작용(클릭과 같은 사용자 입력) 이 가능한 시점까지 걸리는 시간을 측정한 지표이다. TTI 전에는 화면의 요소들은 나타나더라도 사용자가 클릭하거나 키보드를 입력하는 등의 액션을 하더라도 동작하지 않는다. TTI 지표는 총점 계산시 10%의 가중치를 가졌으나 이제 더이상 web vital 지표에 포함되지 않는다! (참고)
TBT | Total Blocking Time
Total Blocking Time은 페이지가 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표이다. 컨텐츠가 로드되었지만 아직 입력은 받을 수 없는 상태이므로 FCP와 TTI 사이의 시간 동안 측정하며 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합한다. TBT는 Performace 총점을 계산할 때 30%라는 가장 큰 가중치를 갖는다.
CLS | Cumulative Layout Shift
Cumulative Layout Shift 는 페이지 로드 과정에서 발생하는 예상치 못한 레이아웃 이동을 측정한 지표이다. 여기서 레이아웃 이동이란 요소의 위치나 크기가 순간적으로 변하는 것을 의미한다. CLS는 Performace 총점을 계산할 때 15%의 가중치를 갖는다.
Diagnostics 섹션
하단의 Diagnotics 섹션은 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여주고 있고, 특정 웹 바이탈 지표과 관련된 항목들을 볼 수 있도록 해주기 때문에 서비스에서 어떤 부분을 개선해야 할 지 파악하는 데 도움을 준다.
이제 각 지표에 대해 이해하였으니, 본격적으로 성능을 개선하는 시간을 가져보자! 이는 다음 포스팅에서!
댓글