[최적화] Lighthouse

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

Lighthouse

사이트를 검사하여 성능 측정을 할 수 있는 도구인 Lighthouse에 대해 정리하려고 합니다.

Lighthouse는 다양한 지표를 이용하여 웹페이지의 성능을 검사해줄 뿐만 아니라 그에 대한 개선책도 제공해 줍니다.

 

Lighthouse시작하기

Lughthouse를 이용할수 있는 방법은 다양하지만 크롬이 저에게 가장 익숙하기 때문에 크롬으로 진행 해보겠습니다.

개발자 도구에서 실행하기

개발자 도구를 열고 Lughthouse 탭을 클릭합니다

페이지 로드분석(Generate report)를 클릭합니다. 카테고리에서 특정 지표만 검색할 수 있습니다.

30~60초간 검사가 진행된다. 이후 리포특 개발자도구 내에 생성된다 

우아한 형제들

github

Node CLI에서 실행하기

npm install -g lighthouse

lighthouse를 전역으로 설치해줍니다.

 

lighthouse <url>

다음 명령어로 검사를 진행할 수 있습니다.

 

lighthouse --help

명령어의 모든 옵션을 볼 수 있습니다

 

간단한 예시

react를 생성했습니다.

 

(윈도우기준) posershell을 관리자모드로 켜고 만들어둔 리액트의 폴더로 이동합니다.

npm install -g lighthouse

다음 명령어를 입력합니다.

(인텔리제이 기준) 인텔리제이 터미널에 아래 명령어를 입력해줍니다.

lighthouse http://localhost:3000/

 

다음과 같은 결과를 얻었습니다.

LH:ChromeLauncher Waiting for browser. +0ms
  LH:ChromeLauncher Waiting for browser... +1ms
  LH:ChromeLauncher Waiting for browser..... +507ms
  LH:ChromeLauncher Waiting for browser.....√ +4ms
  LH:config:warn IFrameElements gatherer requested, however no audit requires it. +482ms
  LH:config:warn Inputs gatherer requested, however no audit requires it. +1ms
  LH:status Connecting to browser +49ms
  LH:status Resetting state with about:blank +41ms
  LH:status Navigating to about:blank +4ms
  LH:status Benchmarking machine +37ms
  LH:status Initializing… +1s
  LH:status Preparing target for navigation mode +4ms
  LH:status Running defaultPass pass CSSUsage, JsUsage, ViewportDimensions, ConsoleMessages, AnchorElements, ImageElements, LinkElements, Meta
