Google Lighthouse چیست؟ راهنمای کامل از صفر تا ۱۰۰

گوگل می‌گوید وب‌سایت خود را به اندازه‌ای بهینه‌سازی کنید که همۀ کاربران به راحتی بتوانند از محتوا، خدمات یا محصول شما استفاده کنند. ساده به نظر می‌رسد؟

در پشت این توصیۀ ساده ده‌ها نکته ریز و به هم پیوسته وجود دارد که اگر به فکر موفقیت وب‌سایت خود هستید، نباید به راحتی از کنارشان رد شوید. راهنمای شما در این دریای تاریک، فانوس دریایی گوگل یا Google Lighthouse است.

این مقاله یک راهنمای کامل برای تست وب‌سایت به کمک Google Lighthouse است؛ پس اگر مدیر سایتی هستید، همین حالا بازش کنید تا قدم به قدم آن را بررسی کنیم. البته این ابزار هر وب‌سایتی را می‌تواند مورد بررسی قرار دهد، پس برای یادگیری هم می‌توانید یک وب‌سایت به دلخواه باز کنید و آن را امتحان کنید.

توصیه‌های Lighthouse آنقدر ریزبینانه است که شاید از اهمیت داشتن آنها تعجب کنید. این توصیه‌ها برای ارتقا و بهینه‌سازی سایت از نظر تجربه یا رابط کاربری (UX/UI)، سئو، عملکرد، امنیت، کارایی و کاهش هزینه‌های نگهداری سایت بسیار مفید هستند. البته گرفتن امتیاز ۱۰۰ از لایت هاوس کار آسانی نیست ولی غیرممکن هم نیست.

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

اول مختصر و مفید ببینیم فانوس دریایی گوگل یا Google Lighthouse چیست بعد هر بخش از آزمون و گزارش آن را باز کرده و توضیح می‌دهیم.
Google Lighthouse چیست؟

تصور کنید به رستوران رفته‌اید و غذا سفارش داده‌اید؛ اما آوردن غذا روی میز را بیشتر از زمانی که انتظار داشتید طول می‌دهند. وقتی هم که غذا را آوردند سالاد کنارش نیست و نمکدان روی میز نمک ندارد. درخواست می‌کنید نمکدان پر بیاورند و ۱۰ دقیقه طول می‌کشد.

غذا خوشمزه بود، اما همین طول دادن‌ها و کمبودها از لذت غذا کم کرد و کمی هم عصبانی شدید.

این رستوران انتخاب چندم شما در روزهای بعد خواهد بود؟ حاضرید رئیس یا بهترین دوست خود را به این رستوران دعوت کنید؟

مثال تجربه کاربری بد در رستوران

رستوران خیلی خوب رستورانی است که به جز غذای خوشمزه به همه جزئیات در خدمات و مشتری‌مداری توجه کرده باشد.

فانوس دریایی گوگل Google Lighthouse هم با همین هدف ایجاد شد؛ سایت‌هایی بیشتر مورد توجه قرار می‌گیرند که کیفیت آن‌ها خیلی خوب شود (نه خوب و معمولی!). این کیفیت می‌تواند سرعت، عملکرد، امنیت، سئو، دسترسی‌پذیری و خیلی نکات پشت پرده و جزئی دیگر باشد.

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

Google Lighthouse در کل روی 5 موضوع تمرکز دارد:

    اجرا (Performance)
    تجربه برتر (Best Practices)
    دسترسی‌پذیری (Accessibility)
    سئو (SEO)
    وب اپلیکیشن پیش‌رونده (PWA)

اگر کلماتی مثل تجربه برتر، دسترسی‌پذیری و وب‌اپلیکیشن پیش‌رونده برای شما آشنا نیست عجله نکنید؛ چون در هر بخش توضیحات کافی ارائه شده است. در هر کدام از این اسامی تعداد زیادی شاخص تعیین شده که به طور دقیق وب‌سایت را بررسی و درجه‌بندی می‌کند. در واقع هر فاکتور و شاخص در گزارش نهایی تاثیرگذار است و در هر بخش جزئیات مشکلات، نقص‌ها و بخش‌هایی که نیاز به بهبود دارند، مشخص می‌شوند.

حالا می‌خواهیم این تست را اجرا کنیم.
چگونه از Google Lighthouse استفاده کنیم؟

برای آزمودن سایت به کمک فانوس دریایی گوگل راه‌های زیر وجود دارد:

     DevTools مرورگر کروم (همان کلیک راست و انتخاب Inspect یا زدن دکمه F12)
    نصب افزونه Lighthouse روی مرورگر کروم
    ابزارهای واسطه
    استفاده از طریق خط فرمان یا اتصال به ماژول‌های برنامه‌نویسی شده

