Core Web Vitals چیست و چرا برای سئوی سایت حیاتی است؟ (راهنمای جامع عیب‌یابی و بهینه‌سازی گام‌به‌گام با آموزش ابزارها)

Core Web Vitals چیه و چرا برای سئوی سایت اهمیت داره؟

Core Web Vitals چیست؟

تا چند سال پیش، گوگل برای سنجش سرعت سایت، معیارهای ساده‌ای مثل زمان لود کامل صفحه داشت. اما این معیارها نمی‌توانستند تجربه واقعی کاربر را نشان دهند. فرض کنید صفحه‌ای در ۲ ثانیه لود می‌شود، اما کاربر تا ۳ ثانیه بعد از آن نمی‌تواند دکمه‌ای را کلیک کند، یا ناگهان تصویری لود می‌شود و متن زیر آن جابجا می‌خورد. اینها مواردی هستند که Core Web Vitals اندازه‌گیری می‌کند.

Core Web Vitals مجموعه‌ای از سه معیار مشخص است که گوگل برای سنجش تجربه کاربری واقعی در نظر گرفته:

1. LCP (Largest Contentful Paint) – زمان بارگذاری بزرگترین عنصر: این معیار می‌گوید چقدر طول می‌کشد تا بزرگترین المان صفحه (مثلاً یک تصویر بزرگ یا عنوان اصلی) برای کاربر نمایش داده شود. حد مطلوب: زیر ۲.۵ ثانیه.

2. INP (Interaction to Next Paint) – تعامل با صفحه: این معیار جدید که از مارس ۲۰۲۴ جایگزین FID شده، تأخیر پاسخگویی صفحه به تمام کلیک‌ها، ضربه‌ها و تعاملات کاربر را در طول بازدید اندازه می‌گیرد. حد مطلوب: زیر ۲۰۰ میلی‌ثانیه.

3. CLS (Cumulative Layout Shift) – پایداری بصری: این معیار میزان جابجایی غیرمنتظره المان‌های صفحه را در حین بارگذاری اندازه می‌گیرد. حد مطلوب: زیر ۰.۱.

چرا این معیارها برای سئو و کسب‌وکار شما حیاتی هستند؟

شاید فکر کنید اینها فقط چند عدد و رقم هستند، اما تأثیر مستقیمی روی درآمد شما دارند:

• تأثیر در رتبه‌بندی گوگل: گوگل رسماً اعلام کرده که Core Web Vitals یکی از فاکتورهای رتبه‌بندی است. سایت‌هایی که تجربه کاربری بهتری ارائه دهند، شانس بیشتری برای نمایش در صفحه اول نتایج دارند.

• نرخ پرش (Bounce Rate): اگر زمان بارگذاری صفحه از ۳ ثانیه بیشتر شود، ۵۳٪ کاربران موبایل آن صفحه را ترک می‌کنند.

• نرخ تبدیل (Conversion Rate): مطالعات گوگل نشان می‌دهد بهبود ۰.۱ ثانیه در سرعت بارگذاری، نرخ تبدیل را تا ۸٪ افزایش می‌دهد. همچنین کاهش LCP به اندازه ۱۰۰ میلی‌ثانیه، نرخ تبدیل را ۱.۳٪ بالا می‌برد.

• مثال واقعی: سایت Yahoo! Japan با بهبود CLS توانست ۱۵٪ به بازدید صفحات اضافه کند و نرخ پرش را ۱.۷۲٪ کاهش دهد.

چگونه Core Web Vitals سایت خود را بررسی کنیم؟ (آموزش عملی)

برای بررسی، دو ابزار اصلی و رایگان گوگل کافی است:

الف) Google Search Console

1. وارد حساب Search Console سایت خود شوید.

2. در منوی سمت چپ، بخش «Experience» را باز کنید.

3. روی «Core Web Vitals» کلیک کنید.

4. در اینجا دو گزارش جداگانه برای موبایل و دسکتاپ می‌بینید. گوگل بر اساس داده‌های واقعی کاربران (Field Data) به شما می‌گوید کدام صفحات مشکل دارند.

ب) Google PageSpeed Insights (ابزار اصلی عیب‌یابی)

1. به سایت pagespeed.web.dev بروید.

2. آدرس صفحه مورد نظر (مثلاً صفحه محصول یا مقاله) را وارد کنید.

3. ابزار ابتدا نسخه موبایل و سپس دسکتاپ را آنالیز می‌کند.

