Core Web Vitals چیست؟ آموزش بهبود LCP، INP و CLS در وردپرس
مقدمه
سرعت بارگذاری سایت یکی از مهم‌ترین عوامل تأثیرگذار بر تجربه کاربران است. اما آیا سرعت سایت فقط به مدت‌زمان باز شدن صفحه بستگی دارد؟
خیر! گوگل برای بررسی کیفیت تجربه کاربران، مجموعه‌ای از معیارها را با عنوان Core Web Vitals معرفی کرده است. این معیارها نشان می‌دهند صفحات وب با چه سرعتی بارگذاری می‌شوند، چقدر سریع به تعامل کاربران پاسخ می‌دهند و تا چه اندازه از جابه‌جایی ناخواسته عناصر صفحه جلوگیری می‌کنند.
در این مقاله با سه معیار اصلی Core Web Vitals و روش بهبود آن‌ها در وردپرس آشنا می‌شویم.
Core Web Vitals شامل چه معیارهایی است؟
این مجموعه سه شاخص اصلی دارد:
۱. معیار LCP؛ سرعت نمایش محتوای اصلی
LCP مخفف Largest Contentful Paint است و مدت‌زمان نمایش بزرگ‌ترین عنصر محتوایی قابل مشاهده در صفحه را اندازه‌گیری می‌کند. این عنصر معمولاً تصویر اصلی، بنر یا بلوک بزرگ متنی صفحه است.
- کمتر از ۲٫۵ ثانیه: وضعیت مطلوب
- بین ۲٫۵ تا ۴ ثانیه: نیازمند بهبود
- بیشتر از ۴ ثانیه: ضعیف
چگونه LCP را بهبود دهیم؟
- تصاویر اصلی را با فرمت WebP یا AVIF ارائه کنید.
- تصاویر را متناسب با اندازه نمایشگر فشرده‌سازی کنید.
- از کش سمت سرور استفاده کنید.
- زمان پاسخ‌گویی اولیه سرور را کاهش دهید.
- تصویر اصلی صفحه را به‌اشتباه Lazy Load نکنید.
- فایل‌های CSS و منابع مسدودکننده رندر را بهینه کنید.
۲. معیار INP؛ سرعت پاسخ‌گویی سایت
INP مخفف Interaction to Next Paint است. این شاخص بررسی می‌کند سایت پس از تعامل کاربر، مانند کلیک روی دکمه یا باز کردن منو، با چه سرعتی پاسخ می‌دهد.
- کمتر از ۲۰۰ میلی‌ثانیه: مطلوب
- بین ۲۰۰ تا ۵۰۰ میلی‌ثانیه: نیازمند بهبود
- بیشتر از ۵۰۰ میلی‌ثانیه: ضعیف
برای بهبود INP:
- کدهای JavaScript غیرضروری را حذف کنید.
- اجرای اسکریپت‌های غیرضروری را به تعویق بیندازید.
- تعداد افزونه‌های سنگین را کاهش دهید.
- اسکریپت‌های تبلیغاتی و خارجی غیرضروری را محدود کنید.
- اجرای عملیات سنگین هنگام کلیک کاربر را بهینه کنید.
۳. معیار CLS؛ جلوگیری از جابه‌جایی عناصر صفحه
CLS مخفف Cumulative Layout Shift است و میزان جابه‌جایی ناخواسته عناصر صفحه را اندازه‌گیری می‌کند. برای مثال، ممکن است هنگام بارگذاری تصویر، دکمه‌ای که کاربر قصد کلیک روی آن را دارد ناگهان به پایین منتقل شود.
- کمتر از ۰٫۱: مطلوب
- بین ۰٫۱ تا ۰٫۲۵: نیازمند بهبود
- بیشتر از ۰٫۲۵: ضعیف
راهکارهای بهبود CLS:
- برای تصاویر ابعاد مشخص تعیین کنید.
- فضای تبلیغات را از قبل مشخص کنید.
- از بارگذاری ناگهانی بنرها جلوگیری کنید.
- فونت‌های سایت را به شکل اصولی بارگذاری کنید.
- از افزودن محتوای جدید بالای محتوای در حال مشاهده کاربر خودداری کنید.
چگونه Core Web Vitals سایت وردپرسی را بررسی کنیم؟
برای بررسی وضعیت سایت می‌توانید از ابزارهای Google PageSpeed Insights، Google Search Console و گزارش‌های تجربه واقعی کاربران (CrUX) استفاده کنید.
پس از بررسی، ابتدا صفحاتی را بهینه کنید که بیشترین بازدید یا بیشترین مشکل را دارند.
اشتباهات رایج هنگام بهینه‌سازی
یکی از اشتباهات رایج، نصب هم‌زمان چند افزونه بهینه‌سازی است. این کار ممکن است باعث تداخل در کش، فشرده‌سازی فایل‌ها و اجرای اسکریپت‌ها شود.
همچنین نصب CDN به‌تنهایی تمام مشکلات سرعت سایت را برطرف نمی‌کند. گاهی مشکل اصلی از منابع سرور، دیتابیس یا کدنویسی قالب ناشی می‌شود.
جمع‌بندی
Core Web Vitals فقط مجموعه‌ای از اعداد در ابزارهای تست سرعت نیست؛ بلکه معیاری برای سنجش کیفیت تجربه واقعی کاربران است. با بهینه‌سازی LCP، INP و CLS می‌توانید تجربه بهتری برای بازدیدکنندگان ایجاد کنید و زیرساخت فنی سایت خود را بهبود دهید.