طراحی سایت

گوگل لایت هاوس (Lighthouse) چیست و چه کاربردی دارد؟

گوگل لایت هاوس چیست؟

 

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

Google Lighthouse چیست؟

lighthouse چیست؟ گوگل لایت هاوس (lighthouse) یا فانوس دریایی گوگل، یکی از ابزارهای کاربردی و رایگان برای ارزیابی وب سایت است که توسط خود گوگل معرفی شده است. گوگل لایت هاوس یک ابزار منبع باز است که بخش های مختلف سایت را مورد ارزیابی قرار می دهد و سپس اطلاعاتی در مورد آن به شما می دهد.

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

 

کاربرد گوگل لایت هاوس چیست؟

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

Google Lighthouse میزان کیفیت صفحه مورد نظر را بررسی می کند. به این منظور گوگل لایت هاوس 5 فاکتور را بررسی می کند که برای هر کدام امتیازی از 0 تا 100 نظر می گیرد و آن را در قالب یک نمودار دایره ای با رنگ های سبز (عالی)، نارنجی (متوسط) و قرمز (ضعیف) نمایش می دهد.

فاکتورهای گوگل لایت هاوس

فاکتورهای مورد بررسی گوگل لایت هاوس

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

  1. عملکرد (Performance)

در این بخش لایت هاوس به بررسی سرعت بارگذاری و لود سایت می پردازد. در این قسمت مشخص می شود؛ کاربران می توانند به سرعت به محتوا سایت دسترسی داشته باشند یا خیر. Lighthouse برای بررسی عملکرد سایت به 6 فاکتوری که در زیر معرفی شده است، توجه می کنند:

First content paint: معیار FCP که اولین ترسیم محتوا گفته می شود، نشان می دهد؛ چه مدت زمانی طول می کشد تا انواع محتواها از قبیل متنی، تصویری و … روی صفحه نمایش برای مخاطب نشان داده شود. واحد شاخص FCP  بر حسب ثانیه می باشد.

First meaningful paint: شاخص اولین ترسیم معنادار، مدت زمانی را نشان می دهد که اولین محتوا معنا دار بر روی صفحه نمایش ظاهر شود. منظور از محتوا معنادار، محتوا اصلی صفحه است. برای مثال در وبلاگ ها محتوا اصلی، متن مقاله و در صفحه گالری تصاویر، محتوا اصلی تصاویر، هستند.

First CPU idle: معیار اولین استراحت پردازنده، زمان تعامل حداقلی را نشان می دهد. زمان تعامل حداقلی، زمانی است که کاربر بتواند روی یک لیست بازشونده کلیک کند.

Speed index: شاخص سرعت ایندکس، سرعت نمایش محتوا در طول بارگذاری صفحه را نشان می دهد.

Time to interactive: این شاخص، بیانگر زمانی است که صفحه به طور کامل بارگذاری شده باشد و کاربران بتوانند تعامل داشته باشند..

Total Blocking Time: این گزینه، مدت زمانی را نشان می دهد که صفحه مسدود است و امکان تعامل کاربر وجود ندارد.

Largest Contentful Paint: این معیار نشان دهنده زمانی است که طول می کشد تا حجیم ترین تصویر یا بلوک متنی صفحه بارگذاری شود.

 

  1. میزان دسترسی (Accessibility)  

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

 

  1. سئو سایت (seo)

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

 

  1. بهترین اقدامات (Best practices) 

لایت هاوس در این بخش بیشتر بر جنبه های امنیتی سایت توجه دارد تا سایت بر اساس آخرین الگوریتم های گوگل، توسعه یافته باشد. به علاوه مواردی را بررسی می کند که تجربه خوبی برای کاربر به وجود می آورند. برای مثال بررسی می کند وب سایت از منابع ورودی ایمن برخوردار است، از پروتکل امنیتی ssl استفاده می کند یا خیر.

 

  1. وب اپلیکیشن های پیش رونده (PWA)

گوگل لایت هاوس در این بخش عملکرد سایت را به عنوان یک وب اپلیکیشن پیش رونده بررسی می کند. اما وب اپلیکیشن چیست؟ وب اپلیکیشن های پیش رونده که به اختصار pwa گفته می شوند، سایت هایی هستند که مثل برنامه های تلفن های همراه در فضای وب قابل دسترسی هستند. لایت هاوس در این بخش، فاکتورهایی مثل: وضعیت لود صفحات در صورت اختلال اینترنت، توانایی ارائه محتوا سایت به صورت آفلاین، نحوه نمایش صفحات در موبایل و … را مورد ارزیابی قرار می دهد.

 

