نصب و استفاده از Lighthouse CLI

روش نصب و استفاده از Lighthouse CLI

ابزارهای گوناگونی برای بررسی یک صفحه وب از دیدگاه های مختلف مانند سئو وجود دارد که همواره با توجه به آپدیت های جدید گوگل و تغییر استانداردها، در حال بروزرسانی و دقیق تر شدن هستند. یکی از ابزارهای معتبر بررسی صفحات وب که توسط گوگل به صورت متن باز توسعه یافته و از سال 2015 در اختیار کاربران قرار گرفته،‌ ابزار Lighthouse گوگل است. این ابزار از اواسط سال 2022 توانایی اندازه گیری پارامترهای مرتبط با Core Web Vitals را دارا شد.

ابزار لایت هاوس در دو نسخه GUI و نسخه CLI (خط فرمان) عرضه شده است. در این مقاله در مورد Lighthouse CLI توضیح داده شده که شامل بخش های زیر است:

Lighthouse چیست؟

Google Lighthouse یک ابزار رایگان و منبع باز است که برای ارزیابی عملکرد وب سایت ها در زمینه هایی مانند سرعت، دسترسی پذیری، قابلیت استفاده و SEO استفاده می شود. این ابزار می تواند به توسعه دهندگان و مالکان وب سایت ها کمک کند تا سایت های خود را بهبود بخشند و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم کنند.

نتیجه گزارش لایت هاوس در پنج کتگوری زیر ارائه می شود که هر کدام از کتگوری ها شامل معیار های مختلفی هستند:

  • Performance: ارزیابی های متعددی از دیدگاه پرفورمنس توسط لایت هاوس انجام می شود که تمرکز آنها به صورت کلی بر روی سرعت بارگذاری صفحه وب سایت است. برخی از مواردی که مورد ارزیابی قرار می گیرند عبارتند از First Contentful Paint، First Meaningful Paint، Speed Index، First CPU Idle و Time to Interactive.
  • Accessibility: لایت هاوس صفحه را از نظر میزان دسترسی پذیری که شامل موارد متعدد مرتبط با رنگ، اندازه فونت، موارد مرتبط با دستگاه های screen reader مانند لیبل ها، دکمه ها، alt تصاویر و آیتم های مشابه است می شود.
  • Best practices: لایت هاوس صفحه را از دیدگاه best practices (بهترین روش) شامل موارد مرتبط با جاوا اسکریپت،‌ HTTPS، ارورهای احتمالی در کنسول مرورگر و aspect ratio تصاویر و موارد متعدد دیگر بررسی می کند.
  • SEO: لایت هاوس صفحه را از دیدگاه سئو نیز بررسی می کند. این بررسی شامل مواردی مانند لینک ها، متاها، canonical، robots.txt، عکس ها و موارد متعدد دیگر می شود.
  • PWA: لایت هاوس صفحات را از نظر استانداردهای Progressive Web App بررسی می کند.
اجزا مختلف گزارش لایت هاوس
اجزا مختلف گزارش لایت هاوس

Lighthouse CLI چیست؟

Lighthouse را می‌توان به صورت دستی از طریق DevTools مرورگر گوگل کروم، از طریق سرویس های آنلاین مانند PageSpeed Insights و یا با استفاده از Command Line یا خط فرمان اجرا کرد. به لایت هاوسی که توسط خط فرمان اجرا می شود، Lighthouse CLI که مخفف Lighthouse Command Line Interface است گفته می شود.

تفاوت Lighthouse CLI و Lighthouse CI در چیست؟

همان طور که از نام Lighthouse CLI مشخص است، از آن برای استفاده از لایت هاوس توسط خط فرمان استفاده می شود ولی از Lighthouse CI که مخفف Lighthouse Continuous Integration است برای اتوماسیون و خودکارسازی تست پروژه ها توسط ابزار لایت هاوس استفاده می شود.

