گوگل سرچ کنسول یکی از ابزارهای قدرتمند برای بهینهسازی وبسایتها است. یکی از بخشهای مهم این ابزار، Core Web Vitals است که به بررسی عملکرد و تجربه کاربری صفحات وب میپردازد. Core Web Vitals شامل سه معیار اصلی است:
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
در این مقاله به بررسی خطاهای مربوط به این معیارها و نحوه رفع آنها پرداخته میشود.
سرفصل مطالب
Largest Contentful Paint (LCP)
LCP مدت زمانی است که طول میکشد تا بزرگترین محتوای قابل مشاهده در صفحه بارگذاری شود. این معیار به طور مستقیم بر تجربه کاربری تأثیر میگذارد. این محتوا می تواند عکس، بارگذاری یک کد و یا بصورت کلی سرعت کند سایت باشد.
خطا LCP
- سرعت پایین سرور: سرور کند میتواند زمان بارگذاری محتوای اصلی را افزایش دهد. وقتی سرور به درخواستهای کاربر به کندی پاسخ میدهد، زمان بیشتری برای بارگذاری محتوای اصلی مورد نیاز است. این مشکل می تواند از منابع اختصاص داده به سرور باشد.
- خطای رندر جاوااسکریپت: فایلهای جاوااسکریپت بزرگ و پیچیده میتوانند رندر صفحه را به تأخیر بیندازند. وقتی مرورگر در حال پردازش جاوااسکریپت است، نمیتواند محتوای صفحه را به سرعت بارگذاری کند.
- بارگذاری کند منابع: تصاویر و ویدئوها با حجم بالا میتوانند باعث افزایش زمان LCP شوند. بارگذاری منابع حجیم نیازمند زمان بیشتری است که میتواند تجربه کاربری را تحت تأثیر قرار دهد.
رفع خطا LCP
- بهینهسازی سرور: استفاده از سرورهای سریعتر، با رم کافی، CPU قدرتمند و تنظیمات استاندارد باعث بهینهسازی سرور می شود. همچنین استفاده از شبکههای توزیع محتوا (CDN) میتواند زمان پاسخگویی را کاهش دهد.
- کاهش و بهینهسازی جاوااسکریپت: کاهش حجم فایلهای جاوااسکریپت بصورت فشرده (minify) و بهینهسازی کد جاوااسکریپت میتواند به بهبود LCP کمک کند.
- بهینهسازی تصاویر و ویدئوها: استفاده از فرمتهای بهینهتر مانند WebP و فشردهسازی تصاویر و ویدئوها و استفاده از تکنیکهای بارگذاری تنبل (lazy loading) برای منابع غیرضروری میتواند زمان بارگذاری را کاهش دهد.
First Input Delay (FID)
FID مدت زمانی است که طول میکشد تا پس از اولین تعامل کاربر با صفحه (مانند کلیک یا لمس)، مرورگر بتواند به آن واکنش نشان دهد و کاربر تعامل داشته باشد.
خطا FID
- بارگذاری سنگین جاوااسکریپت: اسکریپتهای بزرگ و پیچیده میتوانند باعث تأخیر در پاسخگویی به تعاملات کاربر شوند. وقتی مرورگر در حال اجرای جاوااسکریپت سنگین است، نمیتواند به سرعت به تعاملات کاربر پاسخ دهد.
- تداخل با سایر منابع: درخواستهای متعدد به سرور و بارگذاری منابع مختلف میتوانند باعث افزایش FID شوند. وقتی مرورگر در حال بارگذاری منابع مختلف است، نمیتواند به سرعت به تعاملات کاربر پاسخ دهد.
رفع خطا FID
- فشرده و بهینه سازی کد جاوااسکریپت: مشابه رفع خطای LCP عمل می کند.
- بهینهسازی بارگذاری منابع: کاهش تعداد درخواستها به سرور و استفاده از تکنیکهای بارگذاری غیرهمزمان برای منابع غیرضروری، و بهینهسازی کدهای جاوااسکریپت میتواند به بهبود FID کمک کند.
افزونه کَش
افزونه های کشینگ از موثرترین موارد برای بهینه سازی سرعت بارگذاری سایت است. این ماژول ها از تصاویر کَش می سازند که باعث می شود هر بار نیاز به بارگذاری کامل تصویر اصلی نباشد. همچنین قابلیت WebP کردن تصاویر و minify کردن فایل های جاوااسکریپت دارند. پس به رفع خطاهای LCP و FID کمک بزرگی می کنند.
Cumulative Layout Shift (CLS)
CLS معیاری است که نشان میدهد چقدر محتوای صفحه در طول بارگذاری جابجا میشود. این معیار به تجربه کاربری روان و بدون اختلال کمک میکند.
خطا CLS
- عدم تعیین ابعاد برای تصاویر و ویدئوها: عدم تعیین ارتفاع و عرض برای تصاویر و ویدئوها میتواند باعث جابجایی محتوا شود. وقتی مرورگر نمیداند که یک تصویر یا ویدئو چقدر فضا نیاز دارد، ممکن است بعد از بارگذاری، محتوای صفحه جابجا شود.
- بارگذاری تبلیغات و محتوای پویا: تبلیغات و محتوای پویا که به صورت ناگهانی بارگذاری میشوند، میتوانند باعث جابجایی محتوا شوند. این موضوع میتواند تجربه کاربری را مختل کند.
- استفاده از فونتهای غیربهینه: فونتهای غیربهینه در بارگذاری دچار اشکال میشوند و در تغییرات موثر هستند، فونتهای وب که به صورت ناگهانی تغییر میکنند میتوانند باعث جابجایی محتوا شوند.
رفع خطا CLS
- تعیین ابعاد برای تصاویر و ویدئوها: تعیین ارتفاع و عرض مشخص برای تصاویر و ویدئوها میتواند از جابجایی محتوا جلوگیری کند. این کار به مرورگر کمک میکند تا فضای مورد نیاز برای هر عنصر را از ابتدا در نظر بگیرد.
- مدیریت بارگذاری تبلیغات: استفاده از فضاهای ثابت برای تبلیغات و بارگذاری تدریجی آنها میتواند به کاهش CLS کمک کند. همچنین، استفاده از تکنیکهای بارگذاری تنبل (lazy loading) برای محتوای پویا میتواند مفید باشد.
- استفاده از فونتهای بهینه: استفاده از فونتهای بهینه و تکنیکهای بارگذاری فونت مناسب، مانند استفاده از فونتهای سیستم یا بارگذاری فونتها به صورت غیرهمزمان، میتواند به بهبود CLS کمک کند.
رفع خطا Core Web Vitals سایت فروشگاهی
تیم تخصصی اپن کارت در زمینه کاهش و رفع خطاها اقدامات زیر را برای مشریان گرامی انجام می دهد:
- سرور استاندارد با منابع کافی برای رفع مشکلات سروری
- آپدیت منظم CMS، قالب و ماژول ها برای بهینه سازی کدها
- دارای سیستم های فشرده سازی کد
- دارای سیستم های WebP کردن تصاویر
- دارای فونت های بهینه و استاندارد
در نهایت طراحی سایت فروشگاهی به گونه طراحی می شود که اختلالات CLS وجود نداشته باشد. با بررسی دقیق خطاهای سرچ کنسول و رفع موارد تمام آدرس های سایت گزارش خوب خواهند د اشت.
بهینهسازی Core Web Vitals میتواند به بهبود عملکرد و تجربه کاربری وبسایتها کمک کند. با شناسایی و رفع خطاهای مربوط به LCP، FID و CLS، میتوان به نتایج بهتری در گوگل سرچ کنسول دست یافت و رتبهبندی بهتری در نتایج جستجوی گوگل کسب کرد. استفاده از تکنیکهای بهینهسازی مناسب و توجه به جزئیات میتواند تفاوت بزرگی در کیفیت وبسایت ایجاد کند. با انجام این بهینهسازیها، نه تنها کاربران از تجربه بهتری برخوردار خواهند شد، بلکه موتورهای جستجو نیز وبسایت شما را به عنوان یک منبع معتبر و کاربرپسندتر تشخیص خواهند داد.