Google Lighthouse چیست و کاربرد آن

Google Lighthouse چیست و کاربرد آن | Google Lighthouse (فانوس دریایی گوگل) یک ابزار رایگان و حرفه ای که امکان بررسی عملکرد وبسایت را از لحاظ تکنیکی را فراهم می کند. در این آموزش از میهن اسکریپت به این مسئله می پردازیم که Google Lighthouse چیست و چرا باید از آن استفاده کرد.

Google Lighthouse چیست و کاربرد آن

Google Lighthouse چیست و کاربرد آن

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

 

Google Lighthouse در آنالیز سایت شما به ۵ نکته توجه دارد :

  1. عملکرد (Performance)
  2. سطح دسترسی (Accessibility)
  3. بهترین روش‌ها (Best Practices)
  4. سئو (SEO)
  5. وب اپلیکیشن پیش‌رونده (Progressive Web App)

 

Google Lighthouse چیست و کاربرد آن

 

عملکرد (Performance)

لایت هاوس در بخش Performance به بررسی سرعت بازگداری سایت یا اپلیکیشن شما می پردازد. برای این منظور فانوس دریایی گوگل ۶ فاکتور را در نظر می گیرد :

 

  1. First Contentful Paint: مدتی که کاربر برای مشاهده اولین متن یا تصویر سایت شما باید منتظر بماند.
  2. Speed Index: کاربر برای مشاهده محتوای اصلی صفحه چقدر باید صبر کند.
  3. Largest Contentful Paint: مدت زمان نمایش کامل حجیم‌ترین تصویر یا ترجمه بلوک متنی صفحه
  4. Time to Interactive: مقدار زمانی که لود صفحه بطور کامل انجام می شود و کاربران می توانند با آن تعامل کامل داشته باشند. (به عنوان مثال : کلیک بر روی دکمه ها و …)
  5. Total Blocking Time: میزان زمانی که کاربر هنوز قادر به تعامل با صفحه نمی باشد.
  6. Cumulative Layout Shift: مقدار محتوایی که بعد از رندر شدن یک صفحه، در آن صفحه در حرکت است.

 

لیستی ز راه حل هایی که Google Lighthouse برای برای بهبود عملکرد وبسایت و یا اپلیکیشن ها ارائه می دهد :

  • کم کردن منابع بلاک کننده رندرها
  • فرمت های تصویر next-gen در سرورها
  • فعال سازی فشرده سازی متن ها
  • غیرفعال کردن CSS های غیر ضروری
  • بررس نمایش متون هنگام بارگذاری Webfont ها
  • استفاده صحیح از کش  Cache ها در سایت
  • بهبود Critical Rendering Path
  • عدم استفاده از تصاویر خیلی بزرگ
  • بارگذاری تصاویر با تاخیر (لود تنبل)
  • فشرده سازی CSS
  • فشرده سازی JavaScript
  • بهینه سازی حجم تصاویر
  • فعال کردن قابلیت پیش اتصال به سرورها
  • پایین نگه داشتن مدت زمان پاسخگویی سرورها
  • جلوگیری از ریدایرکت ها
  • پیش بارگذاری Request های کلیدی
  • استفاده از فرمت های ویدیویی برای محتوای انیمیشنی
  • کاهش وزن کلی بایت ها
  • جلوگیری از افزایش اندازه بیش از حد DOM ها
  • بررسی نحوه عملکرد وبسایت با استفاده از تست های تایمینگ
  • کاهش مدت زمان Bootup جاوا اسکریپت
  • کاهش مدت زمان بارگذاری موضوع اصلی

 

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

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

 

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

در این قسمت، بر امینت سایت تاکید می شود و اینکه تا چه حد اصول و استانداردهای امنیتی در وبسایت شما رعایت شده است. لایت هاوس چک می کند ه سایت شما حتما از گواهینامه SSL یا HTTPS استفاده کرده باشد. همچنین میزان آسیب پذیری کدهای JavaScript (قدیمی نبودن لایبرری‌ های جاوا اسکریپت)  و عدم قابلیت patse کردن فیلدهای ورود رمز عبور، فرمان های غیر امن مانند document.write() ، استفاده از APIهای منسوخ، ارسال به موقع درخواست ارسال اعلان (notification) به مرورگر و … در سایت بررسی می شود.

 

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

در این بخش، لایت هاوس به بررسی سئو سایت و سهولت امکان شناسایی وبسایت توسط خزنده های گوگل، می پردازد. همچنین کاربرد صجیج تگ هایی مانند canonical و hreflang در سایت و میزان انعطاف اپلیکیشن یا وبسایت با گوشی های هوشمند و PWA ها (ریسپانسیو یا واکنشگرا بودن) نیز مورد پردازش قرار می گیرند.

 

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

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

 

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

  1. از سرویس‌ ورکرها استفاده شود.
  2. از سرویس‌ ورکر برای کش کردن فایل به صورت لوکال استفاده شود.
  3. در هنگام آفلاین بودن از سرویس‌ ورکر به عنوان پروکشی برای بازگردانی نسخه کش شده فایل‌ها استفاده شود.

در وب‌اپ‌های پیشرونده از سرویس‌ ورکرها (Registers a service worke) برای آفلاین کردن وبسایت، ارسال اعلان به کاربر و امکان اضافه شدن آیکون نصبی به صفحه دستگاه کاربر استفاده می‌شود.

 

نحوه دسترسی به Google Lighthouse

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

 

ابزار PageSpeed Insights

ابزار PageSpeed Insight فقط برای بررسی سرعت صفحات سایت می باشد. این ابزار پس از بررسی سایت یا URL مورد نظر شما یک امتیاز کلی برای سرعت بازگذرای سایت یا صفحه وب شما در نظر گرفته و پیشنهادهایی را نیز برای بهبود سرعت لود سایت به شما ارائه می دهد.

 

دسترسی به لایت هاوس گوگل با مرورگر کروم (بدون پلاگین)

برای این کار ابتدا سایت یا URL مورد نظر خود را در مرورگر کروم باز کنید. پس از لود کامل صفحه، روی صفحه سایت راست کلیک کرده و سپس بر روی گزینه Inspect کلیک کنید. (همچنین می توانید از کلید میانبر F12 در کیبورد استفاده کنید.)

 

Google Lighthouse چیست و کاربرد آن

 

سپس از قسمت زبانه‌ها گزینه Lighthouse را انتخاب کنید. در بخش باز شده ابتدا باید از قسمت Device تعیین کنید که می خواهید عملکرد سایت در موبایل بررسی شود یا دسکتاپ.

در نهایت بر روی دکمه Generate report کلیک کنید تا آنالیز سایت شما شروع شود.

 

Google Lighthouse چیست و کاربرد آن

استفاده از پلاگین Google Chrom برای دسترسی به فانوس دریایی گوگل

برای این کار ابتدا کلمه Lighthouse را در فروشگاه وب کروم جستجو نمایید. پس از جستجو لیستی از پلاگین های در این زمینه برای شما نمایش داده خواهد شد. بر روی اولین افزونه (Lighthouse) کلیک کنید.

 

Google Lighthouse چیست و کاربرد آن

 

در ادامه و برای نصب افزونه روی دکمه Add to Chrome  کلیک کنید.

 

Google Lighthouse چیست و کاربرد آن

 

در پنجره باز شده روی دکمه Add extension کلیک کنید.

 

Google Lighthouse چیست و کاربرد آن

 

اکنون در بالا سمت راست مرورگر آیکونی شبیه به پازل نمایش داده می شود. پس از لود سایت یا URL مورد نظر خود در مرورگر کروم بر روی ان آیکون کلیک کنید. سپس روی افزونه Lighthouse کلیک کنید. اکنون روی آیکون چرخ دنده کلیک کنید تا بتوانید دیوایس مورد نظر (موبایل یا دسکتاپ) را برای بررسی انتخاب کنید. سپس برای آغاز برررسی سایت بر روی دکمه Generate report کلیک کنید.

 

Google Lighthouse چیست و کاربرد آن

 

امیدواریم مقاله Google Lighthouse چیست و کاربرد آن، برای شما مفید بوده باشد.

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

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