چون دو روش اول خیلی ساده‌اند و با چند کلیک ساده در دسترس قرار می‌گیرند، در ادامه از همین روش‌ها استفاده خواهیم کرد.

روش سوم یا ابزارهای واسطه همان گزارش Lighthouse را پردازش می‌کنند و گزارش‌هایی در قالب نمودار، ارسال پیام دوره‌ای و ... می‌سازند. برای مثال با ابزار foo.software می‌توانید به صورت دائم گزارش زمان‌بندی شده از وب‌سایت داشته باشید و در صورت بروز هرگونه افت در عملکرد، اعلان‌های آن را دریافت کنید.
استوری اینستاگرام، بازاریابی به سبک نوین!حتما بخوانید: استوری اینستاگرام، بازاریابی به سبک نوین!

در روش چهارم که مبتنی بر ماژول‌‌های برنامه‌نویسی شده است، مدیران و کارشناسان می‌توانند نظارت دائم و خودکار روی وبسایت داشته باشند یا گزارش‌های شخصی‌سازی شده دریافت کنند. برای اطلاعات بیشتر به صفحه گیت‌هاب آن مراجعه کنید.

در ادامه، دسترسی به این ابزار را از دو روش اول آموزش می‌دهیم. برای اجرای آزمون فعلاً عجله نکنید تا به توضیح گزینه‌های قابل انتخاب برسیم.
روش اول: اجرای Google Lighthouse از Devtools مرورگر کروم

صفحه مورد نظر خود را در مرورگر کروم باز کنید. سپس کلید F12 را بزنید (یا Fn+ F12 در اکثر لپ‌تاپ‌ها) یا کلید‌های ترکیبی در ویندوز (Control+Shift+I) و مک (Command+Option+I) تا developer tools باز شود.

در بالای داک باز شده به تب Audits بروید.

روش دوم: افزونه Lighthouse را از وب‌استور گوگل نصب کنید

برای نصب افزون به وب استور خود گوگل بروید. بعد از نصب افزونه در هر صفحه دلخواه می‌توانید آن را از گوشه بالا سمت راست اجرا کنید.

افزونه lighthouse

نکته: Google Lighthouse یک برنامه متن باز است. تغییرات و به‌روزرسانی‌های اعمال شده در آن به مرور و شاید غیرهمزمان در ابزار Devtools مرورگر کروم (روش اول) و افزونه آن (روش دوم) اعمال شود. پس به همین دلیل امکان دارد گزارش این دو روش کمی متفاوت باشد. در زمان نوشتن این مقاله، نسخه لایت هاوس 5.2.0 است.
نکات مهم درباره اجرای آزمون Lighthouse و گزینه‌های قابل انتخاب

همانطور که گفته شد روش اول و دوم برای افرادی که می‌خواهند به صورت دستی و شاید هر چند وقت یکبار اجرا کنند کافی است. قبل از اجرای تست به چند نکته توجه کنید:

1) اگر روی مرورگر کروم افزونه‌های دیگری مثل حذف کننده‌های تبلیغات، آنالیز کننده‌های صفحه و ... نصب کرده‌اید، بهتر است قبل از انجام تست Lighthouse همه افزونه‌ها را موقتی غیرفعال کنید.

2) بهتر است در هنگام انجام تست سایر نرم‌افزارهایی که از پهنای باند اینترنت استفاده می‌کنند یا منابع سخت‌افزاری (رم  و سی‌پی‌یو) زیادی استفاده می‌کنند ببندید.

3) آزمون لايت هاوس گوگل در حالت عادی بسیار سختگیرانه طراحی شده، اما با این حال گزینه‌‌ای به نام شرایط سخت شبیه‌سازی شده (Simulated throttling) در آن گنجانده شده تا این آزمون سخت‌تر شود. یعنی سرعت اینترنت و پردازشگر (CPU) تا حدی کاهش داده می‌شود. هدف از این کار شبیه‌سازی یک دستگاه با سخت‌افزار و سرعت اینترنت ضعیف است. این گزینه قبل از تست قابل انتخاب است.

4) بعضی از ایراد‌ها و مشکلاتی که در نتایج تست گزارش می‌شود جای بحث دارد. یعنی خیلی از توسعه‌دهنده‌های وب، کارشناسان سئو و دیجیتال مارکترها درباره درست یا اشتباه بودن آن بحث می‌کنند. برای مثال فرمت تصویر توصیه شده توسط گوگل در وبسایت‌ها WebP است اما هنوز این فرمت همه جا استفاده نمی‌شود و در مقایسه‌های انجام شده تاثیر آن در حد انتظار نیست.

