카테고리 없음
구글 오픈소스 라이트하우스(Lighthouse)로 웹페이지의 성능 검사하기
mellomello.made
2022. 8. 4. 17:42
라이트하우스(Lighthouse)
구글에서 개발한 오픈소스로서 사이트를 검사하여 웹 페이지의 성능 측정을 할 수 있는 도구이다.
다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공한다.
Lighthouse 분석 결과 항목
1. Performance
Performance 항목에서는 웹 성능을 측정한다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인함.
2. Accessibility
Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인한다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.
3. Best Practices
Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인한다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인합니다.
4. SEO
SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인한다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인함.
5. PWA (Progressive Web App)
PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인한다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 체크리스트로 확인한다.
Chrome 개발자 도구에서 실행하기
- 크롬에서 검사하고 싶은 페이지의 url을 입력.
- 개발자 도구를 연다.
- lighthouse 탭에서 Analyze page load 클릭.
Node CLI에서 실행하기
- Lighthouse를 설치한다. 이때-g 옵션을 사용하여 Lighthouse를 전역 모듈로 설치하는 것이 좋다.
npm install -g lighthouse
2. 검사 실행 명령어
lighthouse <url>
3. 옵션 확인 명령어
lighthouse --help
실행 결과
jyoon@jyoonui-MacBookAir ~ % npm install -g lighthouse
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated intl-messageformat-parser@1.8.1: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
added 131 packages, and audited 132 packages in 7s
15 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
jyoon@jyoonui-MacBookAir ~ % lighthouse https://www.naver.com/
? We're constantly trying to improve Lighthouse and its reliability.
Learn more: https://github.com/GoogleChrome/lighthouse/blob/master/docs/error-reporting.md
May we anonymously report runtime exceptions to improve the tool over time? (y/N) › false
LH:CLI:warn No response to error logging preference, errors will not be reported. +0ms
LH:ChromeLauncher Waiting for browser. +53ms
LH:ChromeLauncher Waiting for browser... +1ms
LH:ChromeLauncher Waiting for browser..... +504ms
LH:ChromeLauncher Waiting for browser.....✓ +2ms
LH:config:warn IFrameElements gatherer requested, however no audit requires it. +770ms
LH:config:warn Inputs gatherer requested, however no audit requires it. +1ms
LH:status Connecting to browser +61ms
LH:status Resetting state with about:blank +408ms
LH:status Navigating to about:blank +0ms
LH:status Benchmarking machine +25ms
LH:status Initializing… +1s
LH:status Preparing target for navigation mode +3ms
LH:status Running defaultPass pass CSSUsage, JsUsage, ViewportDimensions, ConsoleMessages, AnchorElements, ImageElements, LinkElements, MetaElements, ScriptElements, IFrameElements, Inputs, MainDocumentContent, GlobalListeners, Doctype, DOMStats, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, FontSize, EmbeddedContent, RobotsTxt, TapTargets, Accessibility, TraceElements, InspectorIssues, SourceMaps, FullPageScreenshot +8ms
LH:status Resetting state with about:blank +0ms
LH:status Navigating to about:blank +0ms
LH:status Preparing target for navigation +8ms
LH:status Cleaning origin data +73ms
LH:status Cleaning browser cache +3ms
LH:status Preparing network conditions +39ms
LH:status Beginning devtoolsLog and trace +7ms
LH:status Loading page & waiting for onload +137ms
LH:status Navigating to https://www.naver.com/ +0ms
LH:Navigation:error Provided URL did not match initial navigation URL +4s
LH:status Gathering in-page: CSSUsage +0ms
LH:status Gathering in-page: JsUsage +0ms
LH:status Gathering in-page: ViewportDimensions +0ms
LH:status Gathering in-page: ConsoleMessages +0ms
LH:status Gathering in-page: AnchorElements +0ms
LH:status Gathering in-page: ImageElements +1ms
LH:status Gathering in-page: LinkElements +0ms
LH:status Gathering in-page: MetaElements +0ms
LH:status Gathering in-page: ScriptElements +0ms
LH:status Gathering in-page: IFrameElements +0ms
LH:status Gathering in-page: Inputs +0ms
LH:status Gathering in-page: MainDocumentContent +0ms
LH:status Gathering in-page: GlobalListeners +0ms
LH:status Gathering in-page: Doctype +0ms
LH:status Gathering in-page: DOMStats +0ms
LH:status Gathering in-page: OptimizedImages +0ms
LH:status Gathering in-page: PasswordInputsWithPreventedPaste +0ms
LH:status Gathering in-page: ResponseCompression +0ms
LH:status Gathering in-page: TagsBlockingFirstPaint +0ms
LH:status Gathering in-page: FontSize +0ms
LH:status Gathering in-page: EmbeddedContent +0ms
LH:status Gathering in-page: RobotsTxt +0ms
LH:status Gathering in-page: TapTargets +0ms
LH:status Gathering in-page: Accessibility +0ms
LH:status Gathering in-page: TraceElements +0ms
LH:status Gathering in-page: InspectorIssues +0ms
LH:status Gathering in-page: SourceMaps +1ms
LH:status Gathering in-page: FullPageScreenshot +0ms
LH:status Gathering trace +0ms
LH:status Gathering devtoolsLog & network records +505ms
LH:status Gathering: CSSUsage +21ms
LH:status Gathering: JsUsage +355ms
LH:status Gathering: ViewportDimensions +40ms
LH:status Gathering: ConsoleMessages +1ms
LH:status Gathering: AnchorElements +2ms
LH:status Gathering: ImageElements +570ms
LH:ImageElements:warn Reached gathering budget of 5s. Skipped extra details for 717/1035 +5s
LH:status Gathering: LinkElements +5ms
LH:status Gathering: MetaElements +12ms
LH:status Gathering: ScriptElements +13ms
LH:status Gathering: IFrameElements +50ms
LH:status Gathering: Inputs +6ms
LH:status Gathering: MainDocumentContent +13ms
LH:status Gathering: GlobalListeners +7ms
LH:status Gathering: Doctype +2ms
LH:status Gathering: DOMStats +1ms
LH:status Gathering: OptimizedImages +12ms
LH:status Gathering: PasswordInputsWithPreventedPaste +4s
LH:status Gathering: ResponseCompression +63ms
LH:status Gathering: TagsBlockingFirstPaint +33ms
LH:status Gathering: FontSize +66ms
LH:status Gathering: EmbeddedContent +1s
LH:status Gathering: RobotsTxt +10ms
LH:status Gathering: TapTargets +25ms
LH:status Gathering: Accessibility +306ms
LH:status Gathering: TraceElements +2s
LH:status Gathering: InspectorIssues +1s
LH:status Gathering: SourceMaps +68ms
LH:status Gathering: FullPageScreenshot +65ms
LH:status Populate base artifacts +3s
LH:status Get webapp manifest +0ms
LH:status Get webapp installability errors +1ms
LH:status Collect stacks +1ms
LH:status Running offlinePass pass ServiceWorker +56ms
LH:status Resetting state with about:blank +0ms
LH:status Navigating to about:blank +0ms
LH:status Preparing target for navigation +24ms
LH:status Preparing network conditions +0ms
LH:status Beginning devtoolsLog and trace +4ms
LH:status Loading page & waiting for onload +0ms
LH:status Navigating to https://www.naver.com/ +0ms
LH:Navigation:error Provided URL did not match initial navigation URL +356ms
LH:status Gathering in-page: ServiceWorker +0ms
LH:status Gathering devtoolsLog & network records +0ms
LH:status Gathering: ServiceWorker +33ms
LH:status Disconnecting from browser... +1ms
LH:status Cleaning origin data +0ms
LH:status Analyzing and running audits... +10ms
LH:status Auditing: Uses HTTPS +2ms
LH:status Auditing: Registers a service worker that controls page and `start_url` +7ms
LH:status Auditing: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +4ms
LH:status Auditing: First Contentful Paint +3ms
LH:status Auditing: Largest Contentful Paint +74ms
LH:status Auditing: First Meaningful Paint +16ms
LH:status Auditing: Speed Index +5ms
LH:status Auditing: Screenshot Thumbnails +384ms
LH:status Auditing: Final Screenshot +194ms
LH:status Auditing: Total Blocking Time +4ms
LH:status Auditing: Max Potential First Input Delay +27ms
LH:status Auditing: Cumulative Layout Shift +14ms
LH:status Auditing: No browser errors logged to the console +2ms
LH:status Auditing: Initial server response time was short +2ms
LH:status Auditing: Time to Interactive +3ms
LH:status Auditing: User Timing marks and measures +2ms
LH:status Auditing: Avoid chaining critical requests +5ms
LH:status Auditing: Avoid multiple page redirects +3ms
LH:status Auditing: Web app manifest and service worker meet the installability requirements +10ms
LH:status Auditing: Provides a valid `apple-touch-icon` +3ms
LH:status Auditing: Configured for a custom splash screen +2ms
LH:status Auditing: Sets a theme color for the address bar. +1ms
LH:status Auditing: Manifest has a maskable icon +2ms
LH:status Auditing: Content is sized correctly for the viewport +1ms
LH:status Auditing: Displays images with correct aspect ratio +2ms
LH:status Auditing: Serves images with appropriate resolution +16ms
LH:status Auditing: Fonts with `font-display: optional` are preloaded +2ms
LH:status Auditing: Avoids deprecated APIs +2ms
LH:status Auditing: Minimizes main-thread work +2ms
LH:status Auditing: JavaScript execution time +68ms
LH:status Auditing: Preload key requests +19ms
LH:status Auditing: Preconnect to required origins +2ms
LH:status Auditing: All text remains visible during webfont loads +3ms
LH:status Auditing: Diagnostics +6ms
LH:status Auditing: Network Requests +2ms
LH:status Auditing: Network Round Trip Times +4ms
LH:status Auditing: Server Backend Latencies +2ms
LH:status Auditing: Tasks +1ms
LH:status Auditing: Metrics +1ms
LH:status Auditing: Performance budget +1ms
LH:status Auditing: Timing budget +2ms
LH:status Auditing: Keep request counts low and transfer sizes small +2ms
LH:status Auditing: Minimize third-party usage +2ms
LH:status Auditing: Lazy load third-party resources with facades +8ms
LH:status Auditing: Largest Contentful Paint element +5ms
LH:status Auditing: Largest Contentful Paint image was not lazily loaded +2ms
LH:status Auditing: Avoid large layout shifts +1ms
LH:status Auditing: Avoid long main-thread tasks +1ms
LH:status Auditing: Avoids `unload` event listeners +10ms
LH:status Auditing: Avoid non-composited animations +1ms
LH:status Auditing: Image elements have explicit `width` and `height` +2ms
LH:status Auditing: Page has valid source maps +19ms
LH:status Auditing: Preload Largest Contentful Paint image +5ms
LH:status Auditing: Ensure CSP is effective against XSS attacks +2ms
LH:status Auditing: Full-page screenshot +2ms
LH:status Auditing: Script Treemap Data +0ms
LH:status Auditing: Site works cross-browser +36ms
LH:status Auditing: Page transitions don't feel like they block on the network +2ms
LH:status Auditing: Each page has a URL +1ms
LH:status Auditing: `[accesskey]` values are unique +1ms
LH:status Auditing: `[aria-*]` attributes match their roles +2ms
LH:status Auditing: `button`, `link`, and `menuitem` elements have accessible names +5ms
LH:status Auditing: `[aria-hidden="true"]` is not present on the document `<body>` +2ms
LH:status Auditing: `[aria-hidden="true"]` elements do not contain focusable descendents +6ms
LH:status Auditing: ARIA input fields have accessible names +6ms
LH:status Auditing: ARIA `meter` elements have accessible names +2ms
LH:status Auditing: ARIA `progressbar` elements have accessible names +4ms
LH:status Auditing: `[role]`s have all required `[aria-*]` attributes +3ms
LH:status Auditing: Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. +5ms
LH:status Auditing: `[role]`s are contained by their required parent element +6ms
LH:status Auditing: `[role]` values are valid +6ms
LH:status Auditing: ARIA toggle fields have accessible names +5ms
LH:status Auditing: ARIA `tooltip` elements have accessible names +2ms
LH:status Auditing: ARIA `treeitem` elements have accessible names +3ms
LH:status Auditing: `[aria-*]` attributes have valid values +3ms
LH:status Auditing: `[aria-*]` attributes are valid and not misspelled +5ms
LH:status Auditing: Buttons have an accessible name +4ms
LH:status Auditing: The page contains a heading, skip link, or landmark region +5ms
LH:status Auditing: Background and foreground colors have a sufficient contrast ratio +6ms
LH:status Auditing: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements. +7ms
LH:status Auditing: Definition list items are wrapped in `<dl>` elements +4ms
LH:status Auditing: Document has a `<title>` element +4ms
LH:status Auditing: `[id]` attributes on active, focusable elements are unique +6ms
LH:status Auditing: ARIA IDs are unique +7ms
LH:status Auditing: No form fields have multiple labels +4ms
LH:status Auditing: `<frame>` or `<iframe>` elements have a title +7ms
LH:status Auditing: Heading elements appear in a sequentially-descending order +3ms
LH:status Auditing: `<html>` element has a `[lang]` attribute +6ms
LH:status Auditing: `<html>` element has a valid value for its `[lang]` attribute +9ms
LH:status Auditing: Image elements have `[alt]` attributes +6ms
LH:status Auditing: `<input type="image">` elements have `[alt]` text +5ms
LH:status Auditing: Form elements have associated labels +4ms
LH:status Auditing: Links have a discernible name +4ms
LH:status Auditing: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +6ms
LH:status Auditing: List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements +6ms
LH:status Auditing: The document does not use `<meta http-equiv="refresh">` +5ms
LH:status Auditing: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. +4ms
LH:status Auditing: `<object>` elements have alternate text +7ms
LH:status Auditing: No element has a `[tabindex]` value greater than 0 +3ms
LH:status Auditing: Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table. +6ms
LH:status Auditing: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +6ms
LH:status Auditing: `[lang]` attributes have a valid value +6ms
LH:status Auditing: `<video>` elements contain a `<track>` element with `[kind="captions"]` +5ms
LH:status Auditing: Custom controls have associated labels +4ms
LH:status Auditing: Custom controls have ARIA roles +0ms
LH:status Auditing: User focus is not accidentally trapped in a region +0ms
LH:status Auditing: Interactive controls are keyboard focusable +0ms
LH:status Auditing: Interactive elements indicate their purpose and state +0ms
LH:status Auditing: The page has a logical tab order +0ms
LH:status Auditing: The user's focus is directed to new content added to the page +0ms
LH:status Auditing: Offscreen content is hidden from assistive technology +0ms
LH:status Auditing: HTML5 landmark elements are used to improve navigation +0ms
LH:status Auditing: Visual order on the page follows DOM order +0ms
LH:status Auditing: Uses efficient cache policy on static assets +1ms
LH:status Auditing: Avoids enormous network payloads +4ms
LH:status Auditing: Defer offscreen images +4ms
LH:status Auditing: Eliminate render-blocking resources +16ms
LH:status Auditing: Minify CSS +3ms
LH:status Auditing: Minify JavaScript +91ms
LH:status Auditing: Reduce unused CSS +76ms
LH:status Auditing: Reduce unused JavaScript +9ms
LH:status Auditing: Serve images in next-gen formats +11ms
LH:status Auditing: Efficiently encode images +23ms
LH:status Auditing: Enable text compression +14ms
LH:status Auditing: Properly size images +14ms
LH:status Auditing: Use video formats for animated content +22ms
LH:status Auditing: Remove duplicate modules in JavaScript bundles +8ms
LH:status Auditing: Avoid serving legacy JavaScript to modern browsers +8ms
LH:status Auditing: Page has the HTML doctype +67ms
LH:status Auditing: Properly defines charset +1ms
LH:status Auditing: Avoids an excessive DOM size +2ms
LH:status Auditing: Avoids requesting the geolocation permission on page load +1ms
LH:status Auditing: No issues in the `Issues` panel in Chrome Devtools +2ms
LH:status Auditing: Avoids `document.write()` +2ms
LH:status Auditing: Avoids front-end JavaScript libraries with known security vulnerabilities +1ms
LH:status Auditing: Detected JavaScript libraries +2ms
LH:status Auditing: Avoids requesting the notification permission on page load +1ms
LH:status Auditing: Allows users to paste into password fields +1ms
LH:status Auditing: Use HTTP/2 +1ms
LH:status Auditing: Uses passive listeners to improve scrolling performance +9ms
LH:status Auditing: Document has a meta description +1ms
LH:status Auditing: Page has successful HTTP status code +1ms
LH:status Auditing: Document uses legible font sizes +1ms
LH:status Auditing: Links have descriptive text +3ms
LH:status Auditing: Links are crawlable +12ms
LH:status Auditing: Page isn’t blocked from indexing +8ms
LH:status Auditing: robots.txt is valid +2ms
LH:status Auditing: Tap targets are sized appropriately +2ms
LH:status Auditing: Document has a valid `hreflang` +3ms
LH:status Auditing: Document avoids plugins +1ms
LH:status Auditing: Document has a valid `rel=canonical` +1ms
LH:status Auditing: Structured data is valid +2ms
LH:status Generating results... +0ms
LH:Printer html output written to /Users/jyoon/m.naver.com_2022-08-04_16-18-30.report.html +52ms
LH:CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +1ms
LH:ChromeLauncher Killing Chrome instance 2407 +0ms
jyoon@jyoonui-MacBookAir ~ %
CLI options
jyoon@jyoonui-MacBookAir ~ % lighthouse --help
lighthouse <url> <options>
Logging:
--verbose Displays verbose logging [불리언] [기본값: false]
--quiet Displays no progress, debug logs, or errors [불리언] [기본값: false]
Configuration:
--save-assets Save the trace contents & devtools logs to disk [불리언] [기본값: false]
--list-all-audits Prints a list of all available audits and exits [불리언] [기본값: false]
--list-locales Prints a list of all supported locales and exits [불리언] [기본값: false]
--list-trace-categories Prints a list of all required trace categories and exits [불리언] [기본값: false]
--print-config Print the normalized config for the given config and options, then exit. [불리언] [기본값: false]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited). [문자열]
--config-path The path to the config JSON.
An example config file: lighthouse-core/config/lr-desktop-config.js [문자열]
--preset Use a built-in configuration.
WARNING: If the --config-path flag is provided, this preset will be ignored.
[문자열] [선택지: "perf", "experimental", "desktop"]
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0
or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [문자열] [기본값: ""]
--port The port to use for the debugging protocol. Use 0 for a random port [숫자] [기본값: 0]
--hostname The hostname to use for the debugging protocol. [문자열] [기본값: "127.0.0.1"]
--form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop inst
ead. [문자열] [선택지: "mobile", "desktop"]
--screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 p
arameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmula
tion.deviceScaleFactor=2
--emulatedUserAgent Sets useragent emulation [문자열]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING:
Very high values can lead to large traces and instability [숫자]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https
://git.io/vFFTO [불리언]
-G, --gather-mode Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If aud
it-mode is not also enabled, the run will quit early.
-A, --audit-mode Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
--only-audits Only run the specified audits [배열]
--only-categories Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo [배열]
--skip-audits Run everything except these audits [배열]
--budget-path The path to the budget.json file for LightWallet. [문자열]
Output:
--output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [배열] [기본값: ["html"]]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML or CSV
output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-p
ath is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.rep
ort.json", etc.
Example: --output-path=./lighthouse-results.html [문자열]
--view Open HTML report in your browser [불리언] [기본값: false]
옵션:
--help 도움말 표시 [불리언]
--version 버전 표시 [불리언]
--cli-flags-path The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will st
ill override the file-based ones.
--debug-navigation Pause after page load to wait for permission to continue the run, evaluate `continueLighthouseRun` in the console
to continue. [불리언]
--fraggle-rock [EXPERIMENTAL] Use the new Fraggle Rock navigation runner to gather results. [불리언] [기본값: false]
--locale The locale/language the report should be formatted in
--blocked-url-patterns Block any network requests to the specified URL patterns [배열]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [불리언]
--throttling-method Controls throttling method [문자열] [선택지: "devtools", "provided", "simulate"]
--throttling
--throttling.rttMs Controls simulated network RTT (TCP layer)
--throttling.throughputKbps Controls simulated network download throughput
--throttling.requestLatencyMs Controls emulated network RTT (HTTP layer)
--throttling.downloadThroughputKbps Controls emulated network download throughput
--throttling.uploadThroughputKbps Controls emulated network upload throughput
--throttling.cpuSlowdownMultiplier Controls simulated + emulated CPU throttling
--extra-headers Set extra HTTP Headers to pass with request
--precomputed-lantern-data-path Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates fo
r RTT and server latency. [문자열]
--lantern-data-output-path Path to the file where lantern simulation data should be written to, can be used in a future run with the `precom
puted-lantern-data-path` flag. [문자열]
--plugins Run the specified plugins [배열]
--channel [문자열] [기본값: "cli"]
--chrome-ignore-default-flags [불리언] [기본값: false]
예시:
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 generat
ion, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no- Disable emulation and all throttling
emulated-user-agent
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\", \"x-men\":\"wo Stringify'd JSON HTTP Header key/value pairs to send in requests
lverine\"}"
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 the specified categories. Available categories: accessibility, be
st-practices, performance, pwa, seo
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
1. First Contentful Paint
First Contentful Paint, 줄여서 FCP는 성능(Performance) 지표를 추적하는 메트릭.
사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다. 즉 사용자가 감지하는 페이지의 로딩속도를 측정할 수 있습니다. 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하이다.
2. Largest Contentful Paint
LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정한다.
| LCP time(in seconds)Color-coding | Color-coding |
| 0-2.5 | Green (fast) |
| 2.5-4 | Orange (moderate) |
| Over 4 | Red (slow) |
3. Speed Index
Speed Index는 성능(Performance) 지표를 추적하는 메트릭이다. Speed Index는 페이지를 로드하는 동안 얼마나 빨리 콘텐츠가 시각적으로 표시되는 지를 측정한다.
| Speed Index(in seconds) | Color-coding |
| 0–3.4 | Green (fast) |
| 3.4–5.8 | Orange (moderate) |
| Over 5.8 | Red (slow) |
4. Time to interactive
TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한다.
- 페이지에 FCP로 측정된 컨텐츠가 표시되어야 합니다.
- 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록됩니다.
- 페이지가 0.05초안에 사용자의 상호작용에 응답합니다.
5. Total Blocking Time
TBT는 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정한다.
6. Cumulative Layout Shift
CLS는 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표입니다. 이 지표를 통해 화면에서 이리저리 움직이는 요소(불안정한 요소)가 있는 지를 측정할 수 있다.
Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시해준다. Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있고 각 항목을 열어보면 해당 문제에 대한 상세 설명과 함께 어떤 코드, 어떤 화면에서 문제 상황을 발견했는지 확인할 수 있기 때문에 최적화의 방향을 잡기 좋다. Lighthouse는 웹 성능 최적화 뿐만 아니라 웹 접근성, 웹 표준, SEO 관련 항목도 확인하고 해결책을 제시해준다.