می توانید اطلاعات بیشتر در مورد Lighthouse CI را در ریپازیتوری آن در گیت هاب بیابید.

روش نصب npm

برای نصب Lighthouse CLI به Node Package Manager (npm) نیاز است و بنابراین ابتدا باید Node.js نصب شود. در ادامه در خصوص نصب Node.js در سیستم عامل های ویندوز، مک و Ubuntu به تفکیک توضیح داده شده است.

جهت استفاده از Lighthouse CLI به Node.js 18 یا نسخه های جدید تر نیاز است.

جهت نصب Node.js بر روی سیستم عامل مایکروسافت ویندوز، ابتدا فایل Windows Installer (.msi) آن را از سایت اصلی Node.js دانلود کرده و نصب نمایید.

جهت نصب Node.js بر روی سیستم عامل مک، ابتدا فایل macOS Installer (.pkg) آن را از سایت اصلی Node.js دانلود کرده و نصب نمایید.

جهت نصب Node.js بر روی سیستم عامل Ubuntu، به روش زیر عمل کنید:

1- دانلود و ایمپورت Nodesource GPG key

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

2- ایجاد ریپازیتوری deb

NODE_MAJOR=21
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

جهت استفاده از لایت هاوس CLI، مقدار NODE_MAJOR باید دست کم 18 باشد. مقادیر 20 و 21 نیز نسخه های جدید تر Node.js هستند.

3- اجرای آپدیت و نصب Node.js

sudo apt-get update
sudo apt-get install nodejs -y

4- مشاهده نسخه Node.js نصب شده

node --version

پس از نصب Node.js، نوبت به نصب Lighthouse CLI از طریق npm می رسد.

روش نصب Lighthouse CLI

پس از نصب npm که به همراه Node.js نصب می شود، با وارد کردن کامند زیر در ترمینال مک یا Ubuntu و یا در Command Prompt سیستم عامل ویندوز، نسبت به نصب لایت هاوس CLI اقدام کنید.

کلیه کامندهایی که در ادامه توضیح داده شده اند، قابل استفاده در ترمینال لینوکس و مک، و همچنین command prompt ویندوز هستند.

برخی از کامند ها مانند npm install در لینوکس به دسترسی super user نیاز دارند.

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

اگر از آپشن g برای نصب global لایت هاوس استفاده کنید، کامندهای لایت هاوس را می توانید در هر دایرکتوری که مد نظرتان بود اجرا کنید.

برای اطمینان از موفقیت آمیز بودن نصب Lighthouse و مشاهده نسخه نصب شده، کامند زیر را در ترمینال وارد کنید.

lighthouse --version

روش استفاده از Lighthouse CLI

برای استفاده از Lighthouse CLI باید مرورگر گوگل کروم روی سیستم نصب شده باشد.

Lighthouse CLI دارای امکانات و قابلیت های زیادی است. برای آشنایی با آپشن های آن،‌ کامند زیر را اجرا کنید.

lighthouse --help

به صورت کلی، کامند lighthouse به صورت زیر قابل استفاده است. در ادامه، تعدادی از کامند هایی که برای متخصصین SEO کاربردی است را مشاهده می کنید.

lighthouse <url> <options>

بررسی یک صفحه با لایت هاوس CLI

در ادامه با کامند lighthouse به همراه تعدادی از آپشن های پرکاربرد آشنا می شوید. جهت بررسی یک صفحه بدون هیچ آپشن خاصی، از کامندهای زیر استفاده کنید. سپس نتیجه آن در آدرسی که در انتهای خط فرمان به شما نمایش داده خواهد شد، با فرمت HTML ذخیره می شود.

lighthouse https://www.webyooz.com/
lighthouse https://www.webyooz.com/gsc-training/
اجرای Lighthouse CLI در ترمینال macOS
اجرای Lighthouse CLI در ترمینال macOS

رویت گزارش لایت هاوس پس از اتمام بررسی

