آخرین مقالات

بازدید: 102
امتیاز: 5.0
(2) رای
core web vital چیه؟ داشبورد Core Web Vitals با شاخص‌های کلیدی (LCP, INP, CLS)

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

فهرست مطالب

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

اینفوگرافیک معرفی سه معیار اصلی Core Web Vitals: LCP، INP و CLS با آیکون‌های مدرن و نوارهای پیشرفت.

Core Web Vitals چیست؟

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

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

  • LCP (Largest Contentful Paint) – زمان بارگذاری بزرگترین عنصر: چقدر طول می‌کشد تا بزرگترین المان صفحه (مثلاً یک تصویر بزرگ یا عنوان اصلی) نمایش داده شود. حد مطلوب: زیر ۲.۵ ثانیه.
  • INP (Interaction to Next Paint) – تعامل با صفحه: معیار جدید از مارس ۲۰۲۴، تأخیر پاسخگویی به کلیک‌ها و تعاملات کاربر را اندازه می‌گیرد. حد مطلوب: زیر ۲۰۰ میلی‌ثانیه.
  • CLS (Cumulative Layout Shift) – پایداری بصری: میزان جابجایی غیرمنتظره المان‌های صفحه در حین بارگذاری. حد مطلوب: زیر ۰.۱.

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

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

  • تأثیر در رتبه‌بندی گوگل: Core Web Vitals یکی از فاکتورهای رتبه‌بندی است. سایت‌های با تجربه کاربری بهتر شانس بیشتری در صفحه اول دارند.
  • نرخ پرش (Bounce Rate): اگر زمان بارگذاری از ۳ ثانیه بیشتر شود، ۵۳٪ کاربران موبایل صفحه را ترک می‌کنند.
  • نرخ تبدیل (Conversion Rate): بهبود ۰.۱ ثانیه در سرعت بارگذاری، نرخ تبدیل را تا ۸٪ افزایش می‌دهد. کاهش LCP به اندازه ۱۰۰ میلی‌ثانیه، نرخ تبدیل را ۱.۳٪ بالا می‌برد.
  • مثال واقعی: Yahoo! Japan با بهبود CLS توانست ۱۵٪ به بازدید صفحات اضافه کند و نرخ پرش را ۱.۷۲٪ کاهش دهد.

تصویر تقسیم‌شده از داشبورد Google Search Console و ابزار PageSpeed Insights با امتیاز بالا.

چگونه 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.

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

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

  • تبدیل به فرمت WebP: افزونه ShortPixel یا EWWW Image Optimizer در وردپرس، یا ابزار آنلاین convertio.co، squoosh.app.
  • فشرده‌سازی: با TinyPNG حتی بعد از WebP.
  • تعیین ابعاد: تصاویر را به اندازه مورد نیاز سایت کاهش دهید قبل از آپلود.

تصویرسازی حذف کدهای مسدودکننده رندر (CSS/JS) برای بارگذاری سریع‌تر محتوای صفحه.

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

در وردپرس با افزونه 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 را روشن کنید.

مقایسه مسیر مستقیم با مسیر پرپیچ‌وخم، نشان‌دهنده حذف ریدایرکت‌های اضافی.

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

هر ریدایرکت تا ۰.۵ ثانیه به LCP اضافه می‌کند. با افزونه سئو (مثل Yoast یا Rank Math) نسخه اصلی سایت را تعیین کنید.

نمایش بصری Interaction to Next Paint (INP) با انگشتی که دکمه‌ای را روی گوشی هوشمند لمس می‌کند.

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

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

  • در PageSpeed Insights بخش «Diagnostics»؛ اگر «Reduce the impact of third-party code» یا «Avoid long main-thread tasks» دیدید، اسکریپت سنگین دارید.
  • با Chrome DevTools (F12) و تب Performance دقیقاً ببینید کدام اسکریپت زمان می‌برد.

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

  • افزونه Flying Scripts یا Perfmatters در وردپرس – اسکریپت‌های چت، پیکسل‌های تبلیغاتی، آنالیز را با تأخیر بارگذاری کنید.

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

  • قطعه کدهای جاوااسکریپت بیش از ۵۰ میلی‌ثانیه را به بخش‌های کوچکتر تقسیم کنید یا افزونه‌های غیرضروری را غیرفعال کنید.

