사이트 성능 측정 (lighthouse)

사이트의 속도 개선을 위해서는 먼저 성능 측정 부터 해야 한다.

여러 가지 성능 측정 방식들이 있지만, 그 중에서 사용하기 편하고 분석이 자세히 되는

구글 lighthouse 를 사용하는 방식을 포스팅 하려고 합니다.

​

lighthouse : 구글이 만든 성능측정 라이브러리

https://developers.google.com/web/tools/lighthouse/?hl=ko

Lighthouse  |  Tools for Web Developers  |  Google Developers

 

이용방법

세가지 방식을 제공해주고 있습니다

​첫번째. 크롬 개발자 도구의 audit 을 사용

두번째. 크롬 확장 프로그램으로 설치해서 사용

세번째. node 의 라이브러리로 사용

 

첫번째. 크롬 개발자 도구의 audit 을 사용

크롬 브라우저를 사용하시면 분석하고 싶은 사이트로 이동하시고

네이버를 lighthouse 로 측정해보자

F12 를 눌러서 크롬개발자도구를 띄웁니다

크롬 개발자도구 - Audits

개발자도구의 메뉴중에 Audits 을 누릅니다

크롬 개발자 도구 - Audits

 

옵션으로

Device : 모바일 / 데스크탑 환경 중 선택

Audits : 5가지 항목을 선택

Throttling : 클라이언트 환경 선택 (사용자의 단말기가 안좋다는 가정으로 선택할 수 있다)

 

Run Audit 을 누르면 선택한 옵션을 기준으로 측정결과를 확인 할 수 있습니다

네이버 lighthouse 측정결과 입니다

 

Download report 로 리포트를 저장 할 수 있고

view Trace 를 눌러서 Performance 를 확인할 수 있습니다

크롬 개발자 도구 - Performance

 

두번째. 크롬 확장 프로그램으로 설치해서 사용

첫번째 방식과 유사하지만 크롬 확장 프로그램으로 설치해서 측정 할 수 있습니다

크롬 앱스토어에서 lighthouse 를 검색하고

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ko

Lighthouse

설치 합니다

크롬 브라우저의 오른쪽 상단에 lighthouse 아이콘이 생깁니다

​네이버로 접속해서 lighthouse 아이콘을 누르면 Generate report 로 보고서를 만들 수 있습니다

크롬 확장 프로그램으로 lighthouse 를 사용할 수 있습니다

옵션에서 측정 항목도 선택할 수 있습니다

열심히 등대 불이 나오면서 분석하고

아까와는 UI 가 다른 리포트를 생성해줍니다

내용은 View Trace 만 없고 나머지는 동일합니다

크롬 lighthouse extension

세번째. node 의 라이브러리로 사용

node 라이브러리로 설치해서 커맨드 라인으로 분석하는 방법입니다

​node 10버전 이상을 설치되어 있어야 합니다

npm install -g lighthouse

글로벌로 lighthouse 를 설치해줍니다 ( 글로벌로 설치하는 게 싫으면 npx 로 lighthouse 를 실행해줍니다 )

lighthouse https://www.naver.com

lighthouse 의 help 를 찾아보면 여러가지 방법들이 나옵니다

lighthouse --help

Examples:
  lighthouse <url> --view                                                        Opens the HTML report in a browser after the run completes
  lighthouse <url> --config-path=./myconfig.js                                   Runs Lighthouse with your own configuration: custom audits, report
                                                                                 generation, etc.
  lighthouse <url> --output=json --output-path=./report.json --save-assets       Save trace, screenshots, and named JSON report.
  lighthouse <url> --emulated-form-factor=none --throttling-method=provided      Disable device emulation and all throttling
  lighthouse <url> --chrome-flags="--window-size=412,660"                        Launch Chrome with a specific window size
  lighthouse <url> --quiet --chrome-flags="--headless"                           Launch Headless Chrome, turn off logging
  lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\",                Stringify'd JSON HTTP Header key/value pairs to send in requests
  \"x-men\":\"wolverine\"}"
  lighthouse <url> --extra-headers=./path/to/file.json                           Path to JSON file of HTTP Header key/value pairs to send in requests
  lighthouse <url> --only-categories=performance,pwa                             Only run specific categories

내가 사용하는 커맨드는

lighthouse --quiet --chrome-flags="--no-sandbox --headless" https://m.naver.com --output=html

크롬 브라우저가 뜨지 않도록 headless flags 를 붙여주고

output 은 html 파일 형식으로 남기게 --output=html

​실행 후에 리포트파일이 결과물로 남습니다

 

멀티 URL 을 측정하기

여러개의 URL 을 측정하도록 한다

1. text 파일에 URL 을 여러개 등록하고

2. batch 파일이 text 파일을 읽어서 URL 만큼 lighthouse 를 실행한다

 

auditlist.txt 파일을 만든다 (그냥 URL 몇개 추가)

https://m.nsmall.com
https://m.coupang.com
http://m.gsshop.com/index.gs

audit.bat 라는 배치파일을 만든다

@FOR /F "UseBackQ Delims=" %%A IN ("auditlist.txt") DO (
@lighthouse "%%A" --quiet --chrome-flags="--no-sandbox --headless" --output html
)

FOR IN DO 구분을 사용해서 auditlist.txt 파일을 읽어서 줄바꿈 기준으로 URL 을 변수로 담고

lighthouse 커맨드를 조합해서 실행하는 내용입니다

 

결과물

lighthouse 결과물

실행하면 리포트 파일이 쫙 생긴다

결과물을 json 으로 남기고 Lighthouse Report Viewer 로 볼 수 도 있습니다

라이트하우스 뷰어 : https://googlechrome.github.io/lighthouse/viewer/

Lighthouse Report Viewer

lighthouse 페이지 가보면 수많은 프로젝트들도 있습니다.

서비스로 구현한 곳도 있고

아니면 AWS 로 lambda 로 엮어서 서버리스로 스케쥴 돌려도 됩니다.

활용 방법은 정말 많아요