Lighthouse 활용해보기

Lighthouse

구글의 오픈소스 품질 검사 자동화 툴이다. 

검사할 페이지 url을 Lighthouse에 전달하면, 해당 페이지에 대한 여러가지 검사를 실행한다.

이 툴을 사용하면 현재 페이지의 성능, 접근성, 웹 표준 준수 여부, 검색 최적화 그리고 PWD(Progressive Web App) 현재 페이지가 모바일 앱에서도 잘 작동하는지를 확인하는 체크리스트를 리포트로 제공해준다.

해당 사항들에 대해서 문제점을 파악하고 개선 방향을 제시해준다.

 

Lighthouse 워크플로우

1. 검사할 페이지 url 을 라이트하우스에게 알려준다.
   • 브라우저의 경우 url 을 입력해 페이지에 접속한 뒤 개발자 도구에서 Lighthouse를 선택하여 실행할 수 있다.
   • Node CLI 환경에서는 Lighthouse 를 설치하고 명령어와 url 을 같이 입력한다.
2. Lighthouse가 해당 페이지에 대한 여러가지 성능 지표를 검사하여 리포트를 제공한다. 이러한 지표들을 메트릭이라고 부른다! 성능 측정 메트릭에는 아래와 같은 종류가 있다.
   • First Contentful Paint : FCP 페이지 접속시 DOM 의 첫 부분을 렌더링하는데 걸리는 시간을 측정한다. 페이지 로딩 속도가 얼마나 걸리는지 측정하는 것이고, 1.8초 이하로 내려가면 BEST 이다.
   • Largest Contentful Paint : LCP FCP가 첫 부분이 렌더링 되는 시간을 파악한다면 LCP는 뷰포트를 차지하는 가장 큰 컨텐츠 - 주요 컨텐츠가 보여지는 시간을 측정한다.
   • Speed Index 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표현되는지 측정한다.
   • Time to interactive TTI : 페이지 로드 시점부터 사용자 상호작용이 가능한 시점까지를 측정한다.
   • Total Blocking Time 페이지와 유저가 상호작용까지 막혀있는 시간이 얼만큼 되는지를 측정하는 지표이다. FCP 부터 TTI 까지의 작업들을 기록해서 TBT를 측정한다.
   • Cumulative Layout Shift CLS: 웹페이지의 불안정한 레이아웃 변경이 얼만큼 일어나는지 측정한 값이다. 갑작스러운 레이아웃의 변화는 사용자의 잘못된 클릭을 유도할 수 있기 때문에 측정한다.
3. 리포트에서는 측정된 각 항목의 점수와 페이지 성능을 개선할 수 있는 opportunities 를 제공한다.

Lighthouse 활용해보기

내가 성능 지표를 확인할 사이트는 https://zum.com/ 이다. Lighthouse 성능 측정 결과 아래와 같이 나왔다.

각 진단 부분에 대해서 어떤 내용인지, 어떻게 해결해야 하는지 알아보자! 

 

스크롤 성능 개선에 패시브 리스너를 사용하지 않음❓

Does not use passive lisneners to improve scrolling performance

터치 및 휠 이벤트 리스너를 'passive'로 표시하면 페이지 스크롤 성능을 개선할 수 있습니다. 

 

Passive Event Listener 란 브라우저의 기본 동작에 영향을 미치지 않는 이벤트 리스너를 의미한다. 

주로 스크롤이 버벅거리게 하지 않게 하기 위해서 사용된다! 브라우저의 기본 동작이 블록킹되지 않기 때문에 비동기적으로 동작하며 매끄러운 스크롤링을 할 수 있게 된다.

document.write() 피하기

연결이 느린 사용자의 경우 `document.write()`에서 동적으로 삽입된 외부 스크립트로 인해 페이지 로드가 몇십 초까지 지연될 수 있습니다.

 

document.write 는 html에 내용을 추가하기 위해서 사용되는 오래된 메서드이다. 이 메서드 말고 다른 메서드를 사용하는 것이 좋다.

이미지 요소에 width 및 height 가 명시되어 있지 않습니다

이미지 요소에 명시적인 너비 및 높이를 설정하여 레이아웃 변경 횟수를 줄이고 누적 레이아웃 변경을 개선합니다.

 

크기 지정 여부에 따라 브라우저 렌더링 과정이 달라진다. width, height 속성이 없는 경우 html 코드를 먼저 다운로드 하고 그 후에 이미지를 다운로드 하기 때문에 불필요한 레이아웃 변동이 생긴다.

 

width, height 속성이 지정되면 브라우저가 이미지를 받기 전에 이미 공간이 계산되어 있기 때문에 레이아웃 변동 없이 이미 마련된 공간에 이미지를 그리게 된다.

효율적인 캐시 정책을 사용하여 정적인 애셋 제공하기

캐시 수명이 길면 페이지를 반복해서 방문하는 속도가 빨라질 수 있습니다. 

 

캐시의 수명을 적절하게 조절해서 요청의 횟수가 너무 과도하지 않게, 리소스가 적절히 업데이트 될 수 있게 조절해야한다.