4. دو بخش مهم:

   • Field Data (داده‌های میدانی): عملکرد واقعی سایت برای کاربران در ۲۸ روز گذشته را نشان می‌دهد.

   • Lab Data (داده‌های آزمایشگاهی): عملکرد فعلی را در لحظه بررسی و مشکلات فنی را با راهکار پیشنهاد می‌دهد.

نکته حرفه‌ای: برای عیب‌یابی دقیق، همیشه به بخش «Opportunities» (فرصت‌ها) و «Diagnostics» (تشخیص) در پایین گزارش توجه کنید. گوگل دقیقاً می‌گوید چه چیزی مشکل دارد.

بزرگترین محتوای صفحه (LCP): عیب‌یابی و ۷ روش عملی برای کاهش آن

LCP بالا یعنی کاربر باید منتظر بماند تا اصل محتوا را ببیند. بیایید قدم‌به‌قدم مشکل را پیدا و حل کنیم.

قدم اول: تحلیل درست داده‌ها

قبل از هر کاری، در PageSpeed Insights بررسی کنید که بزرگترین عنصر صفحه چیست (ممکن است یک تصویر، عنوان متن یا ویدیو باشد). سپس ببینید مشکل از کجاست.

قدم دوم: بررسی زمان پاسخگویی سرور (TTFB)

TTFB (زمان تا اولین بایت) مدت زمانی است که طول می‌کشد تا سرور شما اولین اطلاعات را به مرورگر بفرستد. اگر TTFB بالا باشد (بیشتر از ۲۰۰-۳۰۰ میلی‌ثانیه)، هرچقدر هم بهینه‌سازی کنید، LCP خوب نمی‌شود.
راهکارها:

• ارتقای هاست: اگر هاست اشتراکی ضعیف دارید، به هاست قدرتمندتر یا سرور مجازی (VPS) مهاجرت کنید.

• فعال‌سازی کش: از افزونه‌های کش مثل WP Rocket (برای وردپرس) یا کش سطح هاست استفاده کنید تا صفحات آماده به کاربر تحویل داده شود.

• بهینه‌سازی پایگاه داده: جداول پایگاه داده را با افزونه‌هایی مثل WP-Optimize بهینه کنید.

قدم سوم: بهینه‌سازی تصاویر (آموزش گام‌به‌گام)

بزرگترین قاتل LCP، تصاویر حجیم هستند. فرض کنید یک عکس ۲ مگابایتی دارید. باید آن را به زیر ۱۰۰ کیلوبایت برسانید بدون اینکه کیفیت آن را از دست بدهید.
آموزش عملی:

1. تبدیل به فرمت WebP: این فرمت توسط گوگل ساخته شده و حجم تصاویر را ۲۵-۳۵٪ کمتر از JPEG می‌کند.

   • با افزونه: اگر وردپرس دارید، افزونه «ShortPixel» یا «EWWW Image Optimizer» را نصب کنید. در تنظیمات، گزینه «تبدیل خودکار به WebP» را فعال کنید.

   • با ابزار آنلاین: اگر وردپرس ندارید، از سایت convertio.co یا squoosh.app استفاده کنید و تصاویر را به WebP تبدیل و روی سرور آپلود کنید.

2. فشرده‌سازی: حتی بعد از تبدیل به WebP، باز هم می‌توان فشرده‌سازی کرد. ابزار TinyPNG عالی است.

3. تعیین ابعاد: هیچوقت تصویری با ابعاد ۴۰۰۰ در ۳۰۰۰ پیکسل را در سایتی که عرض آن ۸۰۰ پیکسل است، آپلود نکنید. ابتدا در نرم‌افزاری مثل Photoshop یا ابزارهای آنلاین، ابعاد تصویر را به اندازه مورد نیاز سایت کاهش دهید، سپس فشرده‌سازی کنید.

قدم چهارم: حذف کدهای مسدودکننده رندر

فایل‌های CSS و JavaScript که در قسمت <head> صفحه لود می‌شوند، مانع نمایش سریع محتوا می‌شوند.
راهکار در وردپرس:

• افزونه WP Rocket یا Autoptimize را نصب کنید.

• به بخش تنظیمات بروید و گزینه‌های زیر را فعال کنید:

  • Minify CSS/JavaScript: فایل‌ها را کوچک‌سازی می‌کند.

  • Remove Render-Blocking CSS/JavaScript: کدهای مسدودکننده را مدیریت می‌کند.

  • Load JavaScript Deferred: جاوااسکریپت را به تعویق می‌اندازد تا بعد از لود محتوای اصلی اجرا شود.

قدم پنجم: فعال‌سازی کش مرورگر

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

