Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse 설치
  • Lighthouse 실행
  • 결과 보기
  • Home
  • All articles

성능 예산에 Lighthouse 사용

Jun 14, 2019 — 업데이트됨 Apr 3, 2020
Available in: Español, 日本語, Português, Русский, 中文, English
Appears in: 빠른 로드 시간
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
이 페이지에서
  • Lighthouse 설치
  • Lighthouse 실행
  • 결과 보기

Lighthouse는 이제 성능 예산을 지원합니다. LightWallet은 5분 이내에 설정할 수 있으며 성능 지표, 페이지 리소스의 크기 및 수량에 대한 피드백을 제공합니다.

Lighthouse 설치 #

LightWallet은 Lighthouse v5+의 명령줄 버전에서 사용할 수 있습니다.

시작하려면 Lighthouse를 설치하세요.

npm install -g lighthouse

예산 만들기 #

budget.json이라는 파일을 만듭니다. 이 파일에 다음 JSON을 추가합니다.

[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]

이 예제 budget.json 파일은 5개의 개별 예산을 설정합니다.

  • 상호작용까지의 시간: 3000ms.
  • 첫 번째 의미 있는 페인트(FMP): 1000ms.
  • 페이지의 총 JavaScript 양: 125KB.
  • 페이지의 전체 크기: 300KB.
  • 타사 출처에 대한 요청 수: 10개.

지원되는 성능 메트릭 및 리소스 유형의 전체 목록은 Lighthouse 문서의 성능 예산 섹션을 참조하십시오.

Lighthouse 실행 #

--budget-path 플래그를 사용하여 Lighthouse를 실행합니다. 이 플래그는 Lighthouse에 예산 파일의 위치를 알려줍니다.

lighthouse https://example.com --budget-path=./budget.json
참고: 예산 파일의 이름은 budget.json일 필요가 없습니다.

결과 보기 #

LightWallet이 올바르게 구성된 경우 Lighthouse 보고서에는 성능 범주 내에 예산 섹션이 포함됩니다.

Lighthouse 보고서의 '예산' 섹션

Lighthouse 보고서의 JSON 버전에서 Lightwallet 결과는 performance-budget 감사 결과 내에서 찾을 수 있습니다.

성능
마지막 업데이트: Apr 3, 2020 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.