ابزار Google Lighthouse چیست؟

Google Lighthouse یک ابزار رایگان گوگل است که به شما کمک می‌کند تا کیفیت صفحات وب سایت خود را بهبود دهید. این ابزار برای اجرای ممیزی فنی وب سایت است و جنبه‌های عملکرد (Performance)، وب اپلیکیشن پیشرونده (Progressive Web App)، دسترسی پذیری (Accessibility)، بهترین روش‌ها و SEO از یک URL را تجزیه و تحلیل می‌کند.

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

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

دسترسی به ابزار لایت هاوس و بررسی پارامترهای آن

بعد از اینکه آدرس سایت خود را در مرورگر کروم وارد کردید، با 2 روش زیر به این ابزار تست سرعت سایت دسترسی خواهید داشت.

1.  از بخش تنظیمات گوگل کروم که به صورت 3 نقطه در بالا سمت راست مرورگر قرار دارد از مسیر more tools سپس Develope tools را کلیک کنید، تا پنجره زیر برای شما باز شود. سپس سربرگ Lighthouse را فعال کنید تا این ابزار مانند تصویر زیر به شما نشان داده شود.

2. روش دیگر برای دسترسی به ابزار لایت هاوس گوگل به این صورت است که روی صفحه سایت کلیک راست کرده، گزینه Inspect را بزنید و سربرگ Lighthouse را انتخاب کنید.

بعد از دسترسی به لایت هاوس، تعیین کنید کدام پارامترها نیاز به بررسی دارند. بعد از انتخاب دکمه آنالیز یا همان Analyzed Page load را بزنید و صبر کنید تا صفحه مطابق تصویر رفرش شود.

نکته: این صفحه را به هیچ عنوان نبندید تا عملیات آنالیز شود.

نکته: گاهی اوقات اکستنشن‌های کروم روی بررسی سرعت توسط لایت هاوس تاثیر دارند. پیشنهاد می‌کنم که تست سرعت را در incognito کروم انجام دهید تا افزونه‌ها تاثیری روی امتیاز لایت هاوس نداشته باشند. در ادامه نتایج را با هم می‌بینیم و متریک‌های اندازه‌گیری شده را معرفی می‌کنیم.

برای بررسی پرفورمنس در دستگاه موبایل، از صفحه سایت Inspect  بگیرید و از گوشه سمت چپ و بالا مطابق تصویر، نحوه نمایش سایت را در حالت موبایل ببینید. سپس مراحل بالا را برای بررسی سرعت سایت با ابزار گوگل لایت هاوس انجام دهید.

بعد از بررسی و تست سرعت سایت با لایت هاوس، نتایج زیر به شما نمایش داده می‌شود.

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

1. Performance لایت هاوس

ابزار Lighthouse عملکرد یا Performance یک وب سایت را بررسی می‌کند و امتیازی از 0 تا 100 به آن می‌دهد. این امتیاز عملکرد با ترکیب چندین معیار عملکرد مختلف محاسبه می‌شود. رتبه‌بندی عملکردی که در PageSpeed ​​Insights نشان داده می‌شود نیز با استفاده از Lighthouse محاسبه می‌شود. هر چه مدت زمان این معیارها کمتر باشد به امتیاز 100 نزدیکتر می‌شوید.

معیارهایی که لایت هاوس در بخش پرفورمنس بررسی می‌کند عبارتند از:

• First Contentful Paint : مدت زمانی که طول می‌کشد تا اولین عنصر دیداری (محتوا) سایت شما به شما نمایش داده شود. این عنصر دیداری می‌تواند حتی رنگ بک گراند صفحه شما باشد.
• Total Blocking Time: زمان بین بارگذاری اولین المان (FCP) و مدت زمانی که صفحه قابل تعامل شود (TTI) را نشان می‌دهد؛ TBT همان مدت زمانی است که سایت شما بلاک است و کاربر نمی تواند هیچ تعاملی با سایت انجام دهد. تعامل به معنی انجام یک فعالیت کلیک، اسکرول و … است.
• Speed Index: بخش Above the Fold قسمت ابتدایی صفحه است که پس از لود شدن سایت مشاهده می‌کنید. SI نشان می‌دهد که این نیمه ابتدایی سایت چقدر سریع بارگذاری می‌شود. در واقع مدت زمانی است که طول می‌کشد تا کاربر اولین بخش دیداری سایت را ببینید.
• Largest Contentful Paint: فاکتور LCP مدت زمان بارگذاری بزرگترین محتوای سایت را نمایش می‌دهد؛ این محتوا می‌تواند یک تصویر یا هر المان بزرگ باشد.
• Cumulative Layout Shift: بقیه پارامترها روی بارگذاری سریع صفحه تمرکز دارند ولی فاکتور CLS تجربه کاربر و نحوه تعامل او را با صفحه نشان می‌دهد. در واقع CLS نرخ پرش یا میزان جابجایی صفحه هنگام لود شدن است که دلیل آن تفاوت در سرعت بارگذاری اجرای یک صفحه می‌باشد.

در پرفورمنس لایت هاوس، ساختاری مشابه واترفال GTMetrix وجود دارد که نشان می‌دهد، چه رویدادی در چه زمانی در حال انجام است. این نمودار با کلیک روی View Orginal Trcae (در تصویر بالا) نمایش داده می شود.

اطلاعات ابزار لایت هاوس گوگل در این بخش نشان می‌دهد که در هر لحظه چه اتفاقی افتاده و هر زمان چه المان‌هایی لود شده‌اند یا لود شدن هر المان چقدر زمان می‌برد، لودینگ، Rendering و نمایش در چه زمانی انجام می‌شوند یا اینکه هر کدام از المان‌هایی که در بخش قبل معرفی شدند، در چه زمانی اجرا می‌شوند. برای مثال FCP در 3 ثانیه انجام می‌شود.

این نمودار به شما کمک می کند که الماهایی که زمان لود بالایی دارند را شناسایی کنید.

opportunities یا فرصت‌های بهبود سایت

در این بخش از آموزش Lighthouse که مربوط به پرفورمنس سایت است، فرصت‌های بهبود سایت به شما پیشنهاد می‌شوند. لایت هاوس در این بخش با گزینه All تمام فرصت‌ها را یکجا بررسی می‌کند؛ به‌علاوه فرصت‌های بهبود را برای هر المان مطابق تصویر به صورت مجزا نشان می‌دهد. برای مثال:

• باید فایل‌های جاوا اسکریپت‌ را بهینه کرده و تصاویر را فشرده کنید (این یک راهنمای فوق العاده است!).
• منابع Render Blocking کدهای css و JS هستند که مانع بارگذاری سریع سایت شما می‌شوند. این بخش به شما می‌گوید که اگر این منابع را حذف یا بهینه کنید 3.56 ثانیه در زمان خود صرفه‌جویی کرده‌اید.
• یا به طور خاص با حذف cssهای بدون استفاده حدود 1 ثانیه زمان لود را بالا ببرید.

نکته: اگر بررسی سرعت سایت را روی دسکتاپ انجام دهید، بهبود را برای تعداد تصاویر بیشتری نشان می‌دهد.

2. متریک Accessabilty لایت هاوس

در این بخش از آموزش کار با ابزار لایت هاوس نوبت به نمایش متریک‌های Accessability می‌رسد. پارامتر در دسترس بودن به این معنی است که افراد مختلف، صفحه شما را به چه شکل می‌بینند. مثلا زمانی که کنتراست یا اختلاف رنگ متن و دکمه کم باشد، تحربه کاربری (UX) خوبی را به کاربر منتقل نمی‌کند.

همانطور که در تصویر زیر مشاهده می‌کنید، یکی از تصاویر Alt ندارد یا اینکه تصاویر بک‎‌گراند کنتراست لازم را ندارند.

Best Practice. 4

در تست سرعت سایت با لایت هاوس بهترین روش‌هایی را نشان می‌دهد که قبلا تست شده و نتیجه گرفته‌اند.

5. بررسی SEO سایت با ابزار لایت هاوس

این بخش ابزار لایت هاوس، سئوی سایت را بررسی کرده و یک چک لیست تکنیکال برای بهبود ارائه می‌دهد. مثلا در کدام بخش از صفحه به H2 نیاز دارید یا در کجا Alt تصاویر درج نشده است؛ در واقع یک دید کلی از مشکلات سئو صفحه به شما می‌دهد. همان‌طور که در تصویر می‌بینید امتیاز عملکرد سئو سایت به صورت زیر نشان داده می‌شود:

• لینک‌هایی که قابل خزش (Crawlable) نیستند.
• کدام تصاویر Alt ندارند.
• کدام لینک و دکمه قابل کلیک نیست؛ به دلیل کوچک بودن صفحه موبایل، اگر المان‌ها بیش از حد ریز باشند امکان کلیک کردن روی آنها وجود ندارد.

نکته: حداقل سایز لینک و دکمه برای اینکه قابل کلیک باشد، 48*48 است.

یکی از اقداماتی که برای بهبود سئو on page و off page می‌توانید انجام دهید استفاده از ابزارهای سئو است؛ ابزارهای سئو برای هوش مصنوعی که به صورت رایگان ارائه شده‌اند به شما فرصت خوبی برای بهبود رتبه صفحات می‌دهند.

بدون نیاز به طراحی سایت با ری‌اکت جی اس تاثیر زیادی در سرعت سایت دارید دارد. برای آشنایی بیشتر با این فریم ورک مقاله ری اکت چیست را بخوانید.

6. بخش نسخه وب اپلیکیشن یا PWA لایت هاوس

اگر سایت شما از نسخه PWA استفاده کند، این بخش به بررسی سرعت سایت با ابزار لایت هاوس اضافه می‌شود. Progressive Web Apps یا PWA  نحوه نمایش سایت در تلفن همراه، قدرت سایت در نمایش محتوا به صورت آنلاین و غیره را نمایش می‌دهد. برای مثال در نسخه PWA، سبد خرید به شکلی به کاربر نشان داده می‌شود که در دسترس و جلوی چشم او باشد. زیرا المان ها کوچک هستند و اسکرول و پبدا کردن المان مدنظر سخت‌تر است. یا منوی خانه و صفحه اصلی در پایین صفحه به کاربر نمایش داده می‌شوند؛ دقیقا مشابه نسخه اپلیکیشن.

یکی دیگر از ابزارهای بررسی سرعت سایت GTMetrix است و نتایج لایت هاوس گوگل با آن متفاوت است. ابزار GTMetrix پرفورمنس را در شرایط ثابت بررسی می کند برای این منظور ابزاری بسیار کاربردی برای بهبود و مشاهده تاثیر اقدامات شماست. پیشنهاد می‌کنم برای بررسی پرفورمنس سایت از چند ابزار استفاده کنید تا تمامی فرصت‌های بهبود را از چند دیدگاه‌ مختلف مشاهده کنید.