5) بخشی از گزارش مربوط به وب اپلیکیشن‌ها‌ (Progressive Web App) است. اگر وب‌سایتی دارای نسخه وب‌اپ باشد نتایج آن در این بخش گزارش خواهد شد. سرویس‌هایی مثل جیمیل، اوبر، پینترست و بسیاری از فروشگاه‌های آنلاین، نسخه وب‌اپ دارند. یعنی بدون نیاز به نصب اپلیکیشن در همان محیط مرورگر می‌توانید از تمام خدمات استفاده کنید و حتی در حالت آفلاین هم قابل استفاده هستند.

در روش اول (Devtools) حالت موبایل از دسکتاپ جدا شده است. با توجه به اینکه نسخۀ موبایل و دسکتاپ بسیاری از سایت‌ها متفاوت هستند، می‌توانید تست را برای حالت دلخواه اجرا کنید.
اجرای Lighthouse

    برای انجام تست صفحه مورد نظر را باز کنید. روی افزونه لایت هاوس کلیک کنید یا Devtools را باز کنید.

    در قسمت option افزونه یا منوی تنظیمات Devtools می‌توانید تست‌های مورد نیاز را انتخاب کنید.
    گزینه‌های قابل انتخاب همان بخش‌های آزمون هستند. شامل Performance، Accessibility، Best Practices، SEO و PWA که هر کدام را به دلخواه می‌توانید غیرفعال کنید. در Devtools بین موبایل یا دسکتاپ یکی را انتخاب کنید.
    Generate Report در افزونه یا Run Audit را در Devtools بزنید و برای دریافت گزارش کمی صبر کنید. گزارش در یک پنجره جدید باز می‌شود.

    می‌توانید گزارش را در قالب‌های PDF، HTML و ... با انتخاب از منوی بالا سمت راست (سه نقطه) ذخیره کنید.

گزارش lighthouse

    در قسمت بالای گزارش دایره‌های رنگی با اعداد بین ۰ تا ۱۰۰ را می‌بینید که نمره نهایی هر بخش از آزمون است. این اعداد از شاخص‌هایی به دست آمده‌اند که در ادامه گزارش با جزئیات بیشتر قابل مشاهده هستند. رنگ سبز نشانگر وضعیت عالی، زرد یعنی متوسط و قرمز ضعف شدید را نشان می‌دهد.

حالا برویم سراغ بخش‌های مختلف این گزارش تا ببینیم برای بالا بردن این نمرات چه کارهایی قابل انجام است.
آزمون سرعت بارگذاری و عملکرد صفحه (Performance)

این آزمون در کل بررسی می‌کند که صفحه مورد نظر تا چه اندازه برای مشاهده و تعامل بهینه‌سازی شده است. سرعت بارگذاری و روند بارگذاری دو فاکتور مهم در عملکرد هستند.
الگوریتم دزدان دریایی گوگل چگونه با دزدی محتوا مقابله می‌کند؟حتما بخوانید: الگوریتم دزدان دریایی گوگل چگونه با دزدی محتوا مقابله می‌کند؟

بارگذاری صفحه شامل چند مرحله است. اگر صفحه‌ای به اصطلاح سنگین و سرعت اینترنت کاربر هم کم باشد، مراحل بارگذاری صفحه برای کاربر قابل مشاهده خواهد بود. دانستن این مراحل و تعیین شاخصی برای اندازه‌گیری آنچه کاربران در مراحل بارگذاری می‌بینند در بهبود عملکرد وبسایت کمک می‌کند. به همین دلیل شاخص‌هایی تعیین شده تا توسعه‌دهنده‌ها و طراحان وبسایت بتوانند کوچکترین تغییرات را رصد کنند.

حالا این شاخص‌ها را معرفی می‌کنیم.
شاخص‌ها (Metrics)

امتیاز نهایی بخش Performance از شاخص‌هایی به دست می‌آید که در ادامه معرفی می‌شوند. سهم تاثیرگذاری هر کدام از شاخص‌ها هم متفاوت است. اگر کمی مبهم بود صبر کنید چون در ادامه واضح‌تر می‌شود.
اولین ترسیم محتوا First Contentful Paint یا FCP

FCP یا اولین ترسیم معنادار فاصله زمانی بین دستور باز کردن سایت تا ظاهر شدن اولین نوشته یا تصویر روی صفحه است.