در صورتی که از کامند زیر استفاده کنید، نتیجه بررسی لایت هاوس پس از اتمام کار، در مرورگر به شما نمایش داده خواهد شد.

lighthouse <url> --view

نمونه:

lighthouse https://www.webyooz.com/ --view

تعیین فرمت خروجی گزارش لایت هاوس

با استفاده از کامند زیر می توانید خروجی نتیجه لایت هاوس را با سه فرمت html، json و csv ذخیره کنید.

lighthouse <url> --output
lighthouse https://www.webyooz.com/ --output=json
lighthouse https://www.webyooz.com/ --output=html --output=json --output=csv

خروجی نتیجه لایت هاوس به صورت پیشفرض با فرمت HTML است.

امکان گرفتن خروجی نتیجه با بیش از یک فرمت به صورت همزمان وجود دارد.

برای مشاهده گزارش با فرمت json از Lighthouse Viewer استفاده کنید.

تعیین مسیر خروجی گزارش لایت هاوس

ٰهمان طور که در توضیح نصب lighthouse CLI گفته شد، با توجه به استفاده از آپشن g در حین نصب لایت هاوس، کامندهای لایت هاوس را در هر مسیری که اجرا کنید، خروجی نتیجه بررسی در همان مسیر ذخیره خواهد شد. اما اگر قصد داشتید که خروجی نتیجه را در مسیر مشخصی ذخیره کند، می توانید از کامند زیر استفاده نمایید.

lighthouse <url> --output-path
lighthouse https://www.webyooz.com/ --output=html --output-path=/home/admin/Downloads/result.html
lighthouse https://www.webyooz.com/ --output=json --output-path=/home/admin/Downloads/result.json

تعیین نوع دستگاه و ابعاد viewport

بررسی لایت هاوس به صورت پیشفرض با preset موبایل انجام می شود.

lighthouse <url> --preset
lighthouse https://www.webyooz.com/ --preset=desktop
lighthouse https://www.webyooz.com/ --preset=mobile
lighthouse https://www.webyooz.com/ --chrome-flags="--window-size=800,600"

محدود کردن بررسی لایت هاوس به کتگوری (های) مشخص

بررسی لایت هاوس در 5 کتگوری accessibility, best-practices, performance, seo, pwa انجام می شود. این امکان وجود دارد که audit را به کتگوری یا کتگوری های خاصی محدود کرد.

lighthouse <url> --categories [array]
lighthouse https://www.webyooz.com/ --only-categories accessibility 
lighthouse https://www.webyooz.com/ --only-categories best-practices,seo

مشاهده آیتم های قابل بررسی در کتگوری های مختلف

lighthouse --list-all-audits

نتیجه کامند بالا به این صورت خواهد بود:

{
  "audits": [
    "accessibility/accesskeys",
    "accessibility/aria-allowed-attr",
    "accessibility/aria-allowed-role",
    "accessibility/aria-command-name",
    "accessibility/aria-dialog-name",
    "accessibility/aria-hidden-body",
    "accessibility/aria-hidden-focus",
    "accessibility/aria-input-field-name",
    "accessibility/aria-meter-name",
    "accessibility/aria-progressbar-name",
    "accessibility/aria-required-attr",
    "accessibility/aria-required-children",
    "accessibility/aria-required-parent",
    "accessibility/aria-roles",
    "accessibility/aria-text",
    "accessibility/aria-toggle-field-name",
    "accessibility/aria-tooltip-name",
    "accessibility/aria-treeitem-name",
    "accessibility/aria-valid-attr-value",
    "accessibility/aria-valid-attr",
    "accessibility/button-name",
    "accessibility/bypass",
    "accessibility/color-contrast",
    "accessibility/definition-list",
    "accessibility/dlitem",
    "accessibility/document-title",
    "accessibility/duplicate-id-active",
    "accessibility/duplicate-id-aria",
    "accessibility/empty-heading",
    "accessibility/form-field-multiple-labels",
    "accessibility/frame-title",
    "accessibility/heading-order",
    "accessibility/html-has-lang",
    "accessibility/html-lang-valid",
    "accessibility/html-xml-lang-mismatch",
    "accessibility/identical-links-same-purpose",
    "accessibility/image-alt",
    "accessibility/image-redundant-alt",
    "accessibility/input-button-name",
    "accessibility/input-image-alt",
    "accessibility/label-content-name-mismatch",
    "accessibility/label",
    "accessibility/landmark-one-main",
    "accessibility/link-in-text-block",
    "accessibility/link-name",
    "accessibility/list",
    "accessibility/listitem",
    "accessibility/manual/custom-controls-labels",
    "accessibility/manual/custom-controls-roles",
    "accessibility/manual/focus-traps",
    "accessibility/manual/focusable-controls",
    "accessibility/manual/interactive-element-affordance",
    "accessibility/manual/logical-tab-order",
    "accessibility/manual/managed-focus",
    "accessibility/manual/offscreen-content-hidden",
    "accessibility/manual/use-landmarks",
    "accessibility/manual/visual-order-follows-dom",
    "accessibility/meta-refresh",
    "accessibility/meta-viewport",
    "accessibility/object-alt",
    "accessibility/select-name",
    "accessibility/skip-link",
    "accessibility/tabindex",
    "accessibility/table-duplicate-name",
    "accessibility/table-fake-caption",
    "accessibility/target-size",
    "accessibility/td-has-header",
    "accessibility/td-headers-attr",
    "accessibility/th-has-data-cells",
    "accessibility/valid-lang",
    "accessibility/video-caption",
    "autocomplete",
    "bf-cache",
    "bootup-time",
    "byte-efficiency/duplicated-javascript",
    "byte-efficiency/efficient-animated-content",
    "byte-efficiency/legacy-javascript",
    "byte-efficiency/modern-image-formats",
    "byte-efficiency/offscreen-images",
    "byte-efficiency/render-blocking-resources",
    "byte-efficiency/total-byte-weight",
    "byte-efficiency/unminified-css",
    "byte-efficiency/unminified-javascript",
    "byte-efficiency/unused-css-rules",
    "byte-efficiency/unused-javascript",
    "byte-efficiency/uses-long-cache-ttl",
    "byte-efficiency/uses-optimized-images",
    "byte-efficiency/uses-responsive-images-snapshot",
    "byte-efficiency/uses-responsive-images",
    "byte-efficiency/uses-text-compression",
    "content-width",
    "critical-request-chains",
    "csp-xss",
    "deprecations",
    "diagnostics",
    "dobetterweb/charset",
    "dobetterweb/doctype",
    "dobetterweb/dom-size",
    "dobetterweb/geolocation-on-start",
    "dobetterweb/inspector-issues",
    "dobetterweb/js-libraries",
    "dobetterweb/no-document-write",
    "dobetterweb/notification-on-start",
    "dobetterweb/paste-preventing-inputs",
    "dobetterweb/uses-http2",
    "dobetterweb/uses-passive-event-listeners",
    "errors-in-console",
    "final-screenshot",
    "font-display",
    "image-aspect-ratio",
    "image-size-responsive",
    "installable-manifest",
    "is-on-https",
    "largest-contentful-paint-element",
    "layout-shift-elements",
    "lcp-lazy-loaded",
    "long-tasks",
    "main-thread-tasks",
    "mainthread-work-breakdown",
    "manual/pwa-cross-browser",
    "manual/pwa-each-page-has-url",
    "manual/pwa-page-transitions",
    "maskable-icon",
    "metrics",
    "metrics/cumulative-layout-shift",
    "metrics/first-contentful-paint",
    "metrics/first-meaningful-paint",
    "metrics/interaction-to-next-paint",
    "metrics/interactive",
    "metrics/largest-contentful-paint",
    "metrics/max-potential-fid",
    "metrics/speed-index",
    "metrics/total-blocking-time",
    "network-requests",
    "network-rtt",
    "network-server-latency",
    "no-unload-listeners",
    "non-composited-animations",
    "oopif-iframe-test-audit",
    "performance-budget",
    "predictive-perf",
    "preload-fonts",
    "prioritize-lcp-image",
    "redirects",
    "resource-summary",
    "screenshot-thumbnails",
    "script-elements-test-audit",
    "script-treemap-data",
    "seo/canonical",
    "seo/crawlable-anchors",
    "seo/font-size",
    "seo/hreflang",
    "seo/http-status-code",
    "seo/is-crawlable",
    "seo/link-text",
    "seo/manual/structured-data",
    "seo/meta-description",
    "seo/plugins",
    "seo/robots-txt",
    "seo/tap-targets",
    "server-response-time",
    "splash-screen",
    "themed-omnibox",
    "third-party-cookies",
    "third-party-facades",
    "third-party-summary",
    "timing-budget",
    "unsized-images",
    "user-timings",
    "uses-rel-preconnect",
    "uses-rel-preload",
    "valid-source-maps",
    "viewport",
    "work-during-interaction"
  ]
}