نمایش بصری Cumulative Layout Shift (CLS) با محتوای صفحه وب که جابجا می‌شود و آیکون‌های هشدار.

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

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

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

  • در وردپرس: هنگام درج تصویر، مطمئن شوید فیلدهای «ابعاد» خالی نباشند.
  • در HTML دستی: از ویژگی‌های width و height برای تگ <img> استفاده کنید.

مقایسه صفحه وب قبل و بعد از رزرو فضای تبلیغاتی برای بنرها، جلوگیری از جابجایی محتوا.

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

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

نمایش بارگذاری روان فونت در صفحه وب بدون پرش یا تغییر اندازه متن.

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

در CSS از font-display: swap; استفاده کنید تا متن با فونت پیش‌فرض نشان داده شود و بعد فونت سفارشی جایگزین شود.

تصویرسازی موفقیت یک فروشگاه اینترنتی با نمودار افزایش ۱۵٪ فروش و اپلیکیشن موبایل سریع.

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

وضعیت قبل: فروشگاه لباس با نرخ تبدیل پایین (کمتر از ۱٪) و نرخ پرش بالا (۶۵٪ موبایل).
مشکلات: LCP=5.8s, CLS=0.35, INP=450ms

اقدامات: تبدیل تصاویر به WebP و فشرده‌سازی (۲MB→۱۱۰KB)، فعال‌سازی WP Rocket و Cloudflare (TTFB از ۱.۲s به ۳۰۰ms)، تأخیر ۳ ثانیه‌ای چت آنلاین، اختصاص ابعاد به تصاویر اسلایدر و انتقال بنر شناور به پایین.

نتایج پس از یک ماه: LCP=1.9s, CLS=0.05, INP=150ms, نمره PageSpeed موبایل=۸۲، نرخ تبدیل ۱۵٪ افزایش، نرخ پرش ۶۵٪→۴۲٪.

چک‌لیست نهایی بهینه‌سازی Core Web Vitals با موارد تیک‌خورده، جام طلا و موشک در حال پرتاب.

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

  • بررسی اولیه: Google Search Console → گزارش Core Web Vitals.
  • اولویت‌بندی: صفحات در وضعیت «ضعیف» (Poor).
  • تحلیل دقیق: PageSpeed Insights برای هر صفحه.
  • اقدام روی LCP: فشرده‌سازی تصاویر به WebP، کش، CDN، کاهش TTFB، حذف ریدایرکت.
  • اقدام روی INP: تأخیر اسکریپت‌های شخص ثالث، غیرفعال کردن افزونه‌های غیرضروری.
  • اقدام روی CLS: ابعاد تصاویر و ویدیوها، فضای ثابت برای تبلیغات.
  • اندازه‌گیری مجدد: پس از یک هفته دوباره بررسی کنید.

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

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

09396572475

برای مشاوره رایگان و سفارش طراحی سایت با ما تماس بگیرید 👇


این مقاله بر اساس آخرین آپدیت‌های گوگل تا می ۲۰۲۶ تهیه شده و به صورت عملی مراحل بهینه‌سازی Core Web Vitals را گام به گام آموزش می‌دهد.

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

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

20% تخفیف طراحی سایت
اگه فرم زیر رو پر کنید و بعد تماس بگیرید، ۲۰٪ تخفیف تا سقف ۵ میلیون تومان می گیرید. مثلا یه سایت اختصاصی ۲۵ میلیونی، فقط ۲۰ میلیون تومان پرداخت میکنید.
این فرم فقط یکبار نمایش داده میشود.