واحد این شاخص برچسب ثانیه است. این زمان که ثانیه است به واحد ۰ تا ۱۰۰ تبدیل می‌شود تا در شاخص نهایی قابل اعمال باشد.
لایت هاوس چطور FCP را محاسبه می‌کند؟

برای تبدیل واحد ثانیه به امتیاز ۰ تا ۱۰۰، لایت هاوس زمانی که در آزمون به دست آمد را با میانگین سرعت بارگذاری سایت‌های دیگر مقایسه می‌کند.

برای مثال: اگر ۹۹ درصد سایت‌ها FCP  در حد ۱/۵ ثانیه داشته باشند و سایت شما هم در آزمون اولین ترسیم معنادار، در ۱/۵ ثانیه بارگذاری شود، پس امتیاز آن  ۹۹ از ۱۰۰ می‌شود. میانگین سرعت بارگذاری FCP سایت‌ها در سایت HTTParchive قابل مشاهده است. در بقیه شاخص‌های زمانی هم نحوۀ محاسبه و تبدیل به امتیاز عددی به همین شکل است.

جدول زیر امتیاز حدودی به دست آمده از سرعت بارگذاری را نمایش می‌دهد. با توجه به این جدول، اگر FCP صفحه‌ای بین ۰ تا ۲ ثانیه باشد امتیاز ۷۵ تا ۱۰۰ می‌گیرد که در مقایسه با سایر سایت‌ها امتیاز خوبی است.

ضریب تاثیر FCP در امتیاز کل عملکرد ۳ از ۵ است. ضریب بالاتر به معنی تاثیر بیشتر در امتیاز کل است.

نکته: ضریب تاثیر مثل همان ضریب تاثیر نمرات دروس دانشگاه و مدرسه در معدل نهایی است.
اولین ترسیم معنادار  First Meaningful Paint

شاخص اولین ترسیم معنادار مدت زمانی است که طول می‌کشد تا محتوای اصلی صفحه دیده شود. محتوای اصلی وابسته به نوع صفحه است. در وبلاگ‌ها منظور عنوان مقاله و متن اصلی است و در صفحه گالری تصاویر محتوای اصلی هستند. منوی بالایی یا نشانگر بارگذاری صفحه که قبل از بارگذاری کامل ظاهر می‌شود، محتوای اصلی حساب نمی‌شوند.

جدول زیر حالت ایده‌آل را زیر ۲ ثانیه نشان می‌دهد. ضریب تاثیر FMP عدد ۱ از ۵ است که کمترین در میان بقیه شاخص‌های عملکرد است.

اولین استراحت پردازنده First CPU Idle

این شاخص زمان تعامل حداقلی را حساب می‌کند. FCI تعامل حداقلی را در نظر دارد برای مثال لحظه‌ای که کاربر بتواند روی یک لیست بازشونده کلیک کند یعنی صفحه تعامل حداقلی را دارد. این لحظه در بیشتر وبسایت‌ها قبل از بارگذاری کامل اتفاق می‌افتد؛ اما به معنی کاملاً قابل تعامل بودن نیست. (در بخش بعدی شاخصی معرفی می‌شود که مدت زمانی که طول می‌کشد تا صفحه کاملاً قابل تعامل شود را حساب می‌کند.)
وبلاگ‌ داشتن یا نداشتن: پاسخی به یک مساله!حتما بخوانید: وبلاگ‌ داشتن یا نداشتن: پاسخی به یک مساله!

ضریب تاثیر First CPU Idle عدد ۲ از ۵ است. جدول زیر نشان می‌دهد در بهترین حالت باید بین ۰ تا ۴/۷ ثانیه صفحه قابلیت تعامل حداقلی را داشته باشد.

زمان تعامل Time to Interactive

شاخص TTF مدت زمانی که صفحه کاملاً قابل تعامل باشد را اندازه می‌گیرد. یعنی همه دکمه‌ها، نوارهای ورودی، منوها و ... برای استفادۀ آماده باشند. این زمان اگر بین ۰ تا ۵/۲ ثانیه باشد امتیاز خوب یا سریع محسوب می‌شود.

ضریب تاثیر TTF ۵ است که بالاترین ضریب در بین بقیه شاخص‌های بخش عملکرد حساب می‌شود.

برای درک بهتر شاخص‌های معرفی شده تا اینجا به تصویر بارگذاری جستجوی گوگل توجه کنید. اولین تغییرات در صفحه یا First Paint جزو شاخص‌های عملکرد نیست، اما در تصویر قابل مشاهده است. بعد از آن اولین ترسیم محتوا (FCP) و بعد از آن اولین ترسیم معنادار (FMP) دیده می‌شود. بعد از آن هم صفحه قابل تعامل است.