وب اپلیکیشن های پیش رونده

 

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

تا به اینجا با گوگل لایت هاوس و معیار های آن آشنا شدیم. حال به دنبال استفاده از این ابزار قدرتمند گوگل هستیم. اما چگونه می توانیم به گوگل لایت هاوس دسترسی پیدا کنیم؟ در ادامه روش هایی برای استفاده از فانوس دریایی گوگل و آموزش Lighthouse به شما می گوییم.

 

روش اول: استفاده از مرورگر کروم Google Chrome

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

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

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

آموزش lighthouse

در صفحه ای که برای شما نمایش داده می شود، روی گزینه Lighthouse کلیک کنید.

آموزش lighthouse

در پایان روی دکمه Analyze Page Load کلیک کنید تا ابزار فانوس دریایی گوگل به بررسی 5 فاکتور مورد نظر بپردازد.

آموزش گوگل لایت هاوس

 

روش دوم: Google Lighthouse Extension

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

 ابتدا روی لینک روبرو کلیک کنید ( افزونه گوگل لایت هاوس ) و وارد صفحه افزونه گوگل لایت هاوس شوید سپس روی گزینه Add to Chrome کلیک کنید تا به مرورگر شما اضافه شود.

افزونه گوگل لایت هاوس

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

افزونه google Lighthouse

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

افزونه گوگل لایت هاوس

 

لایت هاوس برای بهبود عملکرد سایت چه پیشنهاداتی ارائه می دهد؟

خب تا اینجا دیدم گوگل لایت هاس با بررسی عواملی، عملکرد سایت را می سنجد. اما موضوع مهم پیشنهادات لایت هاوس برای بهبود عملکرد سایت است. موارد زیر پیشنهادات لایت هاوس در این باره است.

  • فرمان فشرده سازی متن را فعال کنید.
  • CSS هایی که قابل استفاده نیستند را غیر فعال کنید.
  • از عکس های خیلی بزرگ استفاده نکنید.
  • جاوا اسکریپت را فشرده سازی کنید.
  • CSS را فشرده سازی کنید.
  • تصاویر را بهینه سازی کنید.
  • بارگذاری تصاویر خارج از صفحه را به تعویق بیندازید.
  • از وضوح متن در زمان بارگذاری وب فونت اطمینان حاصل کنید.
  • قابلیت اتصال به پیش سرورها را فعال کنید.
  • زمان پاسخگویی سرور را پایین نگه دارید.
  • تا حد امکان از ریدایرکت خودداری کنید.
  • از کش ها برای قسمت های مختلف سایت به صورت صحیح استفاده کنید.
  • برای محتواهای متحرک و انیمیشنی از فرمت های ویدیویی استفاده کنید
  • مدت زمان لود موضوع اصلی را کاهش دهید.
  • از افزایش بیش از حد DOM ها جلوگیری کنید.
  • مدت زمان راه اندازی جاوا اسکریپت را کاهش دهید.
  • درخواست های کلیدی را از پیش بارگذاری کنید.
  • منابع بلاک کننده رندرها را کاهش دهید.
  • وزن کلی بایت ها را کاهش دهید.

 

❔︎ سوالات متداول

گوگل لایت هاوس چیست؟

گوگل لایت هاوس ابزار منبع باز برای سنجش کیفیت عملکرد صفحات سایت است. این ابزار با بررسی 5 معیار عملکرد، میزان دسترسی، سئو، بهترین اقدامات و وب اپلیکیشن های پیش رونده وضعیت صفحات سایت شما را بررسی می کند.

 

امتیاز های لایت هاوس به چه صورت است؟

امتیاز های لایت هاوس از 0 تا 100 است و در سه محدوده قرار می گیرد: 0 تا 49 ضعیف (قرمز)، 50 تا 89 متوسط (نارنجی)، 90 تا 100 عالی (سبز)

 

به چه صورت می توانیم از لایت هاوس استفاده کنیم؟

از طریق گزینه لایت هاوس در قسمت Inspect مرورگر کروم و از طریق اضافه کردن افزونه Lighthouse کروم می توانیم از لایت هاوس استفاده کنیم.

 

کلام آخر

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

 


بروزرسانی در سه شنبه, 06 تیر 1402 11:44

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *