8 مرحله + معرفی Google Lighthouse و ویژگی های آن، 20 نکته

معرفی Google Lighthouse و ویژگی های آن

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

Lighthouse چندین ویژگی را ارائه می دهد که آن را به ابزاری قدرتمند برای بهینه سازی وب سایت تبدیل می کند:

1. امتیاز حسابرسی: Lighthouse یک امتیاز عملکرد کلی را برای یک صفحه وب بر اساس معیارهای مختلف ارائه می‌کند. این امتیاز به صاحبان وب سایت کمک می کند تا سلامت کلی و عملکرد سایت خود را درک کنند.
2. معیارهای عملکرد: فانوس‌ها معیارهای مختلف عملکرد مانند اولین رنگ محتوایی، زمان تا تعامل و شاخص سرعت را اندازه‌گیری می‌کنند. این معیارها به شناسایی مناطقی که ممکن است یک صفحه کند یا ناکارآمد باشد کمک می کند.
3. دسترس‌پذیری: Lighthouse با ارزیابی عواملی مانند استفاده مناسب از سرفصل‌ها، متن جایگزین برای تصاویر، کنتراست رنگ، و پشتیبانی از پیمایش صفحه‌کلید، مشکلات دسترسی را در صفحات وب بررسی می‌کند.
4. بهترین روش‌ها: لایت‌هاوس صفحه‌ای را با مجموعه‌ای از بهترین روش‌های توصیه‌شده توسط Google بررسی می‌کند تا از عملکرد بهینه و تجربه کاربر اطمینان حاصل کند. مواردی مانند استفاده از HTTPS، اجتناب از منابع مسدودکننده رندر و پیروی از بهترین شیوه‌های توسعه وب را بررسی می‌کند.
5. SEO: Lighthouse SEO صفحه وب (بهینه سازی موتور جستجو) را با بررسی عناصری مانند متا تگ ها، نشانه گذاری داده های ساخت یافته و سازگاری با موبایل ارزیابی می کند. توصیه هایی برای بهبود دید صفحه در نتایج موتورهای جستجو ارائه می دهد.
6. برنامه وب پیشرو (PWA): Lighthouse ارزیابی می کند که آیا یک صفحه وب شرایط لازم برای در نظر گرفتن برنامه وب پیشرفته را دارد یا خیر. ویژگی هایی مانند پشتیبانی آفلاین، طراحی پاسخگو و حضور فایل مانیفست را بررسی می کند.
7. اطلاعات تشخیصی: علاوه بر ممیزی ها و توصیه ها، لایت هاوس اطلاعات تشخیصی دقیقی را در مورد یک صفحه وب ارائه می دهد. این شامل جزئیات درخواست شبکه، گزارش‌های پوشش جاوا اسکریپت و CSS و سایر بینش‌های مربوط به عملکرد می‌شود.
8. رابط خط فرمان (CLI): Lighthouse را می توان از خط فرمان اجرا کرد و ادغام در فرآیندهای آزمایش خودکار یا ایجاد گردش کار سفارشی برای بهینه سازی وب سایت را آسان می کند.

8 مرحله برای استفاده از Google Lighthouse برای بهینه سازی وب سایت

استفاده از Google Lighthouse برای بهینه سازی وب سایت شما شامل مراحل زیر است:

1. Google Chrome را نصب کنید: Lighthouse در ابزارهای توسعه دهنده Google Chrome تعبیه شده است، بنابراین باید Chrome را روی رایانه خود نصب کنید.
2. دسترسی به ابزارهای برنامه‌نویس: صفحه وبی را که می‌خواهید بازرسی کنید در Google Chrome باز کنید و با کلیک راست روی صفحه و انتخاب «Inspect» یا با فشار دادن Ctrl+Shift+I به ابزارهای توسعه‌دهنده دسترسی پیدا کنید. (ویندوز) یا Command+Option+I (Mac).
3. اجرای حسابرسی Lighthouse: در پانل ابزارهای توسعه‌دهنده، به برگه «حساب‌ها» بروید. برای شروع ممیزی جدید، روی دکمه «انجام ممیزی…» کلیک کنید.
4. دسته‌های حسابرسی را انتخاب کنید: در تنظیمات ممیزی، دسته‌های خاصی را که می‌خواهید Lighthouse ارزیابی کند، انتخاب کنید. می‌توانید همه دسته‌ها را انتخاب کنید یا روی موارد خاصی مانند عملکرد، دسترسی، سئو و غیره تمرکز کنید
5. اجرای حسابرسی: برای شروع فرآیند ارزیابی، روی دکمه “اجرای ممیزی ها” کلیک کنید. Lighthouse دسته بندی های انتخاب شده را تجزیه و تحلیل می کند و گزارشی تولید می کند.
6. بازبینی نتایج حسابرسی: پس از تکمیل ممیزی، لایت‌هاوس گزارش مفصلی با امتیازات و توصیه‌هایی برای هر دسته ارائه می‌کند. نتایج را برای شناسایی مناطقی که نیاز به بهبود دارند مرور کنید.
7. توصیه ها را نشان دهید: برای هر مسئله یا توصیه شناسایی شده، اقدامات لازم را برای رسیدگی به آنها انجام دهید. این ممکن است شامل بهینه سازی تصاویر، کوچک کردن فایل های CSS و جاوا اسکریپت، رفع مشکلات دسترسی، بهبود عناصر سئو و غیره باشد.
8. بازرسی مجدد: پس از ایجاد تغییرات بر اساس توصیه‌ها، ممیزی‌های Lighthouse را مجدداً اجرا کنید تا پیشرفت‌ها را تأیید کنید و پیشرفت را پیگیری کنید. نظارت و بهینه سازی منظم وب سایت خود با استفاده از Lighthouse می تواند به حفظ عملکرد و تجربه کاربری آن کمک کند.

20 نکته برای بهینه سازی وب سایت با استفاده از Google Lighthouse

در اینجا چند نکته برای بهینه سازی وب سایت خود با استفاده از Google Lighthouse وجود دارد:

1. بهینه سازی تصاویر: برای کاهش اندازه فایل بدون افت کیفیت، تصاویر را فشرده و اندازه آن را تغییر دهید. از قالب‌های تصویر مدرن مانند WebP و تصاویر بارگذاری تنبل برای بهبود سرعت بارگذاری صفحه استفاده کنید.
2. کوچک کردن CSS و جاوا اسکریپت: فضاهای سفید غیرضروری، نظرات و کدهای استفاده نشده را از فایل‌های CSS و جاوا اسکریپت حذف کنید تا اندازه فایل کاهش یابد.
3. فعال کردن فشرده سازی: فشرده سازی GZIP را در سرور وب خود فعال کنید تا اندازه داده های منتقل شده بین سرور و مرورگر مشتری کاهش یابد.
4. افزایش حافظه پنهان مرورگر: برای کاهش درخواست‌های سرور و بهبود زمان بارگذاری صفحه برای بازدیدکنندگان بازگشتی، سرصفحه‌های ذخیره مناسب را برای منابع ثابت مانند تصاویر، CSS و فایل‌های جاوا اسکریپت تنظیم کنید.
5. منابع مسدودکننده رندر را حذف کنید: منابع مسدودکننده رندر (CSS و جاوا اسکریپت) را شناسایی کنید که رندر یک صفحه وب را به تاخیر می اندازد و تحویل یا قرار دادن آنها را بهینه می کند.
6. بهبود زمان پاسخ سرور: برای کاهش زمان پاسخ سرور، فرآیندهای سمت سرور، پرسش‌های پایگاه داده و مکانیسم‌های ذخیره‌سازی را بهینه کنید.
7. مسیر رندر بحرانی را به حداقل برسانید: بارگیری منابع حیاتی مورد نیاز برای رندر صفحه اولیه، مانند فایل‌های CSS و جاوا اسکریپت مورد نیاز در بالا را بهینه کنید.
8. از شبکه‌های تحویل محتوا (CDN) استفاده کنید: از CDN‌ها برای توزیع دارایی‌های ثابت وب‌سایت خود در چندین سرور در سراسر جهان استفاده کنید، و تأخیر را برای کاربران در مکان‌های جغرافیایی مختلف کاهش دهید.
9. پیاده سازی HTTP/2: سرور وب خود را برای پشتیبانی از پروتکل HTTP/2 ارتقا دهید، که اجازه می دهد چندین منبع از طریق یک اتصال واکشی شوند و سرعت بارگیری صفحه را بهبود بخشد.
10. اطمینان از طراحی مناسب برای موبایل: وب‌سایت خود را به‌صورت واکنش‌گرا طراحی کنید تا تجربه‌ای یکپارچه را در دستگاه‌ها و اندازه‌های مختلف صفحه نمایش ارائه دهید.
11. بهبود قابلیت دسترسی: دستورالعمل های دسترسی را دنبال کنید تا مطمئن شوید که وب سایت شما برای افراد دارای معلولیت قابل استفاده است. متن جایگزین برای تصاویر ارائه دهید، از ساختار عنوان مناسب استفاده کنید و پیمایش صفحه کلید را فعال کنید.
12. بهینه سازی فونت های وب: از ویژگی font-display برای کنترل نحوه نمایش فونت های وب استفاده کنید و اطمینان حاصل کنید که رندر صفحه را مسدود نمی کنند.
13. جلوگیری از تغییر مسیر زنجیره ای: تعداد تغییر مسیرها را در وب سایت خود به حداقل برسانید زیرا آنها رفت و برگشت اضافی اضافه می کنند و بارگذاری صفحه را به تاخیر می اندازند.
14. حذف CSS استفاده نشده: برای کاهش اندازه فایل و بهبود سرعت بارگذاری صفحه، قوانین و شیوه نامه های استفاده نشده CSS را حذف کنید.
15. رفع پیوندهای شکسته: به طور مرتب پیوندهای شکسته را در وب سایت خود بررسی کنید و آنها را برطرف کنید تا تجربه کاربری روان و سئو را بهبود ببخشید.
16. پیاده‌سازی نشان‌گذاری داده‌های ساخت‌یافته: از نشانه‌گذاری داده‌های ساخت‌یافته (مانند Schema.org) استفاده کنید تا به موتورهای جستجو زمینه بیشتری در مورد محتوای خود ارائه دهید و دید آن را در نتایج جستجو بهبود بخشید.
17. بهینه سازی اولین رنگ محتوایی: بارگیری منابع حیاتی را اولویت بندی کنید تا مطمئن شوید که اولین رنگ محتوایی (FCP) در سریع ترین زمان ممکن انجام می شود و زمان بارگذاری صفحه را کاهش می دهد.
18. نظارت بر اسکریپت های شخص ثالث: هنگام قرار دادن اسکریپت های شخص ثالث در وب سایت خود محتاط باشید زیرا می توانند بر عملکرد تأثیر بگذارند. تأثیر آنها را بررسی کنید و جایگزین ها یا تکنیک های بارگذاری ناهمزمان را در نظر بگیرید.
19. اطمینان از اتصالات ایمن (HTTPS): از پروتکل HTTPS برای وب سایت خود استفاده کنید تا اتصال ایمن ایجاد کنید، اعتماد کاربران را ایجاد کنید و رتبه بندی SEO را بهبود بخشید.
20. آزمایش منظم عملکرد: به طور مداوم عملکرد وب سایت خود را با استفاده از ابزارهایی مانند Lighthouse کنترل و آزمایش کنید تا فرصت های بهینه سازی جدید را شناسایی کرده و از پیشرفت های مداوم اطمینان حاصل کنید.

3 انتشارات مرجع معتبر یا نام دامنه مورد استفاده در پاسخ به این سوال:

1. Google Developers – اسناد و منابع رسمی ارائه شده توسط Google برای توسعه دهندگان، از جمله اطلاعات در مورد Google Lighthouse و ویژگی های آن.
2. Web.dev – وب‌سایتی ایجاد شده توسط Google که با تمرکز بر عملکرد، دسترسی و سایر جنبه‌های تحت پوشش Lighthouse، اطلاعات بینش، آموزش و بهترین شیوه‌ها را برای توسعه‌دهندگان وب ارائه می‌دهد.
3. Chromium.org – وب سایت رسمی پروژه منبع باز Chromium که Google Chrome را تقویت می کند. این اسناد و منابع فنی مربوط به ابزارهای برنامه‌نویس Chrome، از جمله Lighthouse را ارائه می‌کند.

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