Google Lighthouse چیست؟

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

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

Google Lighthouse یا فانوس دریایی گوگل چیست؟

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

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

اگرچه فانوس دریایی گوگل بیشتر برای ارزیابی وب اپلیکیشن‌های پیش‌رونده استفاده می‌شود؛ اما برای تمام وبسایت‌ها کاربردی است. وب اپلیکیشن‌های پیش‌رونده (Progressive Web Apps)، در واقع همان وبسایت‌هایی هستند که شبیه به اپلیکیشن‌های موبایل طراحی شده‌اند.

فانوس دریایی در قالب یک افزونه برای مرورگر کروم قابل استفاده است. Google Lighthouse ابزاری برای استفاده همه چه مبتدی و چه حرفه ای مناسب است.

تمرکز فانوس دریایی گوگل یا Google Lighthouse روی چه مواردی است؟

به طور کلی تمرکز Google Lighthouse بر روی اجرا (Performance)، تجربه برتر (Best Practices)، دسترسی‌پذیری (Accessibility)، سئو (SEO) و وب اپلیکیشن پیش‌رونده (PWA) است. این یعنی فاکتورهایی را ارزیابی می‌کند که بیشترین تاثیر را بر تجربه کاربر دارند.

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

بیاید باهم این 5 مورد را بررسی کنیم :

1. اجرا یا عملکرد (Performance)

در این مرحله، فانوس دریایی گوگل سرعت بارگذاری وبسایت می‌پردازد؛ اینکه کاربران با چه سرعتی می‌توانند به محتوای سایت دسترسی پیدا کنند و آن را ببینند. به این منظور، گوگل لایت هاوس 6 معیار را مورد بررسی قرار می‌دهد که شامل موارد زیر است :

• First Contentful Paint

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

• Speed Index

سرعت بارگذاری محتوای صفحه را نشان می دهد.

• Largest Contentful Paint

نشان‌دهنده مدت زمانی که طول می‌کشد تا حجیم‌ترین تصویر یا بلوک متنی صفحه رندر یا ترجمه شود.

• Time to Interactive

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

• Total Blocking Time

یعنی کل مدت زمانی که صفحه مسدود شده و امکان تعامل کاربر با آن وجود ندارد. Total Blocking Time در واقع مجموع مدت زمان بعد از First Contentful Paint و قبل از Time to Interactive است و زمانی اتفاق می افتد که تعامل با صفحه برای کاربر بیش از 50 هزارم ثانیه مسدود شده باشد.

• Cumulative Layout Shift

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

هرچه مقدار این معیار کمتر باشد بهتر است. چراکه تغییر چیدمان صفحه به تجربه کاربر لطمه می‌زند. Google Lighthouse بهینه سازی ها را نیز به شما پیشنهاد می‌کند. مثلا فشرده‌سازی تصاویر نمونه‌ای از این پیشنهادات است. این بخش تحت عنوان Opportunities (به معنی فرصت‌ها) و Diagnostics (به معنی عیب‌یابی‌ها) به شما نمایش داده می‌شود.

2. قابلیت دسترسی (Accessibility)

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

3. بهترین اقدامات (Best Practices)

بخش بهترین اقدامات ارزیابی شده توسط Google Lighthouse بطور عمده مربوط به جنبه‌های امنیتی وبسایت است و وبسایت را براساس استاندادرهای روز توسعه می دهد. این بخش مربوط به صاحبان وبسایت است.

4. سئوی صفحات وب (SEO)

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

5. وب اپلیکیشن‌های پیش‌رونده (Progressive Web App)

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

چگونه می توان به Google Lighthouse دسترسی داشت؟

• PageSpeed Insights:  در واقع هر URLـی می تواند تست های ۶ گانه سرعت را انجام بدهد و از پیشنهادات برای بهینه سازی سایت بهره ببرد. در پایان یک امتیاز کلی سرعت به URL وارد شده تعلق می گیرد.
• Developer Tools در مرورگر Google Chrome: از سال ۲۰۱۸؛ گوگل لایت هاوس از بخش Developer Tools در مرورگر گوگل کروم هم قابل دسترسه. کاربران در این قسمت مشخص می کنند که تست های انجام شده روی لینک مشخص شده شان کدام مورد از تست های پنجگانه لایت هاوس است. در بخش دیوایس آپشن نیز کاربران می توانند گزینه موبایل یا دسکتاپ را انتخاب کنند. رنج مختلفی از سرعت های اینترنت نیز برای آنالیز کردن وجود دارد.
• پلاگین های Google Chrome: تست های پنجگانه لایت هاوس به طور کامل از طریق پلاگین گوگل کروم نیز قابل اجراست. شما می توانید این پلاگین را از بخش های مربوط به پلاگین های گوگل کروم جستجو و پیدا کنید. همچنین گوگل لایت هاوس از طریق پرتال های dev گوگل نیز قابل دسترسی است.

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

با این ابزار وب سایت خود را برای گوگل بهینه سازی می کنید و تا جایی که امکان دارد وب سایت را برای استفاده دستگاه هایی همچون تلفن های همراه هم بهینه می کنید.