Lighthouse ابزاری است که به شما کمک می کند تا راه هایی را برای بهبود عملکرد صفحه اندازه گیری و پیدا کنید. در اینجا گردش کار کلی برای نحوه استفاده از Lighthouse آمده است:
- شما به Lighthouse می گویید چه صفحه ای را ممیزی کند.
- Lighthouse آن صفحه را بارگیری می کند و مدت زمانی که صفحه طول می کشد تا به نقاط عطف عملکرد مختلف برسد را ثبت می کند. به این نقاط عطف ، متریک می گویند.
- Lighthouse گزارشی از نحوه عملکرد صفحه به شما می دهد. این گزارش امتیازی برای هر معیار و فهرستی از فرصت‌ها ارائه می‌کند که اگر آنها را اجرا کنید، صفحه سریع‌تر بارگذاری می‌شود.
ماموریت شما این است که نمرات معیارهای خود را در طول زمان بهبود بخشید، یا حداقل مطمئن شوید که آنها بدتر نمی شوند. هر چند راهی برای کار مستقیم روی معیارها وجود ندارد. در عوض، فرصت هایی را که Lighthouse فراهم می کند دنبال می کنید. کار بر روی این فرصت ها باعث بهبود امتیازات معیارهای شما می شود.
Lighthouse را از صفحه نمایه خود اجرا کنید
Lighthouse را از صفحه نمایه web.dev خود اجرا کنید:
هر URL را ارائه دهید، و Lighthouse یک سری ممیزی را اجرا می کند که گزارشی از عملکرد صفحه ارائه می دهد.
گزارش حسابرسی را مرور کنید تا مناطقی را که صفحه شما در آن ها می تواند بهبود یابد را شناسایی کنید.
برای هر ممیزی، راهنمایی و گام‌های فوری را خواهید یافت که می‌توانید برای بهبود امتیازات خود بردارید.
Lighthouse را از Chrome DevTools اجرا کنید
Chrome DevTools مجموعه ای از ابزارهای توسعه دهنده وب است که مستقیماً در مرورگر Google Chrome ساخته شده است. برای دریافت DevTools لازم نیست چیزی دانلود کنید. اگر کروم دارید، DevTools دارید.
- در کروم، به صفحه ای که می خواهید بازرسی کنید بروید.
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
روی تب Audits کلیک کنید. اگر این برگه را نمی بینید، روی نماد » کلیک کنید و سپس حسابرسی را از لیست انتخاب کنید. Lighthouse موتوری است که پنل حسابرسی را نیرو می دهد. به همین دلیل تصویری از فانوس دریایی را می بینید.
- مطمئن شوید که دکمه رادیویی موبایل انتخاب شده است. هنگامی که Lighthouse صفحه شما را بررسی می کند، نمای دستگاه تلفن همراه و رشته عامل کاربر را شبیه سازی می کند.
- مطمئن شوید که چک باکس Performance فعال باشد. می توانید بقیه چک باکس ها را در قسمت Audits فعال یا غیرفعال کنید. اگر آنها را فعال کنید، تعداد زیادی فرصت در مورد راه هایی برای بهبود سایر جنبه های صفحه خود خواهید دید.
- مطمئن شوید که دکمه رادیویی Slowdown CPU 4x Simulated Fast 3G انتخاب شده است. Lighthouse در واقع شبکه یا CPU شما را در حین بارگذاری صفحه متوقف نمی کند. درعوض، بررسی می‌کند که صفحه در شرایط عادی چقدر طول می‌کشد تا بارگذاری شود، و سپس تخمین می‌زند که در یک شبکه سریع 3G با پردازنده‌ای که 4 برابر قدرت کمتری نسبت به دستگاه شما دارد چقدر طول می‌کشد.
- مطمئن شوید که چک باکس Clear Storage فعال باشد. این گزینه لایت هاوس را مجبور می کند تا برای هر منبع صفحه به شبکه برود، به این ترتیب بازدیدکنندگان برای اولین بار صفحه را تجربه می کنند.
- روی Run Audits کلیک کنید. پس از 5 تا 10 ثانیه، Lighthouse گزارشی را به شما نشان می دهد.
برای مثال، اگر برخی از ممیزی‌ها را با 3G سریع شبیه‌سازی‌شده ، 4 برابر کاهش سرعت پردازنده فعال کنید و سپس ممیزی‌ها را با غیرفعال کردن throttling اجرا کنید، امتیازات معیارهای شما به میزان قابل‌توجهی پایین‌تر خواهد بود وقتی که throttling را فعال کنید. ممکن است زمان زیادی را صرف کنید تا بفهمید که چرا صفحه شما اکنون بسیار کندتر است، در حالی که در واقعیت تنها چیزی که تغییر کرد پیکربندی شما بود.
گزارش خود را درک کنید
سمت راست بالای گزارش شما امتیاز عملکرد کلی شما را فهرست می کند. 100 یک امتیاز کامل است. در زیر امتیاز کلی، نمرات معیارها آمده است. راهنمای امتیاز دهی Lighthouse v3 توضیح می دهد که چگونه هر امتیاز متریک به نمره کلی کمک می کند.
ماوس را روی یک سنجه نگه دارید تا در مورد آن بیشتر بدانید. برای خواندن اسناد مربوط به آن، روی «بیشتر بدانید» کلیک کنید.
در زیر امتیازات معیارهای خود، اسکرین‌شات‌هایی از ظاهر صفحه هنگام بارگیری می‌بینید.
در زیر اسکرین شات ها فرصت هایی برای بهبود عملکرد صفحه مشاهده می کنید.
روی یک فرصت کلیک کنید تا در مورد آن بیشتر بدانید.
مراحل بعدی
سعی کنید از Lighthouse برای ممیزی صفحه خود استفاده کنید، چه از صفحه نمایه خود یا از Chrome DevTools. یکی از فرصت ها را اجرا کنید و سپس دوباره صفحه خود را بررسی کنید تا ببینید این تغییر چگونه بر گزارش شما تأثیر گذاشته است. نمرات معیارهای شما در حالت ایده‌آل باید کمی بهتر باشد و Lighthouse دیگر نباید آن فرصت را به عنوان چیزی برای کار در نظر بگیرد.
Running Lighthouse خودتان برای مسائل مربوط به بررسی نقطه ای عالی است، اما در نهایت باید نظارت مستمر را برای اطمینان از سالم ماندن سایت خود تنظیم کنید. برای پیگیری پیشرفت فانوس دریایی خود در طول زمان سایت خود را به نمایه خود اضافه کنید.