بررسی با audit (های) مشخص

lighthouse <url> --only-audits [array]
lighthouse https://www.webyooz.com/ --only-audits image-aspect-ratio
lighthouse https://www.webyooz.com/ --only-audits canonical,font-display

جلوگیری از بررسی audit (های) مشخص

lighthouse <url> --skip-audits [array]
lighthouse https://www.webyooz.com/ --skip-audits duplicate-id-aria
lighthouse https://www.webyooz.com/ --skip-audits canonical,font-display

بررسی صفحه با مرورگر گوگل کروم headless

در حین تست یک آدرس با Lighthouse CLI، این ابزار از مرورگر گوگل کروم استفاده می کند و به صورت خودکار آن را باز کرده و پس از بررسی صفحه، مرورگر را خواهد بست. اگر قصد داشتید که از گوگل کروم headless برای بررسی صفحات با لایت هاوس استفاده کنید، از کامند زیر استفاده کنید.

مروگر headless بدون GUI است و در رم اجرا می شود.

lighthouse <url> --chrome-flags="--headless" 
lighthouse https://www.webyooz.com/ --chrome-flags="--headless"

اعمال تغییر در HTTP request header

این امکان در Lighthouse CLI وجود دارد که هدرهای دلخواه را در HTTP request header ارسال کنید.

lighthouse <url> --extra-headers
lighthouse https://www.webyooz.com/ --extra-headers "{\"Cookie\":\"name1=value1\", \"name2\":\"value2\"}"

ارسال درخواست با یک یوزر ایجنت مشخص

این امکان در lighthouse CLI وجود دارد که یوزر ایجنت را در HTTP request header تغییر داد.

جهت آشنایی با یوزرایجنت، مطالعه راهنمای جامع User-Agent مفید خواهد بود.

lighthouse <url> --emulatedUserAgent [string]
lighthouse https://www.webyooz.com/ --emulatedUserAgent YOUR_CUSTOM_UA

بررسی دسته ای آدرس ها با Lighthouse CLI

اگر بررسی های زیادی با Lighthouse انجام می دهید و به صورت روزمره این کار را با آدرس های ثابت تکرار می کنید، می توانید از قابلیت batch استفاده کنید که به صورت یکجا، تعدادی آدرس را با لایت هاوس بررسی کنید و نیازی به اجرای کامند به ازای هر آدرس نباشد.

برای بررسی دسته ای تعدادی آدرس، ابتدا یک فایل با فرمت متنی ایجاد کنید که حاوی آدرس های مد نظر باشد. در نمونه زیر، فایل تکست با نام page-list.txt ذخیره شده است.

لیست آدرس صفحات جهت بررسی دسته ای با لایت هاوس
فایل متنی حاوی لیست آدرس صفحات جهت بررسی دسته ای با لایت هاوس

