بررسی اجمالی

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

لوگوی فانوس دریایی

می‌توانید Lighthouse را در Chrome DevTools، از خط فرمان یا به‌عنوان یک ماژول Node اجرا کنید. شما به Lighthouse یک URL برای ممیزی می دهید، یک سری ممیزی بر روی صفحه انجام می دهد، و سپس گزارشی از عملکرد صفحه ارائه می دهد. از آنجا، از ممیزی های ناموفق به عنوان شاخصی برای بهبود صفحه استفاده کنید. هر ممیزی دارای یک سند مرجع است که دلیل اهمیت ممیزی و همچنین نحوه رفع آن را توضیح می دهد.

همچنین می توانید از Lighthouse CI برای جلوگیری از رگرسیون در سایت های خود استفاده کنید.

ویدیوی زیر را از Google I/O بررسی کنید تا درباره نحوه استفاده و مشارکت در Lighthouse اطلاعات بیشتری کسب کنید.

شروع کنید

گردش کار Lighthouse را انتخاب کنید که مناسب شما باشد:

  • در Chrome DevTools . صفحاتی که نیاز به احراز هویت دارند را به راحتی بررسی کنید و گزارش های خود را در قالبی کاربرپسند بخوانید.
  • از خط فرمان . اجرای Lighthouse خود را از طریق اسکریپت های پوسته خودکار کنید.
  • به عنوان یک ماژول Node . Lighthouse را در سیستم های یکپارچه سازی مداوم خود ادغام کنید.
  • از یک رابط کاربری وب Lighthouse را اجرا کنید و بدون نصب چیزی به گزارش ها پیوند دهید.

Lighthouse را در Chrome DevTools اجرا کنید

Lighthouse پنل مخصوص به خود را در Chrome DevTools دارد. برای اجرای گزارش:

  1. Google Chrome را برای دسکتاپ دانلود کنید.
  2. در Google Chrome، به URL مورد نظر برای بازرسی بروید. شما می توانید هر URL را در وب بررسی کنید.
  3. Chrome DevTools را باز کنید .
  4. روی تب Lighthouse کلیک کنید.

    پنل Lighthouse کروم DevTools
    در سمت چپ نمای صفحه ای است که ممیزی می شود. در سمت راست پنل Lighthouse Chrome DevTools قرار دارد که توسط Lighthouse پشتیبانی می‌شود

  5. روی تجزیه و تحلیل بارگذاری صفحه کلیک کنید. DevTools لیستی از دسته های حسابرسی را به شما نشان می دهد. همه آنها را فعال بگذارید.

  6. روی Run audit کلیک کنید. پس از 30 تا 60 ثانیه، Lighthouse گزارشی را در صفحه به شما می دهد.

    گزارش Lighthouse در Chrome DevTools
    گزارش Lighthouse در Chrome DevTools

ابزار خط فرمان Node را نصب و اجرا کنید

برای نصب ماژول Node:

  1. Google Chrome را برای دسکتاپ دانلود کنید.
  2. نسخه پشتیبانی طولانی مدت فعلی Node را نصب کنید.
  3. فانوس را نصب کنید پرچم -g آن را به عنوان یک ماژول جهانی نصب می کند.
npm install -g lighthouse

برای اجرای ممیزی:

lighthouse <url>

برای دیدن همه گزینه ها:

lighthouse --help

ماژول Node را به صورت برنامه نویسی اجرا کنید

برای مثالی از اجرای برنامه لایت‌هاوس به‌عنوان یک ماژول Node، استفاده از برنامه را ببینید.

PageSpeed ​​Insights را اجرا کنید

برای اجرای Lighthouse در PageSpeed ​​Insights:

  1. به PageSpeed ​​Insights بروید.
  2. URL صفحه وب را وارد کنید.
  3. روی آنالیز کلیک کنید.

    رابط کاربری PageSpeed ​​Insights
    رابط کاربری PageSpeed ​​Insights

Lighthouse را به عنوان افزونه کروم اجرا کنید

برای نصب افزونه:

  1. Google Chrome را برای دسکتاپ دانلود کنید.
  2. افزونه Lighthouse Chrome را از فروشگاه وب کروم نصب کنید.

برای اجرای ممیزی:

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

    پسوند فانوس دریایی
    پانل توسعه فانوس دریایی

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

    گزارش توسعه فانوس دریایی
    گزارش فانوس دریایی از توسعه

به اشتراک گذاری و مشاهده گزارش ها به صورت آنلاین

برای مشاهده و اشتراک‌گذاری گزارش‌ها به صورت آنلاین از نمایشگر فانوس دریایی استفاده کنید.

بیننده فانوس دریایی
بیننده فانوس دریایی

گزارش ها را به صورت JSON به اشتراک بگذارید

Lighthouse Viewer به خروجی JSON گزارش Lighthouse نیاز دارد. لیست زیر نحوه دریافت خروجی JSON را بسته به جریان کاری Lighthouse که از آن استفاده می کنید، توضیح می دهد:

  • گزارش فانوس دریایی بالا سمت راست را باز کنید نماد منو منو و کلیک کنید ذخیره به عنوان دکمه JSON ذخیره به عنوان JSON
  • خط فرمان . اجرا: shell lighthouse --output json --output-path <path/for/output.json>

برای مشاهده داده های گزارش:

  1. نمایشگر فانوس دریایی را باز کنید.
  2. فایل JSON را روی نمایشگر بکشید یا در هر نقطه از Viewer کلیک کنید تا ناوبر فایل خود را باز کرده و فایل را انتخاب کنید.

گزارش ها را به عنوان GitHub Gists به اشتراک بگذارید

اگر نمی‌خواهید به‌طور دستی فایل‌های JSON را منتقل کنید، می‌توانید گزارش‌های خود را به‌عنوان سرفصل GitHub به اشتراک بگذارید. یکی از مزایای gists کنترل نسخه رایگان است.

برای صادر کردن یک گزارش به عنوان یک اصل از گزارش:

  1. (اگر از قبل در بیننده هستید، از این مرحله رد شوید) بالا سمت راست را باز کنید نماد منو منو، سپس کلیک کنید دکمه باز کردن در نمایشگر In Viewer را باز کنید . گزارش در Viewer، واقع در https://googlechrome.github.io/lighthouse/viewer/ باز می شود.
  2. در Viewer، بالا سمت راست را باز کنید نماد منو منو، سپس کلیک کنید دکمه باز کردن در نمایشگر ذخیره به عنوان Gist . اولین باری که این کار را انجام می‌دهید، یک پنجره بازشو اجازه دسترسی به داده‌های اصلی GitHub شما، و خواندن و نوشتن در اصل شما را می‌خواهد.

برای صادر کردن یک گزارش به عنوان یک خلاصه از نسخه CLI Lighthouse، به صورت دستی یک خلاصه ایجاد کنید و خروجی JSON گزارش را در اصل کپی کنید. نام فایل gist حاوی خروجی JSON باید به .lighthouse.report.json ختم شود. برای مثالی از نحوه تولید خروجی JSON از ابزار خط فرمان ، به اشتراک گزارش ها به عنوان JSON مراجعه کنید.

برای مشاهده گزارشی که به صورت خلاصه ذخیره شده است:

  • ?gist=<ID> به URL Viewer اضافه کنید، جایی که <ID> شناسه اصلی است. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • Viewer را باز کنید و URL یک اصل را در آن قرار دهید.

توسعه پذیری فانوس دریایی

هدف Lighthouse ارائه راهنمایی های مرتبط و قابل اجرا برای همه توسعه دهندگان وب است. برای این منظور، دو ویژگی در دسترس است که به شما امکان می دهد Lighthouse را با نیازهای خاص خود تنظیم کنید.

بسته های پشته

توسعه دهندگان از بسیاری از فناوری های مختلف (فریم ورک های Backend/CMS/JavaScript) برای ساخت صفحات وب خود استفاده می کنند. لایت‌هاوس به جای ارائه توصیه‌های کلی، اکنون می‌تواند بسته به ابزارهای مورد استفاده، توصیه‌های مرتبط‌تر و کاربردی‌تری ارائه دهد.

«بسته‌های پشته» به Lighthouse اجازه می‌دهد تا تشخیص دهد که سایت شما بر روی چه پلتفرمی ساخته شده است و توصیه‌های مبتنی بر پشته را نمایش می‌دهد. این توصیه ها توسط کارشناسان جامعه تعریف و مدیریت می شوند.

برای مشارکت در بسته‌های پشته، دستورالعمل‌های مشارکتی را مرور کنید.

پلاگین های فانوس دریایی

افزونه های Lighthouse به متخصصان دامنه اجازه می دهد تا عملکرد Lighthouse را برای نیازهای خاص جامعه خود گسترش دهند. اکنون می توانید از داده هایی که Lighthouse جمع آوری می کند برای ایجاد ممیزی های جدید استفاده کنید. در هسته خود، افزونه Lighthouse یک ماژول گره است که مجموعه ای از بررسی ها را اجرا می کند که توسط Lighthouse اجرا می شود و به عنوان یک دسته جدید به گزارش اضافه می شود.

برای کسب اطلاعات بیشتر در مورد نحوه ایجاد افزونه خود، به کتابچه راهنمای افزونه ما در مخزن Lighthouse GitHub مراجعه کنید.

فانوس دریایی را ادغام کنید

اگر شما یک شرکت یا فردی هستید که Lighthouse را به عنوان بخشی از محصولات/خدماتی که ارائه می‌دهید ادغام می‌کنید، اول از همه - ما بسیار هیجان‌زده هستیم! ما می‌خواهیم تا آنجا که ممکن است افراد بیشتری از Lighthouse استفاده کنند، و این دستورالعمل‌ها و دارایی‌های برند برای یکپارچه‌سازی فانوس دریایی به این منظور است که به شما نشان دهد که Lighthouse در حالی که از نام تجاری ما محافظت می‌کند، به راحتی نشان می‌دهد که زیر پوشش است.

به فانوس دریایی کمک کنید

Lighthouse منبع باز است و مشارکت پذیرفته می شود ! ردیاب مشکل مخزن را بررسی کنید تا اشکالاتی را که می‌توانید برطرف کنید ، یا ممیزی‌هایی را که می‌توانید ایجاد یا بهبود ببخشید، بیابید. ردیاب مسائل همچنین مکان خوبی برای بحث در مورد معیارهای عملکرد، ایده‌هایی برای ممیزی‌های جدید یا هر چیز دیگری مربوط به Lighthouse است.