• اگر از WP Rocket استفاده می‌کنید، این قابلیت به طور خودکار فعال است.

• اگر افزونه ندارید، می‌توانید با افزونه «LiteSpeed Cache» (برای هاست‌های لایت‌اسپید) یا «W3 Total Cache» این کار را انجام دهید.

قدم ششم: استفاده از CDN (شبکه توزیع محتوا)

CDN یک کپی از فایل‌های سایت شما را روی سرورهای مختلف در سراسر جهان ذخیره می‌کند و فایل‌ها را از نزدیک‌ترین سرور به کاربر تحویل می‌دهد.
پیشنهاد: از سرویس‌های رایگان مثل Cloudflare استفاده کنید. کافی است ثبت‌نام کنید، DNS سایت خود را به Cloudflare بدهید و گزینه CDN را فعال کنید.

قدم هفتم: حذف ریدایرکت‌های اضافی

هر ریدایرکت (مثلاً از sitename.com به www.sitename.com یا برعکس) می‌تواند تا ۰.۵ ثانیه به زمان LCP اضافه کند.
راهکار: مطمئن شوید کاربران مستقیماً به نسخه اصلی سایت هدایت می‌شوند. این تنظیمات را می‌توانید در افزونه سئو مثل Yoast یا Rank Math انجام دهید.

تعامل با صفحه (INP): معیار جدید گوگل و روش‌های بهینه‌سازی

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

تشخیص اسکریپت‌های سنگین

1. در PageSpeed Insights به بخش «Diagnostics» بروید.

2. اگر موردی با عنوان «Reduce the impact of third-party code» یا «Avoid long main-thread tasks» دیدید، یعنی اسکریپت‌های سنگین دارید.

3. با ابزار Chrome DevTools (با فشردن کلید F12 در مرورگر) و رفتن به تب Performance می‌توانید دقیقاً ببینید کدام اسکریپت‌ها زمان می‌برند.

به‌تعویق انداختن جاوااسکریپت‌های غیرضروری

اسکریپت‌های شخص ثالث مثل چت آنلاین، پیکسل‌های تبلیغاتی، و کدهای آنالیز را با تأخیر بارگذاری کنید تا ابتدا محتوای اصلی صفحه نمایش داده شود.
آموزش عملی در وردپرس:

• از افزونه «Flying Scripts» یا «Perfmatters» استفاده کنید.

• می‌توانید اسکریپت‌ها را طوری تنظیم کنید که مثلاً ۳ ثانیه بعد از لود صفحه یا بعد از حرکت موس کاربر اجرا شوند.

کاهش Long Tasks (تسک‌های طولانی)

اگر یک قطعه کد جاوااسکریپت بیش از ۵۰ میلی‌ثانیه طول بکشد، به آن Long Task می‌گویند و باعث قفل شدن صفحه می‌شود.
راهکار: اگر برنامه‌نویس هستید، کدهای خود را به بخش‌های کوچکتر تقسیم کنید. اگر از افزونه‌های آماده استفاده می‌کنید، افزونه‌های غیرضروری را غیرفعال کنید.

پایداری بصری (CLS): چرا صفحه شما می‌پرد و چگونه آن را ثابت کنیم؟

CLS بالا یعنی کاربر تجربه آزاردهنده‌ای از جابجا شدن المان‌ها داشته است.

اختصاص ابعاد مشخص به تصاویر و ویدیوها

وقتی مرورگر نداند یک تصویر چقدر ارتفاع و عرض دارد، فضای خالی برای آن در نظر نمی‌گیرد. وقتی تصویر لود می‌شود، ناگهان فضا اشغال می‌کند و بقیه محتوا را می‌پراند.
آموزش عملی:

• در وردپرس: بیشتر قالب‌های مدرن این کار را خودکار انجام می‌دهند. اگر نه، هنگام درج تصویر در ویرایشگر، مطمئن شوید فیلدهای «ابعاد» خالی نباشند.

• در HTML دستی: همیشه از ویژگی‌های width و height برای تگ <img> استفاده کنید.

مدیریت صحیح تبلیغات و بنرها

تبلیغاتی که بعد از لود صفحه ظاهر می‌شوند، بزرگ‌ترین عامل CLS هستند.
راهکار:

• برای کانتینر تبلیغ، یک فضای خالی با ابعاد ثابت (مثلاً ارتفاع ۲۵۰ پیکسل) در نظر بگیرید تا وقتی تبلیغ لود شد، داخل همان فضا قرار بگیرد و باعث جابجایی نشود.

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

کنترل فونت‌های وب

