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 دارد. برای اجرای گزارش:
- Google Chrome را برای دسکتاپ دانلود کنید.
- در Google Chrome، به URL مورد نظر برای بازرسی بروید. شما می توانید هر URL را در وب بررسی کنید.
- Chrome DevTools را باز کنید .
روی تب Lighthouse کلیک کنید.
روی تجزیه و تحلیل بارگذاری صفحه کلیک کنید. DevTools لیستی از دسته های حسابرسی را به شما نشان می دهد. همه آنها را فعال بگذارید.
روی Run audit کلیک کنید. پس از 30 تا 60 ثانیه، Lighthouse گزارشی را در صفحه به شما می دهد.
ابزار خط فرمان Node را نصب و اجرا کنید
برای نصب ماژول Node:
- Google Chrome را برای دسکتاپ دانلود کنید.
- نسخه پشتیبانی طولانی مدت فعلی Node را نصب کنید.
- فانوس را نصب کنید پرچم
-g
آن را به عنوان یک ماژول جهانی نصب می کند.
npm install -g lighthouse
برای اجرای ممیزی:
lighthouse <url>
برای دیدن همه گزینه ها:
lighthouse --help
ماژول Node را به صورت برنامه نویسی اجرا کنید
برای مثالی از اجرای برنامه لایتهاوس بهعنوان یک ماژول Node، استفاده از برنامه را ببینید.
PageSpeed Insights را اجرا کنید
برای اجرای Lighthouse در PageSpeed Insights:
- به PageSpeed Insights بروید.
- URL صفحه وب را وارد کنید.
روی آنالیز کلیک کنید.
Lighthouse را به عنوان افزونه کروم اجرا کنید
برای نصب افزونه:
- Google Chrome را برای دسکتاپ دانلود کنید.
- افزونه Lighthouse Chrome را از فروشگاه وب کروم نصب کنید.
برای اجرای ممیزی:
- در کروم، به صفحه ای که می خواهید بازرسی کنید بروید.
را کلیک کنید فانوس دریایی. باید در کنار نوار آدرس کروم باشد. اگر نه، منوی افزونه کروم را باز کنید و از آنجا به آن دسترسی داشته باشید. پس از کلیک کردن، منوی Lighthouse باز می شود.
روی ایجاد گزارش کلیک کنید. Lighthouse ممیزی های خود را بر روی صفحه ای که در حال حاضر متمرکز شده است اجرا می کند، سپس یک برگه جدید را با گزارشی از نتایج باز می کند.
به اشتراک گذاری و مشاهده گزارش ها به صورت آنلاین
برای مشاهده و اشتراکگذاری گزارشها به صورت آنلاین از نمایشگر فانوس دریایی استفاده کنید.
گزارش ها را به صورت JSON به اشتراک بگذارید
Lighthouse Viewer به خروجی JSON گزارش Lighthouse نیاز دارد. لیست زیر نحوه دریافت خروجی JSON را بسته به جریان کاری Lighthouse که از آن استفاده می کنید، توضیح می دهد:
- گزارش فانوس دریایی بالا سمت راست را باز کنید منو و کلیک کنید ذخیره به عنوان JSON
- خط فرمان . اجرا:
shell lighthouse --output json --output-path <path/for/output.json>
برای مشاهده داده های گزارش:
- نمایشگر فانوس دریایی را باز کنید.
- فایل JSON را روی نمایشگر بکشید یا در هر نقطه از Viewer کلیک کنید تا ناوبر فایل خود را باز کرده و فایل را انتخاب کنید.
گزارش ها را به عنوان GitHub Gists به اشتراک بگذارید
اگر نمیخواهید بهطور دستی فایلهای JSON را منتقل کنید، میتوانید گزارشهای خود را بهعنوان سرفصل GitHub به اشتراک بگذارید. یکی از مزایای gists کنترل نسخه رایگان است.
برای صادر کردن یک گزارش به عنوان یک اصل از گزارش:
- (اگر از قبل در بیننده هستید، از این مرحله رد شوید) بالا سمت راست را باز کنید منو، سپس کلیک کنید In Viewer را باز کنید . گزارش در Viewer، واقع در
https://googlechrome.github.io/lighthouse/viewer/
باز می شود. - در 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 است.