گوگل لایت هاوس Google Lighthouse چیست و چه کاربردهایی دارد؟
این روزها انتظارات از وبسایت شما زیاد است، نه تنها باید زیبا و جذب کننده باشد بلکه سرعت بارگذاری صفحات آن در دستگاه های مختلف نیز از اهمیت بالایی برخوردار است. فرآیند نظارت بر سرعت و عملکرد یک وبسایت حتی برای توسعه دهندگان کار کشته نیز امر دشواری محسوب می شود، اما با استفاده از ابزارهایی نظیر گوگل لایت هاوس Google Lighthouse یا همان فانوس دریایی گوگل می توان به راحتی هرچه تمام تر صفحات وبسایت را بهینه سازی کرد. امروز در داناپ ابزار گوگل لایت هاوس را مورد بررسی قرار داده و کاربردهای آن را نیز معرفی خواهیم کرد.
گوگل لایت هاوس Google Lighthouse چیست؟
گوگل لایت هاوس ابزاری است که با هدف تقویت و افزایش کیفیت صفحات وبسایت طراحی شده است؛ این ابزار مواردی نظیر سرعت بارگذاری (Loading)، سطح دسترسی و سئو صفحات وبسایت را مورد تجزیه و تحلیل قرار می دهد. در حقیقت کیفیت هر صفحه از وبسایت نقش تعیین کننده ای در سئوی کلی آن وبسایت دارد.
ابزار گوگل لایت هاوس نخست با هدف آنالیز وب اپلیکیشن های پیش رونده (PWA) طراحی شد اما کمپانی گوگل تصمیم گرفت آن را در اختیار تمام طراحان وب قرار دهد. این ابزار تست هایی با نام Audit اجرا می کند و در آن چگونگی عملکرد و بارگذاری صفحات وبسایت در شرایط شبیه سازی شده اندازه گیری می شود؛ شرایط شبیه سازی شده مواردی نظیر افت سرعت اینترنت، از دست دادن پاکت دیتا (Pocket) و خرابی نتورک را شامل می شود.
در حقیقت هدف اصلی گوگل لایت هاوس کمک به بهینه سازی و افزایش سرعت بارگذاری یک وبسایت است، به همین دلیل سعی می کند عملکرد سایت را در شرایطی حقیقی و غیر ایده آل نیز مورد آزمایش قرار دهد.
گوگل لایت هاوس به چه مواردی امتیاز می دهد؟
پس از اسکن وبسایت توسط گوگل Google Lighthouse، نتیجه طبق 5 معیار اندازه گیری جداگانه به شما ارائه خواهد شد. این پنج معیار عبارتند از :
-
عملکرد (Performance)
عملکرد صفحات وبسایت نشان دهنده سرعت کلی وبسایت است. وبسایت شما شاید دارای تصاویر زیبا و باکیفیتی باشد اما به خاطر سرعت بارگذاری پایین، کاربر قبل از لود شدن تصاویر وبسایت را ترک خواهد کرد. در حقیقت سرعت بارگذاری بالا باعث می شود گوگل وبسایت شما را در اولویت قرار داده و آن را جزو نتایج نخست جستجو قرار دهد.
-
سطح دسترسی (Accessibility)
این تست وضعیت Header صفحات را بررسی می کند، علاوه بر این با اجرای تست هایی متعدد رنگ و متن صفحات را مورد آزمایش قرار داده و از خوانایی محتوای وبسایت برای کاربرانی که بینایی ضعیفی دارند، اطمینان حاصل می کند. علاوه بر این چون شناسایی تمام مشکلات از طریق تست های اتوماتیک امکان پذیر نیست، شما باید به صورت دستی تست های مربوطه را انجام دهید.
-
بهترین روش ها (Best Practices)
این تست به نسبت موارد دیگر جامع تر است و بیشتر روی آسیب پذیری و مشکلات امنیتی وبسایت تمرکز می کند. در حقیقت این تست ارورهای پشت صحنه، کتابخانه های تاریخ گذشته و لینک های ناامن را در وبسایت پیدا می کند.
-
سئو (SEO)
اکثر توسعه دهندگان با مفهوم سئو آشنایی دارند، اما با استفاده از گوگل لایت هاوس می توانند از وضعیت وبسایت در موتورهای جستجو اطمینان حاصل کنند. برای مثال مواردی نظیر تگ های H1، توضیحات متا و کلیدواژه کانونی توسط این ابزار مورد بررسی قرار می گیرد، همچنین در طی این تست، فهرستی از آیتم ها به صورت دستی مورد بررسی قرار می گیرند.
-
وب اپلیکیشن پیش رونده (Progressive Web App)
این تست پس از اسکن وبسایت وضعیت بارگذاری صفحات آن در دستگاه های موبایل را مورد بررسی قرار می دهد، همچنین سطح دسترسی آفلاین کاربران به صفحات را مورد ارزیابی قرار می دهد. اگر منطقه جغرافیایی شما از اینترنت پرسرعت و باکیفیتی برخوردار نیست، اجرای این تست برای وبسایت بسیار حائز اهمیت خواهد بود.
چرا امتیاز گوگل لایت هاوس برای توسعه دهندگان مهم است؟
حال که با تست های Google Lighthouse آشنا شدید، بد نیست از اهمیت این ابزار نیز مطلع شوید. امروزه کاربران برای جستجوی اینترنتی از دستگاه های موبایل استفاده می کنند، به همین دلیل بهینه سازی وبسایت برای اجرای راحت و روان در مرورگرهای موبایل از اهمیت ویژه ای برخوردار است. اگرچه با اینکار وضعیت بارگذاری صفحات وبسایت در کامپیوترهای دسکتاپ نیز بهینه سازی خواهد شد.
این موضوع همچنین قابلیت جستجو وبسایت را نیز تقویت می کند، به این معنی که یک سایت با عملکرد مطلوب رتبه بهتری نیز در موتورهای جستجو کسب خواهد کرد و در نهایت نسبت به رقبا مخاطبان بیشتری جذب می نماید.
رقابت در جذب مخاطب
سایت GoDaddy برای نشان دادن تاثیرگذاری گوگل لایت هاوس آزمایشی انجام داده است، در این آزمایش عینی آنها با استفاده از 4 ابزار متدوال در بازار (GoDaddy Websites + Marketing، Squarespace، Weebly و Wix) یک وبسایت نمونه طراحی کرده و سپس اقدامات زیر را انجام دادند :
- با استفاده از هر 4 ابزار طراحی، 3 وبسایت مشابه راه اندازی کردند (مجموعاً 12 وبسایت)
- هر وبسایت را به عنوان نماینده یک کسب و کار کوچک در نظر گرفته اند.
- برای 3 بیزنس مربوط به آژانس های املاک، رستوران و خدمات بهداشتی حداقل 4 وبسایت مشابه در نظر گرفته شده و هر وبسایت تا حد ممکن مجهز به تصاویر، متن و امکانات مشابه می باشد.
- پس از راه اندازی 12 وبسایت، تست های گوگل لایت هاوس را روی هرکدام پیاده سازی کرده و مشخص شد که امتیاز بالاتر گوگل لایت هاوس برابر با عملکرد بهتر هر سایت است.
در آزمایش بالا مشخص شد اگر زمان بارگذاری یک وبسایت بیش از یک ثانیه به طول انجامد، 32 درصد بازدیدکنندگان صفحات آن را ترک خواهند کرد، بنابراین با استفاده از Google Lighthouse می توان بخش های کند و با تاخیر وبسایت را شناسایی کرده و بهینه سازی مورد نیاز را بر روی آنها انجام دهید.
نحوه استفاده از گوگل لایت هاوس
Web.dev
گوگل اخیراً وبسایت web.dev را راه اندازی کرده است که از طریق آن می توان به صورت آنلاین تست های ابزار گوگل لایت هاوس را روی وبسایت اجرا کرد. روش کار بدین گونه است که با وارد کردن URL می توان تست های مربوطه را انجام داده و در عرض چند ثانیه امتیازات مربوطه را مشاهد کرد. میزان موفقیت آمیز بودن هر معیار نیز در صفحه نتایج نمایش داده می شود، بنابراین پس از اجرای هر تست به راحتی می توان نکات مهم و حائز اهمیت مربوط به هر معیار را شناسایی کرد.
البته وقت خود را برای رسیدن به نمره 100 هدر ندهید چرا که صفحات خود گوگل نیز قادر به کسب این نمره نیستند! در عوض سعی کنید از آن به عنوان یک راهنما در بهینه سازی و بهبود عملکرد وبسایت خود استفاده کنید.
کروم
امکان استفاده از ابزار گوگل لایت هاوس بر روی مرورگر کروم نیز وجود دارد و از طریق آن می توان تست های مربوطه را در موبایل یا کامپیوتر دسکتاپ انجام داد. برای استفاده از این افزونه باید به صورت زیر عمل کنید :
- مرورگر کروم را باز کنید.
- سایت خود را باز کنید.
- با فشردن کلید F12 صفحه Developer Tools را باز کنید یا اینکه بر روی صفحه راست کلیک کرده و گزینه Inspect را انتخاب کنید.
- روی تب Audit کلیکی کنید.
همانطور که مشاهده می کنید، شما قادر خواهید بود انواع تست ها را در دستگاه ها و شرایط شبیه سازی شده مختلف پیاده سازی کنید. نتایج بدست آمده در web.dev و کروم تقریباً مشابه یکدیگر هستند، اما معیار اندازه گیری برای وب اپلیکیشن های پیش رونده (PWA) نیز در کروم وجود دارد.
Node.js
گوگل لایت هاوس به عنوان یکی از ماژول های فریم ورک Node.js نیز در اختیار توسعه دهندگان قرار دارد. در حقیقت می توان این ابزار را روی سرور اپلیکیشن مربوطه نصب کرده و آن را در برنامه نویسی یا Command Line مورد استفاده قرار داد. در ادامه نحوه نصب گوگل لایت هاوس بر روی Ubuntu 18.x را مرور خواهیم کرد :
برای نصب گوگل لایت هاوس بر روی سرور DigitalOcean باید از نسخه LTS8.9 یا بالاتر nodejs استفاده کنید، همچنین باید مرورگر Chromium را روی سرور نصب کرده باشید. سپس مراحل زیر را انجام دهید :
- وارد سرور خود شوید.
- دستور زیر را برای نصب گوگل لایت هاوس اجرا کنید :
1 |
npm install -g lighthouse |
در این دستور(-g) برای نصب ماژول گوگل لایت هاوس به کار می رود :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
root@geekflarelab:~# 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 > axe-core@3.1.2 postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core > node build/utils/postinstall.js + lighthouse@4.0.0 added 179 packages from 119 contributors in 10.094s root@geekflarelab:~# |
پس از این عملیات، دستور lighthouse را اجرا کنید تا از نصب صحیح گوگل لایت هاوس مطمئن شوید:
1 2 3 4 5 6 7 8 9 10 |
root@geekflarelab:~# lighthouse Please provide a url Specify --help for available options root@geekflarelab:~# |
اکنون می توانید تست های گوگل لایت هاوس را روی اجرا کنید، برای مثال فرض کنید می خواهید تست را روی یک مرورگر Headless اجرا کنید :
1 |
lighthouse URL --chrome-flags="--headless" |
به خاطر داشته باشید که URL باید به صورت کامل و به همراه http و https وارد شود :
برای مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 |
chandan@geekflarelab:~$ lighthouse https://geekflare.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 `<meta name="viewport">` 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/geekflare.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 ارائه می شود که می توان آن را دانلود و در کامپیوتر ذخیره کرد. همچنین اگر بخواهید تست را در فرمت JSON انجام دهید باید به طریق زیر عمل کنید :
1 |
lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json |
با استفاده از گوگل لایت هاوس CLI، کنترل بیشتری بر روی آن خواهید داشت و می توانید هرطور که ترجیح می دهید از آن استفاده کنید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.