چگونه تجربه کاربری سایت خود را با google lighthouse ارتقا بدهیم ؟
چه چیزی بهتر از این است که بتوانید سایت خود را درست مانند گوگل ببینید و بررسی کنید؟ خوشبختانه گوگل ابزارهای رایگانی دارد که به کمک آنها میتوانید سایتتان را ارزیابی کنید و با پیشنهادهای مناسب، عملکردش را بهتر کنید. یکی از این ابزارها، گوگل لایتهاوس (Google Lighthouse) است. این ابزار مثل یک فانوس دریایی برای سایت شما عمل میکند و مسیر بهبود تجربه کاربری را روشنتر میسازد. در این مطلب، با تمام بخشهای لایتهاوس و طرز استفاده از آن آشنا میشوید.
1.بازدهی و سرعت بارگذاری صفحات (Efficiency & Loading Speed)
2.میزان دسترسی و سازگاری برای تمامی کاربران (Inclusivity & Usability)
3.پیروی از اصول و معیارهای پذیرفتهشده در طراحی وب (Web Standards & Guidelines)
4.ارتقاء جایگاه صفحات در موتورهای جستجو (Search Engine Optimization)
5.ارزیابی قابلیتهای برنامههای پیشرفته تحت وب (Advanced Web Applications)
فرق بین Lighthouse و Core Web Vitals در چیست؟
Lighthouse یک ابزار متنباز گوگل برای ارزیابی کیفیت صفحات وب است که معیارهایی مثل عملکرد، دسترسپذیری، سئو و بهترین شیوهها را بررسی و گزارش کامل ارائه میکند.
کور وب وایتالز:
Core Web Vitals مجموعهای از معیارهای گوگل است که تنها روی تجربه کاربری وبسایت تمرکز دارد و شاخصهایی مثل LCP، FID و CLS را اندازهگیری میکند.
تفاوت:
لایتهاوس جامعتر است و جنبههای مختلف وبسایت را میسنجد، در حالی که Core Web Vitals فقط روی عملکرد و تجربه کاربری واقعی صفحه تمرکز میکند.
چرا نمرههای Lighthouse هر بار فرق دارند؟
وقتی با Lighthouse سایتت را آنالیز میکنی، هر دفعه ممکن است امتیازی که میگیری کمی بالا یا پایین باشد. این تغییر به خاطر خیلی عوامل است؛ مثلاً شاید سرعت اینترنت فرق کند یا مرورگری که استفاده میکنی نسخهاش عوض شده باشد. حتی موقعیت جغرافیایی، دستگاهی که با آن تست میکنی یا حتی زمانی که تست میگیری هم روی نتایج اثر میگذارند. همچنین ورژن خود Lighthouse یا مرورگر هم بیتاثیر نیستند. به همین دلایل، امتیازها همیشه یکسان نیستند.
- تغییر نسخه مرورگری که با آن تست میگیری
- قوی یا ضعیف بودن سیستم (کامپیوتر یا موبایل) کاربر
- سرعت اینترنت یا شلوغ بودن شبکه در لحظه تست
- فاصله جغرافیایی سرور سایت تا کاربر تستکننده
- تغییر نسخه خود ابزار Lighthouse
- شلوغ بودن یا به مشکل خوردن سرور سایت
- شیوه بارگذاری منابع سایت در هر برقراری اتصال
- میزان توان پردازش سیستم هنگام آنالیز
- وضعیت شبکه داخلی مثل وایفای یا کابل بودن
- تغییرات جزئی در شبکههای اینترنتی جهانی
چرا آمارهای Lighthouse با سرچ کنسول یکی نیستند؟
اینکه نتایج Lighthouse با سرچ کنسول متفاوت است، کاملاً طبیعی محسوب میشود. دلیل اصلی این اختلاف، تفاوت در نحوه جمعآوری دادهها و شرایط سنجش سایتهاست. Lighthouse معمولاً سایت را در محیطی شبیهسازیشده و کنترلشده تست میکند؛ یعنی شرایط سختافزار، سرعت اینترنت و حتی مکان کاربر، همه ثابت یا از قبل مشخصاند. اما Google Search Console اطلاعات و گزارشها را براساس تجربه بازدیدکنندگان واقعی ثبت میکند؛ یعنی نتایج از کاربران واقعی با اینترنتها و سیستمهای متفاوت و حتی از کشورهای مختلف جمعآوری میشود.
پس هر ابزار شرایط مخصوص خودش را دارد و به همین خاطر هم اعداد و گزارشهایشان مثل هم نیستند. بنابراین اگر میخواهید تصویر دقیقتری از وضعیت سایت داشته باشید، بهتر است هر دو ابزار را با هم در نظر بگیرید و فقط به یکی از آنها اکتفا نکنید.
مهمترین معیارهای بخش Performance لایتهاوس و 4 راهکارهای بهبود کننده
۱. Largest Contentful Paint (LCP) – زمان بارگذاری بزرگترین محتوا
LCP نشون میده چه مدت طول میکشه تا بزرگترین آیتم (مثل عکس یا متن اصلی) در صفحه کامل دیده بشه. اگر این زمان زیر ۲.۵ ثانیه باشه عالیه.
روش بهبود LCP:
-
سرور رو سریعتر کن یا میزبان مناسبتر بگیر.
-
سایت رو به نزدیکترین CDN وصل کن.
-
تصاویر رو کمحجم و کوچک کن.
-
فایلهای جاوااسکریپت و CSS اضافی رو کاهش بده و بهینه کن.
-
از کش مرورگر و سرور استفاده کن تا فایلها تندتر لود بشن.
-
لود منابع اصلی رو زودتر انجام بده (preload).
-
تا حد امکان، قسمت رندر صفحه رو به سرور بسپر.
۲. Total Blocking Time (TBT) – زمان بلاک شدن کاربر
TBT مدت زمانی رو میسنجه که کاربر، بعد از دیده شدن اولین محتوا تا وقتی واقعاً بتونه با سایت تعامل داشته باشه (کلیک، اسکرول و…) باید منتظر بمونه. زیر ۲۰۰ میلیثانیه خوبه.
روش کاهش TBT:
-
جاوااسکریپت رو سبک کن یا تکهتکه بارگذاری کن.
-
کدهای اضافی یا کتابخانههای غیرضروی رو حذف کن.
-
فایلهای CSS رو هم سبک و کوچک کن.
-
از GZIP برای فشردهسازی استفاده کن.
-
زمان اولین پاسخ سرور (TTFB) رو پایین بیار.
۳. First Contentful Paint (FCP) – اولین بارگذاری محتوای قابل دیدن
این معیار اندازه میگیره که اولین آیتم قابل نمایش (متن یا تصویر) چه زمانی به کاربر نشون داده میشه. اگه FCP زیر ۱.۸ ثانیه باشه، وضعت خوبه.
روش بهبود FCP:
-
فونتها رو بهینه لود کن و سعی کن فونتهای زیاد اضافی حذف بشن.
-
CSSها رو تجمیع و کوچک کن.
-
استایل غیرضروری رو حذف کن تا صفحه زودتر نمایش داده بشه.
-
تصاویر حیاتی و مهم رو سریعتر بارگذاری کن.