8 مرحله + معرفی Google Lighthouse و ویژگی های آن، 20 نکته
گوگل Lighthouse یک ابزار منبع باز است که توسط گوگل توسعه یافته است که به صاحبان وب سایت کمک می کند تا کیفیت و عملکرد صفحات وب خود را بهبود بخشند. مجموعه ای جامع از ممیزی ها، تشخیص ها و توصیه ها برای بهینه سازی صفحات وب در جنبه های مختلف مانند عملکرد، دسترسی، سئو و موارد دیگر را ارائه می دهد. با اجرای Lighthouse، صاحبان وب سایت میتوانند بینش های ارزشمندی در مورد عملکرد سایت آنها به دست آورند و مناطقی را که نیاز به بهبود دارند شناسایی کنند.
Lighthouse چندین ویژگی را ارائه می دهد که آن را به ابزاری قدرتمند برای بهینه سازی وب سایت تبدیل می کند:
-
-
- امتیاز حسابرسی: Lighthouse یک امتیاز عملکرد کلی را برای یک صفحه وب بر اساس معیارهای مختلف ارائه میکند. این امتیاز به صاحبان وب سایت کمک می کند تا سلامت کلی و عملکرد سایت خود را درک کنند.
-
-
-
- معیارهای عملکرد: فانوسها معیارهای مختلف عملکرد مانند اولین رنگ محتوایی، زمان تا تعامل و شاخص سرعت را اندازهگیری میکنند. این معیارها به شناسایی مناطقی که ممکن است یک صفحه کند یا ناکارآمد باشد کمک می کند.
- دسترسپذیری: Lighthouse با ارزیابی عواملی مانند استفاده مناسب از سرفصلها، متن جایگزین برای تصاویر، کنتراست رنگ، و پشتیبانی از پیمایش صفحهکلید، مشکلات دسترسی را در صفحات وب بررسی میکند.
- بهترین روشها: لایتهاوس صفحهای را با مجموعهای از بهترین روشهای توصیهشده توسط گوگل بررسی میکند تا از عملکرد بهینه و تجربه کاربر اطمینان حاصل کند. مواردی مانند استفاده از HTTPS، اجتناب از منابع مسدود کننده رندر و پیروی از بهترین شیوههای توسعه وب را بررسی میکند.
-
- سئو: Lighthouse سئو صفحه وب (بهینه سازی موتور جستجو) را با بررسی عناصری مانند متا تگ ها، نشانه گذاری داده های ساخت یافته و سازگاری با موبایل ارزیابی می کند. توصیه هایی برای بهبود دید صفحه در نتایج موتورهای جستجو ارائه می دهد.
- برنامه وب پیشرو (PWA): Lighthouse ارزیابی می کند که آیا یک صفحه وب شرایط لازم برای در نظر گرفتن برنامه وب پیشرفته را دارد یا خیر. ویژگی هایی مانند پشتیبانی آفلاین، طراحی پاسخگو و حضور فایل مانیفست را بررسی می کند.
- اطلاعات تشخیصی: علاوه بر ممیزی ها و توصیه ها، لایت هاوس اطلاعات تشخیصی دقیقی را در مورد یک صفحه وب ارائه می دهد. این شامل جزئیات درخواست شبکه، گزارشهای پوشش جاوا اسکریپت و CSS و سایر بینشهای مربوط به عملکرد میشود.
- رابط خط فرمان (CLI): Lighthouse را می توان از خط فرمان اجرا کرد و ادغام در فرآیندهای آزمایش خودکار یا ایجاد گردش کار سفارشی برای بهینه سازی وب سایت را آسان می کند.
8 مرحله برای استفاده از گوگل Lighthouse برای بهینه سازی وب سایت
استفاده از گوگل Lighthouse برای بهینه سازی وب سایت شما شامل مراحل زیر است:
- گوگل Chrome را نصب کنید: Lighthouse در ابزارهای توسعه دهنده گوگل Chrome تعبیه شده است، بنابراین باید Chrome را روی رایانه خود نصب کنید.
- دسترسی به ابزارهای برنامهنویس: صفحه وبی را که میخواهید بازرسی کنید در گوگل Chrome باز کنید و با کلیک راست روی صفحه و انتخاب «Inspect» یا با فشار دادن Ctrl+Shift+I به ابزارهای توسعهدهنده دسترسی پیدا کنید. (ویندوز) یا Command+Option+I (Mac).
- اجرای حسابرسی Lighthouse: در پانل ابزارهای توسعهدهنده، به برگه «حسابها» بروید. برای شروع ممیزی جدید، روی دکمه «انجام ممیزی…» کلیک کنید.
- دستههای حسابرسی را انتخاب کنید: در تنظیمات ممیزی، دستههای خاصی را که میخواهید Lighthouse ارزیابی کند، انتخاب کنید. میتوانید همه دستهها را انتخاب کنید یا روی موارد خاصی مانند عملکرد، دسترسی، سئو و غیره تمرکز کنید
- اجرای حسابرسی: برای شروع فرآیند ارزیابی، روی دکمه “اجرای ممیزی ها” کلیک کنید. Lighthouse دسته بندی های انتخاب شده را تجزیه و تحلیل می کند و گزارشی تولید می کند.
- بازبینی نتایج حسابرسی: پس از تکمیل ممیزی، لایتهاوس گزارش مفصلی با امتیازات و توصیههایی برای هر دسته ارائه میکند. نتایج را برای شناسایی مناطقی که نیاز به بهبود دارند مرور کنید.
- توصیه ها را نشان دهید: برای هر مسئله یا توصیه شناسایی شده، اقدامات لازم را برای رسیدگی به آنها انجام دهید. این ممکن است شامل بهینه سازی تصاویر، کوچک کردن فایل های CSS و جاوا اسکریپت، رفع مشکلات دسترسی، بهبود عناصر سئو و غیره باشد.
- بازرسی مجدد: پس از ایجاد تغییرات بر اساس توصیهها، ممیزیهای Lighthouse را مجدداً اجرا کنید تا پیشرفتها را تأیید کنید و پیشرفت را پیگیری کنید. نظارت و بهینه سازی منظم وب سایت خود با استفاده از Lighthouse میتواند به حفظ عملکرد و تجربه کاربری آن کمک کند.
20 نکته برای بهینه سازی وب سایت با استفاده از گوگل Lighthouse
در اینجا چند نکته برای بهینه سازی وب سایت خود با استفاده از گوگل Lighthouse وجود دارد:
- بهینه سازی تصاویر: برای کاهش اندازه فایل بدون افت کیفیت، تصاویر را فشرده و اندازه آن را تغییر دهید. از قالبهای تصویر مدرن مانند WebP و تصاویر بارگذاری تنبل برای بهبود سرعت بارگذاری صفحه استفاده کنید.
- کوچک کردن CSS و جاوا اسکریپت: فضاهای سفید غیرضروری، نظرات و کدهای استفاده نشده را از فایلهای CSS و جاوا اسکریپت حذف کنید تا اندازه فایل کاهش یابد.
- فعال کردن فشرده سازی: فشرده سازی GZIP را در سرور وب خود فعال کنید تا اندازه داده های منتقل شده بین سرور و مرورگر مشتری کاهش یابد.
- افزایش حافظه پنهان مرورگر: برای کاهش درخواستهای سرور و بهبود زمان بارگذاری صفحه برای بازدیدکنندگان بازگشتی، سرصفحههای ذخیره مناسب را برای منابع ثابت مانند تصاویر، CSS و فایلهای جاوا اسکریپت تنظیم کنید.
- منابع مسدود کننده رندر را حذف کنید: منابع مسدود کننده رندر (CSS و جاوا اسکریپت) را شناسایی کنید که رندر یک صفحه وب را به تاخیر می اندازد و تحویل یا قرار دادن آنها را بهینه می کند.
- بهبود زمان پاسخ سرور: برای کاهش زمان پاسخ سرور، فرآیندهای سمت سرور، پرسشهای پایگاه داده و مکانیسمهای ذخیرهسازی را بهینه کنید.
- مسیر رندر بحرانی را به حداقل برسانید: بارگیری منابع حیاتی مورد نیاز برای رندر صفحه اولیه، مانند فایلهای CSS و جاوا اسکریپت مورد نیاز در بالا را بهینه کنید.
- از شبکههای تحویل محتوا (CDN) استفاده کنید: از CDNها برای توزیع داراییهای ثابت وبسایت خود در چندین سرور در سراسر جهان استفاده کنید، و تأخیر را برای کاربران در مکانهای جغرافیایی مختلف کاهش دهید.
- پیاده سازی HTTP/2: سرور وب خود را برای پشتیبانی از پروتکل HTTP/2 ارتقا دهید، که اجازه می دهد چندین منبع از طریق یک اتصال واکشی شوند و سرعت بارگیری صفحه را بهبود بخشد.
- اطمینان از طراحی مناسب برای موبایل: وبسایت خود را بهصورت واکنشگرا طراحی کنید تا تجربهای یکپارچه را در دستگاهها و اندازههای مختلف صفحه نمایش ارائه دهید.
- بهبود قابلیت دسترسی: دستورالعمل های دسترسی را دنبال کنید تا مطمئن شوید که وب سایت شما برای افراد دارای معلولیت قابل استفاده است. متن جایگزین برای تصاویر ارائه دهید، از ساختار عنوان مناسب استفاده کنید و پیمایش صفحه کلید را فعال کنید.
- بهینه سازی فونت های وب: از ویژگی font-display برای کنترل نحوه نمایش فونت های وب استفاده کنید و اطمینان حاصل کنید که رندر صفحه را مسدود نمی کنند.
- جلوگیری از تغییر مسیر زنجیره ای: تعداد تغییر مسیرها را در وب سایت خود به حداقل برسانید زیرا آنها رفت و برگشت اضافی اضافه می کنند و بارگذاری صفحه را به تاخیر می اندازند.
- حذف CSS استفاده نشده: برای کاهش اندازه فایل و بهبود سرعت بارگذاری صفحه، قوانین و شیوه نامه های استفاده نشده CSS را حذف کنید.
- رفع پیوندهای شکسته: به طور مرتب پیوندهای شکسته را در وب سایت خود بررسی کنید و آنها را برطرف کنید تا تجربه کاربری روان و سئو را بهبود ببخشید.
- پیادهسازی نشانگذاری دادههای ساختیافته: از نشانهگذاری دادههای ساختیافته (مانند Schema.org) استفاده کنید تا به موتورهای جستجو زمینه بیشتری در مورد محتوای خود ارائه دهید و دید آن را در نتایج جستجو بهبود بخشید.
- بهینه سازی اولین رنگ محتوایی: بارگیری منابع حیاتی را اولویت بندی کنید تا مطمئن شوید که اولین رنگ محتوایی (FCP) در سریع ترین زمان ممکن انجام می شود و زمان بارگذاری صفحه را کاهش می دهد.
- نظارت بر اسکریپت های شخص ثالث: هنگام قرار دادن اسکریپت های شخص ثالث در وب سایت خود محتاط باشید زیرا میتوانند بر عملکرد تأثیر بگذارند. تأثیر آنها را بررسی کنید و جایگزین ها یا تکنیک های بارگذاری ناهمزمان را در نظر بگیرید.
- اطمینان از اتصالات ایمن (HTTPS): از پروتکل HTTPS برای وب سایت خود استفاده کنید تا اتصال ایمن ایجاد کنید، اعتماد کاربران را ایجاد کنید و رتبه بندی سئو را بهبود بخشید.
- آزمایش منظم عملکرد: به طور مداوم عملکرد وب سایت خود را با استفاده از ابزارهایی مانند Lighthouse کنترل و آزمایش کنید تا فرصت های بهینه سازی جدید را شناسایی کرده و از پیشرفت های مداوم اطمینان حاصل کنید.