Elements, ScriptElements, IFrameElements, Inputs, MainDocumentContent, GlobalListeners, Doctype, DOMStats, OptimizedImages, PasswordInputsWith
PreventedPaste, ResponseCompression, TagsBlockingFirstPaint, FontSize, EmbeddedContent, RobotsTxt, TapTargets, Accessibility, TraceElements, I
nspectorIssues, SourceMaps, FullPageScreenshot +19ms
  LH:status Resetting state with about:blank +1ms
  LH:status Navigating to about:blank +1ms
  LH:status Preparing target for navigation +10ms
  LH:status Cleaning origin data +41ms
  LH:status Cleaning browser cache +11ms
  LH:status Preparing network conditions +47ms
  LH:status Beginning devtoolsLog and trace +11ms
  LH:status Loading page & waiting for onload +48ms
  LH:status Navigating to http://localhost:3000/ +1ms
  LH:status Gathering in-page: CSSUsage +3s
  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 +0ms
  LH:status Gathering in-page: LinkElements +0ms
  LH:status Gathering in-page: MetaElements +1ms
  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 +1ms
  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 +1ms
  LH:status Gathering in-page: TraceElements +0ms
  LH:status Gathering in-page: InspectorIssues +0ms
  LH:status Gathering in-page: SourceMaps +0ms
  LH:status Gathering in-page: FullPageScreenshot +0ms
  LH:status Gathering trace +0ms
  LH:status Gathering devtoolsLog & network records +158ms
  LH:status Gathering: CSSUsage +8ms
  LH:status Gathering: JsUsage +16ms
  LH:status Gathering: ViewportDimensions +16ms
  LH:status Gathering: ConsoleMessages +3ms
  LH:status Gathering: AnchorElements +4ms
  LH:status Gathering: ImageElements +16ms
  LH:status Gathering: LinkElements +13ms
  LH:status Gathering: MetaElements +5ms
  LH:status Gathering: ScriptElements +5ms
  LH:status Gathering: IFrameElements +53ms
  LH:status Gathering: Inputs +3ms
  LH:status Gathering: MainDocumentContent +4ms
  LH:status Gathering: GlobalListeners +2ms
  LH:status Gathering: Doctype +3ms
  LH:status Gathering: DOMStats +5ms
  LH:status Gathering: OptimizedImages +7ms
  LH:status Gathering: PasswordInputsWithPreventedPaste +2ms
  LH:status Gathering: ResponseCompression +3ms
  LH:status Gathering: TagsBlockingFirstPaint +2ms
  LH:status Gathering: FontSize +3ms
  LH:status Gathering: EmbeddedContent +7ms
  LH:status Gathering: RobotsTxt +4ms
  LH:status Gathering: TapTargets +21ms
  LH:status Gathering: Accessibility +11ms
  LH:status Gathering: TraceElements +80ms
  LH:status Gathering: InspectorIssues +42ms
  LH:status Gathering: SourceMaps +2ms
  LH:status Gathering: FullPageScreenshot +107ms
  LH:status Populate base artifacts +58s
  LH:status Get webapp manifest +0ms
  LH:status Get webapp installability errors +4ms
  LH:status Collect stacks +1ms
  LH:status Running offlinePass pass ServiceWorker +18ms
  LH:status Resetting state with about:blank +1ms
  LH:status Navigating to about:blank +0ms
  LH:status Preparing target for navigation +139ms
  LH:status Preparing network conditions +7ms
  LH:status Beginning devtoolsLog and trace +10ms
  LH:status Loading page & waiting for onload +0ms
  LH:status Navigating to http://localhost:3000/ +0ms
  LH:status Gathering in-page: ServiceWorker +461ms
  LH:status Gathering devtoolsLog & network records +1ms
  LH:status Gathering: ServiceWorker +16ms
  LH:status Disconnecting from browser... +2ms
  LH:status Cleaning origin data +1ms
  LH:status Analyzing and running audits... +21ms
  LH:status Auditing: Uses HTTPS +4ms
  LH:status Auditing: Registers a service worker that controls page and `start_url` +8ms
  LH:status Auditing: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +7ms
  LH:status Auditing: First Contentful Paint +8ms
  LH:status Auditing: Largest Contentful Paint +22ms
  LH:status Auditing: First Meaningful Paint +7ms
  LH:status Auditing: Speed Index +4ms
  LH:status Auditing: Screenshot Thumbnails +311ms
  LH:status Auditing: Final Screenshot +227ms
  LH:status Auditing: Total Blocking Time +2ms
  LH:status Auditing: Max Potential First Input Delay +7ms
  LH:status Auditing: Cumulative Layout Shift +6ms
  LH:status Auditing: No browser errors logged to the console +3ms
  LH:status Auditing: Initial server response time was short +49ms
  LH:status Auditing: Time to Interactive +9ms
  LH:status Auditing: User Timing marks and measures +2ms
  LH:status Auditing: Avoid chaining critical requests +4ms
  LH:status Auditing: Avoid multiple page redirects +3ms
  LH:status Auditing: Web app manifest and service worker meet the installability requirements +4ms
  LH:status Auditing: Provides a valid `apple-touch-icon` +6ms
  LH:status Auditing: Configured for a custom splash screen +3ms
  LH:status Auditing: Sets a theme color for the address bar. +9ms
  LH:status Auditing: Manifest has a maskable icon +3ms
  LH:status Auditing: Content is sized correctly for the viewport +2ms
  LH:status Auditing: Displays images with correct aspect ratio +2ms
  LH:status Auditing: Serves images with appropriate resolution +2ms
  LH:status Auditing: Fonts with `font-display: optional` are preloaded +3ms
  LH:status Auditing: Avoids deprecated APIs +2ms
  LH:status Auditing: Minimizes main-thread work +3ms
  LH:status Auditing: JavaScript execution time +6ms
  LH:status Auditing: Preload key requests +6ms
  LH:status Auditing: Preconnect to required origins +2ms
  LH:status Auditing: All text remains visible during webfont loads +2ms
  LH:status Auditing: Diagnostics +3ms
  LH:status Auditing: Network Requests +0ms
  LH:status Auditing: Network Round Trip Times +1ms
  LH:status Auditing: Server Backend Latencies +3ms
  LH:status Auditing: Tasks +1ms
  LH:status Auditing: Metrics +1ms
  LH:status Auditing: Performance budget +2ms
  LH:status Auditing: Timing budget +2ms
  LH:status Auditing: Keep request counts low and transfer sizes small +3ms
  LH:status Auditing: Minimize third-party usage +3ms
  LH:status Auditing: Lazy load third-party resources with facades +4ms
  LH:status Auditing: Largest Contentful Paint element +3ms
  LH:status Auditing: Largest Contentful Paint image was not lazily loaded +2ms
  LH:status Auditing: Avoid large layout shifts +2ms
  LH:status Auditing: Avoid long main-thread tasks +1ms
  LH:status Auditing: Avoids `unload` event listeners +3ms
  LH:status Auditing: Avoid non-composited animations +3ms
  LH:status Auditing: Image elements have explicit `width` and `height` +2ms
  LH:status Auditing: Page has valid source maps +3ms
  LH:status Auditing: Preload Largest Contentful Paint image +3ms
  LH:status Auditing: Ensure CSP is effective against XSS attacks +3ms
  LH:status Auditing: Full-page screenshot +2ms
  LH:status Auditing: Script Treemap Data +1ms
  LH:status Auditing: Site works cross-browser +78ms
  LH:status Auditing: Page transitions don't feel like they block on the network +2ms
  LH:status Auditing: Each page has a URL +2ms
  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 +2ms
  LH:status Auditing: `[aria-hidden="true"]` is not present on the document `<body>` +4ms
  LH:status Auditing: `[aria-hidden="true"]` elements do not contain focusable descendents +9ms
  LH:status Auditing: ARIA input fields have accessible names +3ms
  LH:status Auditing: ARIA `meter` elements have accessible names +3ms
  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. +4ms    
  LH:status Auditing: `[role]`s are contained by their required parent element +4ms
  LH:status Auditing: `[role]` values are valid +3ms
  LH:status Auditing: ARIA toggle fields have accessible names +3ms
  LH:status Auditing: ARIA `tooltip` elements have accessible names +4ms
  LH:status Auditing: ARIA `treeitem` elements have accessible names +5ms
  LH:status Auditing: `[aria-*]` attributes have valid values +4ms
  LH:status Auditing: `[aria-*]` attributes are valid and not misspelled +3ms
  LH:status Auditing: Buttons have an accessible name +4ms
  LH:status Auditing: The page contains a heading, skip link, or landmark region +4ms
  LH:status Auditing: Background and foreground colors have a sufficient contrast ratio +7ms
  LH:status Auditing: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements. +8ms     
  LH:status Auditing: Definition list items are wrapped in `<dl>` elements +4ms
  LH:status Auditing: Document has a `<title>` element +6ms
  LH:status Auditing: `[id]` attributes on active, focusable elements are unique +9ms
  LH:status Auditing: ARIA IDs are unique +4ms
  LH:status Auditing: No form fields have multiple labels +5ms
  LH:status Auditing: `<frame>` or `<iframe>` elements have a title +4ms
  LH:status Auditing: Heading elements appear in a sequentially-descending order +5ms
  LH:status Auditing: `<html>` element has a `[lang]` attribute +5ms
  LH:status Auditing: `<html>` element has a valid value for its `[lang]` attribute +11ms
  LH:status Auditing: Image elements have `[alt]` attributes +7ms
  LH:status Auditing: `<input type="image">` elements have `[alt]` text +7ms
  LH:status Auditing: Form elements have associated labels +6ms
  LH:status Auditing: Links have a discernible name +4ms
  LH:status Auditing: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +8ms
  LH:status Auditing: List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements +8ms
  LH:status Auditing: The document does not use `<meta http-equiv="refresh">` +6ms
  LH:status Auditing: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not le
ss than 5. +6ms
  LH:status Auditing: `<object>` elements have alternate text +9ms
  LH:status Auditing: No element has a `[tabindex]` value greater than 0 +6ms
  LH:status Auditing: Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table. +7ms
  LH:status Auditing: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +10ms
  LH:status Auditing: `[lang]` attributes have a valid value +8ms
  LH:status Auditing: `<video>` elements contain a `<track>` element with `[kind="captions"]` +7ms
  LH:status Auditing: Custom controls have associated labels +6ms
  LH:status Auditing: Custom controls have ARIA roles +1ms
  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 +1ms
  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 +3ms
  LH:status Auditing: Defer offscreen images +3ms
  LH:status Auditing: Eliminate render-blocking resources +4ms
  LH:status Auditing: Minify CSS +3ms
  LH:status Auditing: Minify JavaScript +3ms
  LH:status Auditing: Reduce unused CSS +60ms
  LH:status Auditing: Reduce unused JavaScript +4ms
  LH:status Auditing: Serve images in next-gen formats +4ms
  LH:status Auditing: Efficiently encode images +4ms
  LH:status Auditing: Enable text compression +3ms
  LH:status Auditing: Properly size images +2ms
  LH:status Auditing: Use video formats for animated content +4ms
  LH:status Auditing: Remove duplicate modules in JavaScript bundles +3ms
  LH:status Auditing: Avoid serving legacy JavaScript to modern browsers +4ms
  LH:status Auditing: Page has the HTML doctype +93ms
  LH:status Auditing: Properly defines charset +2ms
  LH:status Auditing: Avoids an excessive DOM size +2ms
  LH:status Auditing: Avoids requesting the geolocation permission on page load +4ms
  LH:status Auditing: Avoids `document.write()` +2ms
  LH:status Auditing: Avoids front-end JavaScript libraries with known security vulnerabilities +2ms
  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 +2ms
  LH:status Auditing: Use HTTP/2 +2ms
  LH:status Auditing: Uses passive listeners to improve scrolling performance +4ms
  LH:status Auditing: Document has a meta description +1ms
  LH:status Auditing: Page has successful HTTP status code +2ms
  LH:status Auditing: Document uses legible font sizes +2ms
  LH:status Auditing: Links have descriptive text +3ms
  LH:status Auditing: Links are crawlable +1ms
  LH:status Auditing: Page isn’t blocked from indexing +3ms
  LH:status Auditing: robots.txt is valid +4ms
  LH:status Auditing: Tap targets are sized appropriately +2ms
  LH:status Auditing: Document has a valid `hreflang` +2ms
  LH:status Auditing: Document avoids plugins +2ms
  LH:status Auditing: Document has a valid `rel=canonical` +2ms
  LH:status Auditing: Structured data is valid +2ms
  LH:status Generating results... +1ms
  LH:Printer html output written to D:\Code\codestates\section4\fe-sprint-tdd\app\localhost_2022-12-05_14-43-24.report.html +45ms
  LH:CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +1ms
  LH:ChromeLauncher Killing Chrome instance 12384 +1ms

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 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.