بررسی دسته ای آدرس ها با لایت هاوس در ویندوز

اگر از سیستم عامل ویندوز استفاده می کنید، با استفاده از یک ادیتور متنی مانند Notepad ++، اطلاعات زیر را با فرمت bat با نامی مانند lighthouse.bat ذخیره کنید.

در صورتی که از Notepad ویندوز برای این کار استفاده کنید، ممکن است فایل bat به درستی کار نکند.

آدرس فایل متنی خودتان که حاوی لیست آدرس ها است و در مرحله قبل ایجاد کردید را با اطلاعاتی که در ادامه وجود دارد جایگزین نمایید.

@Echo Off
FOR /F "delims=" %%a in (C:\Users\YOUR_CUSTOM_PATH\page-list.txt) DO (
	ECHO Line is: %%a
	lighthouse --quiet --chrome-flags="--headless" %%a
)

در نمونه بالا از FOR و DO جهت ایجاد یک لوپ استفاده شده است.

حال می توانید با باز کردن command prompt در سیستم عامل ویندوز و اجرای فایل lighthouse.bat با استفاده از کامند زیر، همه آدرس هایی که در فایل page-list.txt هستند را با یک کامند و پشت سر هم بررسی کنید.

lighthouse.bat

بررسی دسته ای آدرس ها با لایت هاوس در macOS و Ubuntu

اگر از سیستم عامل macOS یا Ubuntu استفاده می کنید، با استفاده از یک ادیتور متنی، اطلاعات زیر را با فرمت sh با نامی مانند lighthouse.sh ذخیره کنید.

آدرس فایل متنی خودتان که حاوی لیست آدرس ها است و در مرحله قبل ایجاد کردید را با اطلاعاتی که در ادامه وجود دارد جایگزین نمایید.

#!/bin/bash
while IFS='' read -r l || [ -n "$l" ]; do
	echo 'Working on report for the site… ' $l
	lighthouse --quiet --output=html --chrome-flags="--headless" $l
done < "page-list.txt"

سپس با استفاده از کامند chmod زیر، دسترسی اجرا را به فایل lighthouse.sh بدهید.

chmod +x lighthouse.sh

اکنون می توانید با باز کردن ترمینال در سیستم عامل های مک و اوبنتو و اجرای فایل lighthouse.sh با استفاده از کامند زیر، همه آدرس هایی که در فایل page-list.txt هستند را با یک کامند و پشت سر هم بررسی کنید.

./lighthouse.sh

پرسش های متداول در مورد Lighthouse CLI

امکان نصب Lighthouse CLI روی چه سیستم عامل هایی وجود دارد؟

Lighthouse CLI قابل نصب روی سیستم عامل های ویندوز، مک و لینوکس است.

با چه فرمت هایی می توان از Lighthouse CLI خروجی گرفت؟

لایت هاوس می تواند خروجی نتیجه را با فرمت های HTML، JSON و CSV تولید کند.

آیا امکان گرفتن خروجی audit همزمان با سه فرمت HTML و JSON و CSV وجود دارد؟

بله، این امکان وجود دارد که خروجی audit لایت هاوس CLI با یک، دو یا هر سه فرمت HTML, JSON و CSV صادر و ذخیره شود.

آیا می شود فقط برخی از audit های مشخص را با لایت هاوس CLI انجام داد؟

بله، با استفاده از آپشن only-categories امکان محدود کردن audit به کتگوری های خاص مانند SEO، best practice، performance، accessibility و PWA وجود دارد. همچنین امکان محدود کردن سرچ به برخی جزئیات کتگوری ها نیز با استفاده از آپشن های only-audits و skip-audits وجود دارد.

آیا امکان استفاده از Lighthouse CLI با مرورگرهای دیگر هست؟

خیر، جهت استفاده از لایت هاوس CLI به مرورگر گوگل کروم نیاز است.

🔗 منبع: Google Chrome GitHub

نوشته‌های مرتبط

2 دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *