Lighthouse에서 파일 전송량이 얼마나 많았는지 알아보기

본 기사에 대하여

Chrome에서 사용할 수 있는 Lighthouse의 기능이 최근 Google I/O로 업데이트되었습니다.
Performance Budget이라고 하는 HTML/CSS/Javascipt/image등의 파일 전송 용량의 예산을 결정해, 그것을 모니터링할 수 있는 구조가 탄생하고 있었으므로, 그 움직임 방법과, 계측의 방법등을 간단하게 설명합니다.

명령을 조금 이해하고 있는 분이라면, 대응 가능합니다.
코드는 직접 작성하지 않아도 됩니다. 커스터마이즈하고 싶은 분은, 스스로 구그 해 봐 주세요.

목차

・Lighthouse란?
· 명령 행에서 Lighthouse를 이동
· Performance Budget 설정
· 막상, 계측 결과를 확인!

Lighthouse란?

Chrome에서 사용할 수 있는 웹페이지 측정 도구입니다.
Chrome Dev Tool에서도 액세스할 수 있습니다. 사용법은 여기
다양한 시점에서 웹 페이지의 해석을 해주고, 개선점도 제안해 줍니다. 편리.

명령줄에서 Lighthouse를 이동합니다.

$ npm install -g lighthouse

에서 설치

$ lighthouse https://hogehoge.com #計測したいurlをコピペ

이것뿐입니다.

측정 명령을 실행하면

May we anonymously report runtime exceptions to improve the tool over time?  (y/N)

라고 들었습니다만, 어느 쪽이라도 좋다고 생각합니다. 오류가 발생했을 때 해당 정보를 익명화하여 Google에 제출할지 묻는 것이므로 적절한 방법 중 하나를 선택하십시오.

이제 측정이 시작되고 모두 끝나면 터미널의 맨 아래쪽으로

Printer html output written to /Users/user-name/siteurl_2019-05-31_11-02-16.report.html

표시되어 있으므로 브라우저에서 엽니다.
마음대로 자신의 홈 디렉토리에 출력되고 있는 느낌이군요.

외형은 이런 느낌의 HTML이 나옵니다.



여기까지는 Chrome Dev Tool에서도 할 수 있으므로 좋지만 여기에서 Performance Budget을 설정하여 모니터링할 수 있도록 해 갑니다.

Performance Budget 설정

드디어 Performance Budget을 설정합니다. json 형식의 파일을 사용합니다.

애초에 얼마나 많은 파일 전송량을 기준으로 해야할지 모르겠어! JSON은 어려울 것 같다. . 라고 하는 분도 계신다고 생각합니다만, 걱정할 필요는 없습니다. Performance Budget Calculator 라고 하는 툴이 있습니다. 이제 쉽게 JSON 파일을 만들 수 있습니다.
JSON 파일을 만든 후에는 어른스럽게 파일을 홈 디렉토리에 저장하십시오./Users/user-name/budget.json같은 느낌으로 배치한다는 것입니다.

디폴트의 ​​JSON 파일은 아래와 같은 형태가 됩니다.

[
  { "resourceSizes":[
    { "resourceType": "document", "budget": 20 },
    { "resourceType": "stylesheet", "budget": 50 },
    { "resourceType": "font", "budget": 50 },
    { "resourceType": "image", "budget": 300 },
    { "resourceType": "script", "budget": 100 }
    ]
  }
]

이제 준비가 되었습니다.

막상, 계측 결과를 확인!

$ lighthouse https://youtube.com --budget-path=budget.json

이 명령을 두드리십시오. 이전처럼 HTML 파일이 생성되므로 확인해 보겠습니다.

Performance의 스코어 표시되고 있는 아래를 보면, 아래와 같은 에리어가 새롭게 표시되고 있네요.



script의 양이 많아서, 마음껏 설정한 예산을 오버하고 있었습니다. . 웃음

얼마의 전송량을 예산으로 설정하는가 하는 점은, 이번은 우선 디폴트의 수치(늦게도, 빨리도 없다고 하는 사이트의 레벨)로 설정했으므로, 개선 포인트는 있을 것 같다는 것을 알았습니다 .

이상, JSON 형식의 파일을 만들어 명령을 두드리면, 빨리 성능 관리를 할 수 있는 사례였습니다.

참고 : Performance Budgets