웹 페이지 최적화 과정: 크롬 Lighthouse 사용 경험 공유

안녕하세요. 오늘은 크롬 Lighthouse를 사용하여 웹 페이지의 성능을 최적화한 경험을 공유하려고 합니다.

이전에 웹 페이지의 로딩 속도를 3분에서 3초로 단축한 경험을 공유한 적이 있습니다.

 

하지만 그때에도 "정말? 어떻게? 결과는?"이라는 의문이 남아 있었습니다.

그래서 저는 크롬의 Lighthouse라는 훌륭한 도구를 사용하게 되었습니다.

 

Lighthouse 사용 방법

Lighthouse는 크롬 개발자 도구에서 사용 가능한 성능 측정 도구입니다.

F12(개발자 도구)를 열고 오른쪽 >> 버튼을 누르면 Lighthouse 탭이 보입니다.

개발자도구 상단

개발자도구 더보기

여기서 모바일 또는 데스크톱 환경을 선택해 페이지 성능을 검사할 수 있습니다.

저희 서비스는 데스크톱에 최적화된 서비스이기 때문에 데스크톱 환경을 선택했습니다.

크롬 Lighthouse

초기 성능 측정 결과

처음 Lighthouse로 측정했을 때, 페이지 로딩 속도는 3.6초였습니다.

시각적으로 로딩 과정을 확인할 수 있었지만, Performance 점수는 100점 만점에 34점으로 매우 낮은 결과가 나왔습니다. 어느 정도 낮을 것이라고 예상은 했지만, 34점은 생각보다 많이 낮아서 어떻게 개선해야 할지 고민이 되었습니다.

Lighthouse 리포트

 

성능 개선 과정

Lighthouse는 개선해야 할 부분에 대한 설명도 함께 제공해줍니다.

이를 바탕으로 문제를 해결하기 위해 몇 가지 시도를 했습니다.

 

원인 1: FCP 속도 개선

FCP(First Contentful Paint) 의 속도가 3.6초로 측정되었습니다. 3.6초가 엄청나게 느린 것은 아니었지만, 조금 더 빠르게 개선할 수 있는 방법이 있지 않을까 생각했습니다. 기존 데이터 가져오는 방식을 건별 요청에서 한 번에 묶어 요청하는 방식으로 수정하여 통신 효율을 높였습니다. 이로 인해 FCP 속도가 1.4초 ~ 1.6초로 크게 개선되었습니다.

원인 2: CLS 개선

CLS(Cumulative Layout Shift) 는 사용자가 페이지를 볼 때 레이아웃이 얼마나 갑작스럽게 변하는지를 나타내는 지표입니다.

저희 서비스에서는 데이터를 가져오는 과정이 오래 걸려, 데이터를 미리 보여주지 않고 로딩 화면을 먼저 보여주었습니다.

그러다 보니 데이터를 가져온 후 화면이 깜빡거리며 스크롤이 튀는 문제가 발생했습니다.

당시 CLS 점수는 0.708로 매우 낮았고, 이를 개선하기 위해 몇 가지 조치를 취했습니다.

• 이미지 크기 고정: 아이콘 이미지에 width와 height 속성을 추가하여 크기를 고정했습니다.
• UI 안정화: 메인 레이아웃이 display: none에서 block으로 바뀌는 것을 방지하기 위해, opacity를 0에서 1로 변경하도록 수정했습니다.

이러한 조치를 통해 CLS 점수가 0.03으로 크게 개선되었고, 최종적으로 67점의 성능 점수를 얻을 수 있었습니다.

lighthouse 개선후

 

향후 계획

이후 업데이트에서는 회원 확인 부분을 PHP에서 JavaScript로 옮겨, FCP를 1초 이내로 줄이는 것을 목표로 하고 있습니다.

이렇게 최적화 과정을 거치면서 웹 페이지 성능을 지속적으로 개선하고 있으며, Lighthouse를 활용한 진단과 개선 작업이 큰 도움이 되었습니다.