ساخت وب بهتر با Lighthouse

از زمان Google I/O، ما سخت در تلاش بوده ایم تا Lighthouse را به همراهی عالی برای ساختن برنامه های وب پیشرفته پیشرفته تبدیل کنیم:

امروز، ما خوشحالیم که انتشار 1.3 Lighthouse را اعلام کنیم. Lighthouse 1.3 شامل مجموعه ای از ویژگی های جدید بزرگ، ممیزی ها و رفع اشکال معمول است. می توانید آن را از npm ( npm i -g lighthouse ) نصب کنید یا برنامه افزودنی را از فروشگاه وب Chrome دانلود کنید .

خوب چه خبر؟

ظاهر و احساس جدید

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

گزارش فانوس دریایی

بهترین شیوه های جدید

تا به امروز، Lighthouse بر معیارهای عملکرد و کیفیت PWA تمرکز کرده است. با این حال، هدف کلی پروژه ارائه یک کتاب راهنما برای تمام توسعه وب است. این شامل راهنمایی در مورد بهترین شیوه‌های عمومی، نکات عملکرد و دسترسی، و کمک سرتاسر در ساخت برنامه‌های باکیفیت است.

"We Better Web" تلاشی در پروژه Lighthouse برای کمک به توسعه دهندگان برای انجام بهتر در وب است. به عبارت دیگر، به آنها کمک کنید تا برنامه های وب خود را مدرن و بهینه کنند. اغلب اوقات، توسعه دهندگان وب از شیوه های منسوخ، ضد الگوها، یا به تله های عملکرد شناخته شده بدون اینکه متوجه شوند استفاده می کنند. به عنوان مثال، به طور گسترده ای شناخته شده است که انیمیشن های مبتنی بر JS باید به جای setInterval() ) با requestAnimationFrame() انجام شود. با این حال، اگر توسعه‌دهنده از API جدیدتر بی‌اطلاع باشد، برنامه وب آنها بیهوده آسیب می‌بیند.

Lighthouse 1.3 شامل بیش از 20 پیشنهاد جدید بهترین عملکرد از نکاتی برای مدرن کردن ویژگی‌های CSS و جاوا اسکریپت گرفته تا توصیه‌های عملکردی مانند: «کاهش تعداد دارایی‌های مسدودکننده رندر»، «استفاده از شنوندگان رویداد غیرفعال برای بهبود عملکرد پیمایش».

بهترین روش های وب را بهتر انجام دهید.

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

مشاهده کننده گزارش

آخرین اما نه کم اهمیت، ما هیجان زده هستیم که یک نمایشگر وب جدید برای نتایج Lighthouse را معرفی کنیم. از googlechrome.github.io/lighthouse/viewer دیدن کنید، خروجی اجرای Lighthouse را بکشید و رها کنید (یا برای آپلود فایل خود کلیک کنید)، و voila. گزارش HTML فانوس دریایی "Insta".

گزارش بیننده
مشاهده کننده گزارش

Lighthouse Viewer همچنین به شما امکان می دهد گزارش ها را با دیگران به اشتراک بگذارید. با کلیک بر روی نماد اشتراک‌گذاری، وارد GitHub می‌شوید. ما گزارش‌ها را به عنوان یک اصل مخفی در حساب شما ذخیره می‌کنیم تا بتوانید به راحتی یک گزارش مشترک را حذف کنید یا بعداً آن را به‌روزرسانی کنید. استفاده از GitHub برای ذخیره سازی داده همچنین به این معنی است که کنترل نسخه را به صورت رایگان دریافت می کنید!

معماری بیننده
معماری بیننده

گزارش‌های موجود را می‌توان با افزودن ?gist=GIST_ID به URL توسط Lighthouse Viewer بارگیری کرد:

معماری بیننده 2.
معماری بیننده 2

برای همه جزئیات در مورد آخرین نسخه Lighthouse، یادداشت های انتشار کامل را در GitHub ببینید. مثل همیشه، با ما تماس بگیرید تا اشکالات ، درخواست‌های ویژگی فایل، یا ایده‌های طوفان فکری در مورد آنچه می‌خواهید در آینده ببینید را گزارش کنیم.