گاهی فونت سفارشی (مثلاً فونت فارسی) دیر لود می‌شود و متن با فونت پیش‌فرض نشان داده می‌شود، سپس ناگهان با تعویض فونت، اندازه متن تغییر کرده و جابجایی ایجاد می‌کند.
راهکار: در هنگام تعریف فونت در CSS، از ویژگی font-display: swap; استفاده کنید تا مرورگر ابتدا با فونت پیش‌فرض متن را نشان دهد و بعد فونت سفارشی را جایگزین کند.

کیس استادی واقعی: یک فروشگاه اینترنتی چگونه با بهینه‌سازی Core Web Vitals فروش خود را ۱۵٪ افزایش داد؟

وضعیت قبل: یک فروشگاه اینترنتی لباس با نرخ تبدیل پایین (کمتر از ۱٪) و نرخ پرش بالا (۶۵٪ در موبایل).
مشکل در Core Web Vitals:

• LCP: ۵.۸ ثانیه (به دلیل تصاویر محصول با حجم ۲ مگابایت)

• CLS: ۰.۳۵ (به دلیل اسلایدر بالای صفحه و بنرهای شناور بدون ابعاد مشخص)

• INP: ۴۵۰ میلی‌ثانیه (به دلیل اسکریپت چت آنلاین و چند پیکسل تبلیغاتی)

اقدامات انجام شده (طبق راهکارهای بالا):

1. تصاویر: همه تصاویر محصول با افزونه ShortPixel به WebP تبدیل و فشرده شدند. حجم هر تصویر از ۲ مگابایت به ۱۱۰ کیلوبایت رسید.

2. کش و CDN: WP Rocket برای کش فعال شد و Cloudflare CDN راه‌اندازی گردید. TTFB از ۱.۲ ثانیه به ۳۰۰ میلی‌ثانیه کاهش یافت.

3. اسکریپت‌ها: اسکریپت چت آنلاین با تأخیر ۳ ثانیه‌ای بارگذاری شد.

4. CLS: برای تمام تصاویر اسلایدر ابعاد مشخص شد و بنر شناور به پایین صفحه منتقل گردید.

نتایج پس از یک ماه:

• LCP: ۱.۹ ثانیه

• CLS: ۰.۰۵

• INP: ۱۵۰ میلی‌ثانیه

• نمره PageSpeed Insights موبایل: ۸۲

• نرخ تبدیل (فروش): ۱۵٪ افزایش یافت.

• نرخ پرش: از ۶۵٪ به ۴۲٪ کاهش یافت.

جمع‌بندی و چک‌لیست نهایی برای اقدام

بهینه‌سازی Core Web Vitals یک پروژه یک‌باره نیست، بلکه یک فرآیند مستمر است. برای شروع، این چک‌لیست را دنبال کنید:

• بررسی اولیه: به Google Search Console بروید و گزارش Core Web Vitals را چک کنید.

• اولویت‌بندی: صفحاتی که در وضعیت «ضعیف» (Poor) هستند را اولویت‌بندی کنید.

• تحلیل دقیق: هر صفحه مشکل‌دار را در PageSpeed Insights آنالیز کنید.

• اقدام روی LCP:

  • تصاویر را فشرده و به WebP تبدیل کنید.

  • کش مرورگر و کش صفحات را فعال کنید.

  • از CDN استفاده کنید.

• اقدام روی INP:

  • اسکریپت‌های شخص ثالث غیرضروری را با تأخیر بارگذاری کنید.

  • افزونه‌های غیرضروری وردپرس را غیرفعال کنید.

• اقدام روی CLS:

  • برای همه تصاویر و ویدیوها ابعاد مشخص کنید.

  • برای تبلیغات و بنرها فضای ثابت در نظر بگیرید.

• اندازه‌گیری مجدد: پس از یک هفته، دوباره نتایج را بررسی کنید.

اگر بعد از مطالعه این مقاله، باز هم در بهینه‌سازی سایت خود به مشکل خوردید یا زمان کافی برای انجام این تنظیمات را ندارید، تیم حرفه‌ای شیراز وب آماده است تا شما را در این مسیر همراهی کند. چه به دنبال طراحی سایت در شیراز باشید و چه نیاز به خدمات تخصصی سئو سایت در شیراز داشته باشید، کارشناسان ما با بررسی دقیق سایت شما، تمام مشکلات Core Web Vitals را شناسایی و برطرف می‌کنند تا سایتتان با سرعت و کیفیت مطلوب در صفحه اول گوگل دیده شود. برای شروع کافیه با شماره ثبت شده در سایت تماس بگیرید.