طراحی سایت

Lighthouse چیست؟ فانوس دریایی گوگل؛ راهنمای مطمئن بهینه سازی وب سایت

زمان مطالعه: 6 دقیقه

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

Google Lighthouse چیست؟

Google lighthouse یا فانوس دریایی گوگل، یک ابزار کد باز (Open Source) و خودکار برای اندازه‌گیری کیفیت صفحات سایت است. Google Lighthouse با بررسی فاکتورهایی مانند قابلیت دسترسی، عملکرد و میزان بهینه بودن صفحات، شرایط لازم برای بهبود وب سایت شما را فراهم می‌کند.

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

از آنجا که یکی از مهم‌ترین فاکتورهای رتبه بندی گوگل، مربوط به تجربه کاربری (UX) است، گوگل لایت هاوس، می‌تواند ابزاری کارآمد و مفید برای اطمینان از عملکرد وب سایت شما در این زمینه باشد.

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

کاربرد Lighthouse چیست؟

گوگل لایت هاوس به شما امکان می‌دهد تا عملکرد سایت خود را بازرسی کنید. ورژن‌ اولیه این ابزار تنها برای بررسی Progressive Web App مورد استفاده قرار می‌گرفت. در ورژن دوم امکان ارزیابی سئو و عملکرد وب سایت‌های معمولی نیز به این ابزار اضافه شد. در ورژن سوم، Lighthouse صاحب یک قالب جدید به همراه ابزارهایی برای ارزیابی در سطح کدهای برنامه نویسی وب سایت‌ها از طریق مرورگر Chrome شد.

فاکتورهای مورد بررسی Lighthouse چیست؟

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

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

فاکتورها

  1. Performance (کارایی)

این بخش مربوط به سرعت بالا آمدن یا بارگذاری کامل وب سایت یا اپلیکیشن است. در این قسمت مشخص می‌شود سرعت بارگذاری وب سایت مناسب است یا نه.

این بخش موارد زیر را در بر می‌گیرد:

First content paint

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

First meaningful paint

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

Speed index

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

First CPU idle

فاکتور FCI، اولین زمانی است که کاربر می‌تواند روی یک لیست بازشونده کلیک کند.

Time to interactive

زمان تعامل یا TTI، مدتی است که صفحه کاملا قابل تعامل باشد. به بیان دیگر، زمانی است که همه قسمت‌های سایت در دسترس باشد.

Estimated Input Latency

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

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

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

  1. Best practices (بهترین روش)

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

  1. سئو

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

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

آیا صفحات وب سایت شما Mobile friendly است؟

آیا محتوای صفحات از عنوان برخوردار هستند؟

آیا توضیحات متا یا meta description برای صفحات قرار داده شده است؟

در تولید محتوای متنی از فونت و اندازه قلم مناسب استفاده شده است؟

آیا در صفحات وب سایت شما از محتوای مبتنی بر فرمت‌های غیرقابل ایندکس شدن (توسط موتورهای جستجو) استفاده شده است؟

  1. Progressive web app (برنامه وب پیش رونده)

وب اپلیکیشن پیش رونده یا PWA به وب سایت‌هایی گفته می‌شود که مانند اپلیکیشن‌های نصب شده بر روی گوشی‌های تلفن همراه در بستر وب قابل استفاده هستند. فاکتور PWA عواملی مانند نحوه نمایش صفحات در گوشی‌های تلفن همراه، استفاده از تگ Viewport، تغییر HTTP به HTTPS، وضعیت بارگیری صفحات در صورت ضعیف بودن اینترنت و توانایی وب سایت در ارائه محتوا به صورت آفلاین را مورد بررسی قرار می‌دهد. در صورتی که وب سایت شما از اپلیکیشن‌های پیشرفته وب استفاده کند، بخش PWA به گزارش صفحه اضافه می‌شود.

توصیه‌های عملکرد Lighthouse چیست؟

اگر می‌خواهید بدانید Lighthouse برای بهبود عملکرد سایت شما چه پیشنهاداتی دارد، باید بگوییم این الگوریتم به شما توصیه می‌کند:

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

راه ‌های دسترسی به Lighthouse چیست؟

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

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

ابزار Page Speed Insights

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

ابزار Developer Tools در Google Chrome

از سال 2018 گوگل لایت هاوس از بخش Developer Tools در مرورگر Chrome قابل دسترسی است. در این بخش کاربران می‌توانند مشخص کنند که تست‌های انجام شده بر روی لینک‌هایی که مشخص کرده‌اند، کدام مورد از تست‌های پنجگانه Lighthouse باشد. همچنین در این قسمت بخشی به نام Option device هم وجود دارد که به وسیله آن کاربران می‌توانند گزینه موبایل یا دسکتاپ را انتخاب کنند. علاوه براین، renge های مختلف سرعت‌های اینترنت نیز برای آنالیز کردن وجود دارد.

پلاگین‌های Google Chrome

انجام کامل تست‌های پنچ گانه Lighthouse از طریق پلاگین گوگل کروم امکان پذیر است. همچنین گوگل لایت هاوس از طریق پورتال‌های dev گوگل نیز قابل دسترسی است.

روش استفاده از Lighthouse چیست؟

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

برای اجرای Lighthouse دو راه وجود دارد:

  1. Google Lighthouse در ابزارهای توسعه دهنده:

صفحه وب سایت مورد نظر خود را در Google Chrome باز کنید.

روی F12 یا Ctrl+Shift+J کلیک کنید تا پنل حسابرسی ابزارهای توسعه دهنده باز شود.

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

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

انتخاب کنید که می‌خواهید عملکرد وب سایت را در دسکتاپ تجزیه و تحلیل کنید یا در موبایل؟

در پایان روی ایجاد گزارش کلیک کنید.

  1. افزونه Chrome برای Google Lighthouse

Lighthouse را در فروشگاه وب کروم جستجو کنید.

گزینه «افزودن به Chrome» را انتخاب کرده و روی «افزودن افزونه» کلیک کنید.

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

نماد Lighthouse را انتخاب کنید.

روی ایجاد گزارش کلیک کنید.

گزارش شما در یک برگه جدید باز می‌شود.

و در انتها

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

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

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

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