구글이 제시하는 새로운 분석 도구는 웹사이트의 성능, SEO 최적화, 보안 상태, 모범 사례 준수 여부, 그리고 접근성 수준을 종합적으로 점검하고 개선 방향을 제시합니다.
최근 공개된 구글의 라이트하우스는 웹사이트를 수동 및 자동으로 분석할 수 있는 오픈 소스 도구입니다.
구글 라이트하우스는 어떤 항목들을 평가하나요?
라이트하우스는 75개 이상의 다양한 지표를 기반으로 웹사이트를 평가하고, 최종 점수를 제공합니다. 웹사이트 소유자, SEO 전문가, 그리고 웹마스터라면 다음 항목들에 특히 관심을 가질 수 있습니다.
- 성능 – 상호 작용 시간, 지연 시간, 속도 지수, 리소스 최적화, TTFB(Time To First Byte), 자산 전달, 스크립트 실행 시간, DOM 크기 등
- SEO – 모바일 친화성, 메타 정보, 크롤링 가능성, 표준 준수, 구조화된 데이터 등
- 모범 사례 – 이미지 최적화, JS 라이브러리, 브라우저 오류 로깅, HTTPS 사용, 알려진 JS 취약점 여부 등
- 접근성 – 페이지 요소, 언어 설정, ARIA 속성 등
- PWA (Progressive Web Application) – HTTP를 HTTPS로 리디렉션, 응답 코드 확인, 3G 환경에서의 빠른 로딩, 스플래시 화면, 뷰포트 설정 등
이 도구는 다양한 방식으로 활용할 수 있는 매우 유용하고 강력한 기능을 제공합니다.
개발자라면 Node.js를 사용하여 프로그래밍 방식으로 테스트를 실행할 수 있으며, 라이트하우스를 기반으로 지속적인 웹사이트 성능 모니터링을 제공하는 다양한 도구들이 이미 출시되어 있습니다. 이제 웹사이트에 대한 라이트하우스 테스트를 실행하는 방법을 자세히 살펴보겠습니다.
가장 쉬운 방법부터 시작해 보겠습니다.
web.dev를 이용한 측정
구글은 최근 web.dev를 공개하여 많은 인기를 얻고 있습니다. 이 온라인 도구를 통해 간편하게 테스트를 수행할 수 있습니다.
측정 페이지를 방문하여 분석하고 싶은 URL을 입력하면, 몇 초 안에 자세한 보고서와 함께 종합적인 점수를 확인할 수 있습니다.
결과 보고서는 성공적으로 통과한 항목과 개선이 필요한 부분을 명확하게 보여줍니다.
100점 만점에 집착하지 마십시오. 구글 웹사이트조차 완벽한 점수를 얻지 못하는 경우가 많습니다.
이러한 결과들을 가이드라인으로 삼아 지속적인 개선을 추구하는 것이 중요합니다.
참고: web.dev는 모바일 환경을 기준으로 테스트를 진행하며, 데스크톱 환경에서 테스트하는 옵션은 제공하지 않습니다.
크롬 브라우저
크롬 브라우저에서도 라이트하우스를 사용할 수 있다는 것을 알고 계셨나요? 개발자 도구를 통해 모바일 또는 데스크톱 환경에서 테스트를 선택하여 진행할 수 있습니다.
- 크롬 브라우저를 실행합니다.
- 테스트할 웹사이트에 접속합니다.
- 개발자 도구를 실행합니다 (Windows 사용자의 경우 F12 키를 누르거나, 마우스 오른쪽 버튼 클릭 후 “검사” 선택).
- “감사” 탭을 클릭합니다.
위 이미지에서 볼 수 있듯이, 테스트 항목을 선택할 수 있는 옵션을 제공합니다. 목표에 집중하여 더욱 빠르게 결과를 얻을 수 있습니다.
크롬과 web.dev에서 얻을 수 있는 결과 보고서는 거의 동일한 형식과 정보를 제공합니다.
하지만 자세히 살펴보면 한 가지 추가적인 메트릭 그룹이 있습니다. 바로 Progressive Web App (PWA) 입니다. 크롬에서 테스트해야 할 또 다른 중요한 이유입니다.
koreantech.org 라이트하우스 API
koreantech.org 라이트하우스 API를 사용하면 웹사이트 성능 데이터를 쉽게 얻을 수 있습니다. HTML, JSON, 또는 CSV 형식으로 모바일 및 데스크톱 환경의 라이트하우스 데이터를 추출할 수 있습니다.
또한 출력 형식을 변경하거나, SEO와 같은 특정 측정 항목에 집중하여 보고서를 맞춤 설정할 수도 있습니다.
{
"parameters": [
"--output=html",
"--only-categories=seo",
],
"url": "example.com"
}
매달 3000회의 API 호출을 무료로 제공하는 Free Tier를 활용할 수 있습니다. 유료 서비스의 경우 다중 위치 지원, 주거용 프록시, 더 높은 요청 비율을 제공하며, 월 5달러부터 시작합니다.
Node.js
라이트하우스는 Node 모듈로도 사용할 수 있습니다. 서버에 설치하여 프로그래밍 방식 또는 명령줄을 통해 실행할 수 있습니다. 이제 라이트하우스를 설치하는 방법을 간단히 살펴보겠습니다.
Ubuntu 18.x에 라이트하우스 설치
테스트 환경으로 Digital Ocean 서버를 사용합니다. 라이트하우스를 사용하려면 Node LTS 8.9 이상 버전이 필요하며, 이미 설치되어 있다고 가정합니다. Node.js 설치 가이드가 필요한 경우 참조하십시오.
또한 서버에 크롬 브라우저를 설치해야 합니다. 설치 지침은 관련 문서를 참고하십시오.
라이트하우스 설치는 다른 모듈들과 마찬가지로 간단합니다.
- 서버에 로그인합니다.
- 다음 명령어를 실행하여 설치합니다.
npm install -g lighthouse
-g 옵션을 사용했으므로 전역 모듈로 설치됩니다.
[email protected]:~# npm install -g lighthouse /usr/bin/lighthouse -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js /usr/bin/chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js > [email protected] postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core > node build/utils/postinstall.js + [email protected] added 179 packages from 119 contributors in 10.094s [email protected]:~#
설치가 완료되면, lighthouse 명령어를 실행하여 제대로 설치되었는지 확인합니다.
[email protected]:~# lighthouse Please provide a url Specify --help for available options [email protected]:~#
라이트하우스가 감사를 실행할 준비가 되었습니다. 몇 가지 테스트 옵션을 시도해 보겠습니다.
헤드리스 브라우저를 사용하여 테스트를 실행하려면 다음 명령어를 사용합니다.
lighthouse URL --chrome-flags="--headless"
HTTP 또는 HTTPS를 포함한 절대 URL을 제공해야 합니다.
예시:
[email protected]:~$ lighthouse https://koreantech.org.com --chrome-flags="--headless"
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +511ms
ChromeLauncher Waiting for browser.....✓ +2ms
status Connecting to browser +176ms
status Resetting state with about:blank +24ms
status Benchmarking machine +30ms
status Initializing… +508ms
status Loading page & waiting for onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt +27ms
status Retrieving in-page: Scripts +2s
status Retrieving in-page: CSSUsage +0ms
status Retrieving in-page: Viewport +0ms
status Retrieving in-page: ViewportDimensions +0ms
status Retrieving in-page: ThemeColor +0ms
status Retrieving in-page: Manifest +0ms
status Retrieving in-page: RuntimeExceptions +0ms
status Retrieving in-page: ChromeConsoleMessages +0ms
status Retrieving in-page: ImageUsage +0ms
status Retrieving in-page: Accessibility +0ms
status Retrieving in-page: LinkElements +0ms
status Retrieving in-page: AnchorsWithNoRelNoopener +1ms
status Retrieving in-page: AppCacheManifest +0ms
status Retrieving in-page: Doctype +0ms
status Retrieving in-page: DOMStats +0ms
status Retrieving in-page: JSLibraries +0ms
status Retrieving in-page: OptimizedImages +0ms
status Retrieving in-page: PasswordInputsWithPreventedPaste +0ms
status Retrieving in-page: ResponseCompression +0ms
status Retrieving in-page: TagsBlockingFirstPaint +0ms
status Retrieving in-page: MetaDescription +0ms
status Retrieving in-page: FontSize +0ms
status Retrieving in-page: CrawlableLinks +0ms
status Retrieving in-page: MetaRobots +0ms
status Retrieving in-page: Hreflang +0ms
status Retrieving in-page: EmbeddedContent +0ms
status Retrieving in-page: Canonical +0ms
status Retrieving in-page: RobotsTxt +0ms
status Retrieving trace +1ms
status Retrieving devtoolsLog & network records +110ms
status Retrieving: Scripts +27ms
status Retrieving: CSSUsage +53ms
status Retrieving: Viewport +192ms
status Retrieving: ViewportDimensions +5ms
status Retrieving: ThemeColor +13ms
status Retrieving: Manifest +2ms
status Retrieving: RuntimeExceptions +295ms
status Retrieving: ChromeConsoleMessages +1ms
status Retrieving: ImageUsage +2ms
status Retrieving: Accessibility +22ms
status Retrieving: LinkElements +526ms
status Retrieving: AnchorsWithNoRelNoopener +10ms
status Retrieving: AppCacheManifest +6ms
status Retrieving: Doctype +20ms
status Retrieving: DOMStats +4ms
status Retrieving: JSLibraries +50ms
status Retrieving: OptimizedImages +25ms
status Retrieving: PasswordInputsWithPreventedPaste +234ms
status Retrieving: ResponseCompression +3ms
status Retrieving: TagsBlockingFirstPaint +7ms
status Retrieving: MetaDescription +6ms
status Retrieving: FontSize +7ms
status Retrieving: CrawlableLinks +245ms
status Retrieving: MetaRobots +6ms
status Retrieving: Hreflang +2ms
status Retrieving: EmbeddedContent +2ms
status Retrieving: Canonical +3ms
status Retrieving: RobotsTxt +6ms
status Resetting state with about:blank +19ms
status Loading page & waiting for onload ServiceWorker, Offline, StartUrl +24ms
status Retrieving in-page: ServiceWorker +59ms
status Retrieving in-page: Offline +0ms
status Retrieving in-page: StartUrl +1ms
status Retrieving devtoolsLog & network records +0ms
status Retrieving: ServiceWorker +2ms
status Retrieving: Offline +1ms
status Retrieving: StartUrl +1ms
status Resetting state with about:blank +5ms
status Loading page & waiting for onload HTTPRedirect, HTMLWithoutJavaScript +48ms
status Retrieving in-page: HTTPRedirect +260ms
status Retrieving in-page: HTMLWithoutJavaScript +0ms
status Retrieving devtoolsLog & network records +0ms
status Retrieving: HTTPRedirect +7ms
status Retrieving: HTMLWithoutJavaScript +12ms
status Disconnecting from browser... +7ms
status Analyzing and running audits... +6ms
status Evaluating: Uses HTTPS +3ms
status Evaluating: Redirects HTTP traffic to HTTPS +24ms
status Evaluating: Registers a service worker that controls page and start_url +1ms
status Evaluating: Current page responds with a 200 when offline +0ms
status Evaluating: Has a `` tag with `width` or `initial-scale` +1ms
status Evaluating: Contains some content when JavaScript is not available +1ms
status Evaluating: First Contentful Paint +6ms
status Evaluating: First Meaningful Paint +54ms
status Evaluating: Page load is fast enough on mobile networks +10ms
status Evaluating: Speed Index +33ms
status Evaluating: Screenshot Thumbnails +529ms
status Evaluating: Final Screenshot +287ms
status Evaluating: Estimated Input Latency +2ms
status Evaluating: No browser errors logged to the console +16ms
status Evaluating: Server response times are low (TTFB) +1ms
status Evaluating: First CPU Idle +1ms
status Evaluating: Time to Interactive +30ms
status Evaluating: User Timing marks and measures +0ms
status Evaluating: Minimize Critical Requests Depth +2ms
status Evaluating: Avoid multiple page redirects +3ms
status Evaluating: Web app manifest meets the installability requirements +2ms
status Evaluating: Configured for a custom splash screen +1ms
status Evaluating: Sets an address-bar theme color +0ms
status Evaluating: Content is sized correctly for the viewport +1ms
status Evaluating: Displays images with correct aspect ratio +0ms
status Evaluating: Avoids deprecated APIs +1ms
status Evaluating: Minimizes main-thread work +0ms
status Evaluating: JavaScript execution time +11ms
status Evaluating: Preload key requests +3ms
status Evaluating: Preconnect to required origins +2ms
status Evaluating: All text remains visible during webfont loads +2ms
status Evaluating: Network Requests +1ms
status Evaluating: Metrics +2ms
status Evaluating: start_url responds with a 200 when offline +1ms
status Evaluating: Site works cross-browser +1ms
status Evaluating: Page transitions don't feel like they block on the network +0ms
status Evaluating: Each page has a URL +0ms
status Evaluating: `[aria-*]` attributes match their roles +1ms
status Evaluating: `[role]`s have all required `[aria-*]` attributes +1ms
status Evaluating: Elements with `[role]` that require specific children `[role]`s, are present +0ms
status Evaluating: `[role]`s are contained by their required parent element +1ms
status Evaluating: `[role]` values are valid +1ms
status Evaluating: `[aria-*]` attributes have valid values +0ms
status Evaluating: `[aria-*]` attributes are valid and not misspelled +1ms
status Evaluating: `<audio>` elements contain a `<track>` element with `[kind="captions"]` +1ms
status Evaluating: Buttons have an accessible name +1ms
status Evaluating: The page contains a heading, skip link, or landmark region +1ms
status Evaluating: Background and foreground colors have a sufficient contrast ratio +1ms
status Evaluating: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>` or `<template>` elements. +1ms
status Evaluating: Definition list items are wrapped in `<dl>` elements +0ms
status Evaluating: Document has a `<title>` element +1ms
status Evaluating: `[id]` attributes on the page are unique +1ms
status Evaluating: `<frame>` or `<iframe>` elements have a title +1ms
status Evaluating: `<html>` element has a `[lang]` attribute +0ms
status Evaluating: `<html>` element has a valid value for its `[lang]` attribute +1ms
status Evaluating: Image elements have `[alt]` attributes +1ms
status Evaluating: `<input type="image">` elements have `[alt]` text +1ms
status Evaluating: Form elements have associated labels +0ms
status Evaluating: Presentational `<table>` elements avoid using `<th>`, `<caption>` or the `[summary]` attribute. +1ms
status Evaluating: Links have a discernible name +1ms
status Evaluating: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +1ms
status Evaluating: List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements +1ms
status Evaluating: The document does not use `<meta http-equiv="refresh">` +0ms
status Evaluating: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. +1ms
status Evaluating: `<object>` elements have `[alt]` text +1ms
status Evaluating: No element has a `[tabindex]` value greater than 0 +1ms
status Evaluating: Cells in a `<table>` element that use the `[headers]` attribute only refer to other cells of that same table. +1ms
status Evaluating: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +0ms
status Evaluating: `[lang]` attributes have a valid value +1ms
status Evaluating: `<video>` elements contain a `<track>` element with `[kind="captions"]` +1ms
status Evaluating: `<video>` elements contain a `<track>` element with `[kind="description"]` +1ms
status Evaluating: `[accesskey]` values are unique +1ms
status Evaluating: Custom controls have associated labels +0ms
status Evaluating: Custom controls have ARIA roles +1ms
status Evaluating: User focus is not accidentally trapped in a region +0ms
status Evaluating: Interactive controls are keyboard focusable +0ms
status Evaluating: Headings don't skip levels +0ms
status Evaluating: Interactive elements indicate their purpose and state +1ms
status Evaluating: The page has a logical tab order +0ms
status Evaluating: The user's focus is directed to new content added to the page +1ms
status Evaluating: Offscreen content is hidden from assistive technology +0ms
status Evaluating: HTML5 landmark elements are used to improve navigation +0ms
status Evaluating: Visual order on the page follows DOM order +0ms
status Evaluating: Uses efficient cache policy on static assets +1ms
status Evaluating: Avoids enormous network payloads +3ms
status Evaluating: Defer offscreen images +1ms
status Evaluating: Eliminate render-blocking resources +12ms
status Evaluating: Minify CSS +28ms
status Evaluating: Minify JavaScript +64ms
status Evaluating: Defer unused CSS +69ms
status Evaluating: Serve images in next-gen formats +12ms
status Evaluating: Efficiently encode images +11ms
status Evaluating: Enable text compression +6ms
status Evaluating: Properly size images +6ms
status Evaluating: Use video formats for animated content +7ms
status Evaluating: Avoids Application Cache +11ms
status Evaluating: Page has the HTML doctype +0ms
status Evaluating: Avoids an excessive DOM size +1ms
status Evaluating: Links to cross-origin destinations are safe +2ms
status Evaluating: Avoids requesting the geolocation permission on page load +1ms
status Evaluating: Avoids `document.write()` +0ms
status Evaluating: Avoids front-end JavaScript libraries with known security vulnerabilities +0ms
status Evaluating: Detected JavaScript libraries +9ms
status Evaluating: Avoids requesting the notification permission on page load +1ms
status Evaluating: Allows users to paste into password fields +0ms
status Evaluating: Uses HTTP/2 for its own resources +0ms
status Evaluating: Uses passive listeners to improve scrolling performance +1ms
status Evaluating: Document has a meta description +0ms
status Evaluating: Page has successful HTTP status code +1ms
status Evaluating: Document uses legible font sizes +5ms
status Evaluating: Links have descriptive text +1ms
status Evaluating: Page isn’t blocked from indexing +1ms
status Evaluating: robots.txt is valid +2ms
status Evaluating: Document has a valid `hreflang` +1ms
status Evaluating: Document avoids plugins +1ms
status Evaluating: Document has a valid `rel=canonical` +0ms
status Evaluating: Page is mobile friendly +1ms
status Evaluating: Structured data is valid +0ms
status Generating results... +0ms
ChromeLauncher Killing Chrome instance 7098 +59ms
Printer html output written to /home/chandan/koreantech.org.com_2019-01-20_19-29-35.report.html +46ms
CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +1ms
위의 결과에서 마지막 두 번째 줄에 보고서가 저장된 경로가 표시됩니다. 기본적으로 HTML 형식의 보고서가 생성되며, PC로 다운로드하거나 웹 서버를 통해 확인할 수 있습니다.
만약 JSON 형식으로 보고서를 생성해야 한다면 어떻게 해야 할까요?
다음 명령어를 통해 JSON 형식으로 출력할 수 있습니다.
lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json
라이트하우스 CLI는 다양한 방법으로 활용 가능합니다. 자세한 정보는 GitHub 저장소를 참고하여 CLI 사용법 또는 프로그래밍 방식을 학습하는 것을 권장합니다.
결론
구글 라이트하우스는 웹사이트 성능과 사용자 경험을 개선하기 위한 지속적인 테스트를 수행하는 데 매우 유용한 도구입니다. 만약 WordPress를 사용하고 있으며 웹사이트 로딩 속도 개선을 원한다면 로켓을 확인해 보십시오.