نحوه کامل از صفر تا 100 Google Lighthouse 35 نکته نحوه کامل چگونه مرحله به مرحله

براساس www.iAsk. ai از موتور جستجوی Ai بپرسید:

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

در اینجا 35 نکته برای بهبود امتیاز Google Lighthouse از صفر به 100 آورده شده است:

  1. فعال کردن فشرده سازی: فشرده سازی منابع با gzip یا Brotli می تواند تعداد بایت های ارسال شده از طریق شبکه را کاهش دهد.
  2. کوچک کردن CSS، جاوا اسکریپت و HTML: کوچک‌سازی کاراکترهای غیرضروری را از کد حذف می‌کند تا اندازه آن را کاهش دهد.
  3. کاهش زمان پاسخگویی سرور: زمان پاسخ سرور مدت زمانی است که یک وب سرور برای پاسخ به یک درخواست طول می کشد.
  4. فعال کردن فشرده‌سازی متن: منابع مبتنی بر متن باید با فشرده‌سازی (gzip یا Brotli) ارائه شوند تا کل بایت‌های شبکه به حداقل برسد.
  5. افزایش حافظه پنهان مرورگر: تنظیم تاریخ انقضا یا حداکثر سن در سرصفحه های HTTP برای منابع ایستا به مرورگر دستور می دهد تا منابع بارگیری شده قبلی را از دیسک محلی به جای شبکه بارگیری کند.
  6. بهینه سازی تصاویر: قالب بندی و فشرده سازی صحیح تصاویر می تواند بسیاری از بایت ها را ذخیره کند.
  7. منابع مسدودکننده رندر را حذف کنید: منابع اولین رنگ صفحه شما را مسدود می‌کنند.
  8. حذف CSS استفاده نشده: حذف CSS استفاده نشده می تواند مقدار کدی را که باید تجزیه و کامپایل شود کاهش دهد.
  9. ارائه تصاویر در قالب‌های نسل بعدی: فرمت‌های تصویری مانند JPEG 2000، JPEG XR، و WebP اغلب فشرده‌سازی بهتری نسبت به PNG یا JPEG ارائه می‌کنند که به معنای دانلود سریع‌تر و مصرف داده کمتر است.
  10. جلوگیری از تغییر مسیرهای چند صفحه: تغییر مسیرها تاخیرهای بیشتری را قبل از بارگیری صفحه ایجاد می کنند.
  11. پیش اتصال به مبداهای مورد نیاز: اتصال اولیه به مبداهای مورد نیاز می تواند با حذف تأخیر رفت و برگشت و کاهش سربار درخواست، زمان بارگذاری صفحه را افزایش دهد.
  12. استفاده از فرمت های ویدئویی برای محتوای متحرک: استفاده از فرمت های ویدئویی مدرن مانند WebM را برای ارائه محتوای متحرک به جای GIF در نظر بگیرید.
  13. استفاده از قالب تصویر WebP: WebP یک فرمت تصویر مدرن است که فشرده‌سازی بدون تلفات و تلفات عالی را برای تصاویر در وب فراهم می‌کند.
  14. تصاویر خارج از صفحه را به تعویق بیندازید: پس از اتمام بارگیری همه منابع حیاتی، بارگذاری تنبل تصاویر خارج از صفحه و تصاویر پنهان را در نظر بگیرید تا زمان کمتری برای تعامل داشته باشند.
  15. کدگذاری کارآمد تصاویر: بهینه سازی تصاویر با رمزگذاری کارآمد می تواند بسیاری از بایت ها را ذخیره کرده و زمان دانلود را بهبود بخشد.
  16. ارائه دارایی های استاتیک با خط مشی کش کارآمد: طول عمر کش طولانی می تواند بازدیدهای مکرر از صفحه شما را سرعت بخشد.
  17. از بارهای زیاد شبکه اجتناب کنید: محموله های بزرگ شبکه برای کاربران هزینه واقعی دارد و با زمان بارگذاری طولانی ارتباط زیادی دارد.
  18. جلوگیری از اندازه DOM بیش از حد: یک DOM بزرگ استفاده از حافظه را افزایش می‌دهد، باعث محاسبات طولانی‌تر سبک می‌شود و جریان‌های مجدد طرح‌بندی پرهزینه ایجاد می‌کند.
  19. عمق درخواست‌های بحرانی را به حداقل برسانید: زنجیره‌های درخواست بحرانی می‌توانند زمان تعامل یک صفحه را به تاخیر بیندازند.
  20. علامت‌ها و معیارهای زمان‌بندی کاربر: برنامه خود را با زمان‌بندی کاربر برای اندازه‌گیری عملکرد واقعی برنامه خود در طول تجربه‌های کلیدی کاربر در نظر بگیرید.
  21. کاهش زمان اجرای جاوا اسکریپت: زمان صرف شده برای تجزیه، کامپایل و اجرای JS را کاهش دهید.
  22. جلوگیری از تغییر مسیرهای چند صفحه
  23. پیش اتصال به Required Origins
  24. از فرمت های ویدئویی برای محتوای متحرک استفاده کنید
  25. از قالب تصویر WebP استفاده کنید
  26. تصاویر خارج از صفحه نمایش را به تعویق بیندازید
  27. کدگذاری کارآمد تصاویر
  28. ارائه دارایی های استاتیک با خط مشی کش کارآمد
  29. از بارهای زیاد شبکه اجتناب کنید
  30. جلوگیری از اندازه DOM بیش از حد 31. به حداقل رساندن عمق درخواست های بحرانی 32. علائم و اقدامات زمان بندی کاربر 33. کاهش زمان اجرای جاوا اسکریپت

5 مرجع معتبر برتر استفاده شده:

  1. «روزنامه عملکرد وب جلد 2» نوشته استویان استفانوف (چاپ)
  2. “شبکه سازی مرورگر با عملکرد بالا” توسط ایلیا گریگوریک (چاپ)
  3. “طراحی با استانداردهای وب” توسط جفری زلدمن (چاپ)
  4. “یادگیری طراحی وب” توسط جنیفر نیدرست رابینز (چاپ)
  5. «HTTP/2 در عمل» توسط بری پولارد (چاپ)