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

یک نمونه از گزراش light speed

 Core Web Vitals سه فاکتور اصلی دارد: LCP برای سنجش سرعت نمایش محتوای اصلی، INP برای سنجش پاسخ‌گویی صفحه به تعامل کاربر، و CLS برای سنجش پایداری بصری صفحه. این معیارها برای سایت‌های وردپرسی، فروشگاهی، شرکتی و محتوایی اهمیت زیادی دارند؛ چون مستقیماً به تجربه کاربر، نرخ تبدیل و کیفیت فنی صفحه مربوط می‌شوند.

LCP چیست و چرا مهم است؟

Largest Contentful Paint یا LCP نشان می‌دهد بزرگ‌ترین محتوای قابل مشاهده در بخش ابتدایی صفحه، چه زمانی برای کاربر رندر می‌شود. این محتوا معمولاً تصویر اصلی، تیتر بزرگ، بنر، ویدئو یا یک بلوک متنی مهم است. اگر LCP کند باشد، کاربر احساس می‌کند صفحه هنوز آماده استفاده نیست، حتی اگر بخشی از HTML یا CSS قبلاً بارگذاری شده باشد.

طبق معیار گوگل، مقدار خوب LCP باید حداکثر حدود ۲.۵ ثانیه باشد. بین ۲.۵ تا ۴ ثانیه نیازمند بهبود است و بیشتر از ۴ ثانیه وضعیت ضعیف محسوب می‌شود. برای بهبود LCP باید روی کاهش زمان پاسخ سرور، بهینه‌سازی تصویر اصلی، preload منابع مهم، حذف CSS و JavaScript بلااستفاده و استفاده درست از کش تمرکز کرد.

INP چیست و چه تفاوتی با سرعت لود دارد؟

Interaction to Next Paint یا INP میزان پاسخ‌گویی صفحه بعد از تعامل کاربر را می‌سنجد. یعنی وقتی کاربر روی منو، دکمه، فیلتر محصول، تب، فرم یا هر عنصر تعاملی کلیک می‌کند، مرورگر چقدر طول می‌کشد تا نتیجه این تعامل را روی صفحه نشان دهد.

مقدار خوب INP باید کمتر از ۲۰۰ میلی‌ثانیه باشد. اگر JavaScript سنگین، اسکریپت‌های تبلیغاتی، افزونه‌های زیاد، چت آنلاین، اسلایدرهای پیچیده یا کدهای third-party بدون کنترل در صفحه فعال باشند، INP معمولاً ضعیف می‌شود. برای بهبود آن باید حجم JavaScript کاهش پیدا کند، taskهای طولانی شکسته شوند، کدهای غیرضروری فقط در صفحات لازم اجرا شوند و تعامل‌های مهم کاربر در اولویت قرار بگیرند.

CLS چیست و چرا کاربران را آزار می‌دهد؟

Cumulative Layout Shift یا CLS میزان جابه‌جایی ناگهانی اجزای صفحه را اندازه‌گیری می‌کند. مثلاً کاربر می‌خواهد روی یک دکمه کلیک کند، اما ناگهان بنر، تصویر یا فونت دیرلودشده باعث جابه‌جایی محتوا می‌شود و کلیک روی بخش دیگری انجام می‌گیرد. این تجربه هم آزاردهنده است و هم می‌تواند نرخ تبدیل را کاهش دهد.

مقدار خوب CLS باید کمتر از ۰.۱ باشد. برای کنترل آن باید برای تصاویر و ویدئوها width و height مشخص شود، فضای تبلیغات یا iframeها از قبل رزرو شود، فونت‌ها درست preload شوند و محتوای جدید بدون برنامه وارد بالای صفحه نشود.

common mistake | 2

اشتباه رایج:
بسیاری از سایت‌ها فقط امتیاز کلی PageSpeed را بررسی می‌کنند، اما مشکل اصلی را پیدا نمی‌کنند. ممکن است امتیاز صفحه متوسط باشد، ولی LCP به‌خاطر تصویر Hero، INP به‌خاطر JavaScript سنگین یا CLS به‌خاطر تصاویر بدون ابعاد مشخص ضعیف شده باشد.

سایر معیارهای Lighthouse چه نقشی دارند؟

در گزارش Lighthouse علاوه بر Core Web Vitals، معیارهای دیگری مثل FCP، Speed Index، TBT و TTFB هم دیده می‌شوند. این معیارها الزاماً جزو سه فاکتور اصلی Core Web Vitals نیستند، اما برای تشخیص ریشه کندی سایت بسیار مهم‌اند. برای مثال، First Contentful Paint یا FCP نشان می‌دهد اولین محتوای قابل مشاهده صفحه چه زمانی به کاربر نمایش داده می‌شود؛ Speed Index سرعت کامل‌تر شدن ظاهر صفحه را بررسی می‌کند؛ Total Blocking Time میزان درگیر بودن مرورگر با JavaScript سنگین را نشان می‌دهد؛ و Time to First Byte به سرعت پاسخ اولیه سرور مربوط است. بنابراین بهتر است Core Web Vitals را معیار نهایی تجربه کاربر بدانیم، اما برای پیدا کردن علت فنی مشکل، سایر داده‌های Lighthouse را هم کنار آن تحلیل کنیم.

palette tip | 5

نکته پالت:
در پروژه‌های واقعی، قبل از نصب افزونه‌های بهینه‌سازی جدید، ابتدا تشخیص دهید کدام metric مشکل دارد. اگر LCP ضعیف است، اول تصویر اصلی، TTFB و CSS بحرانی را بررسی کنید؛ اگر INP ضعیف است، سراغ JavaScript و taskهای طولانی بروید؛ و اگر CLS بالاست، ساختار layout، ابعاد media و نحوه تزریق بنرها را کنترل کنید.

تأثیر سیستم بارگذاری شرطی دارایی‌ها بر کاهش FCP

هرچند FCP جزو سه معیار اصلی Core Web Vitals نیست، اما روی حس اولیه کاربر از سرعت صفحه اثر جدی دارد و مسیر بهبود LCP را هم هموار می‌کند. وقتی سایت همه فایل‌های CSS و JavaScript را در همه صفحات بارگذاری می‌کند، مرورگر مجبور است منابعی را پردازش کند که شاید در همان صفحه اصلاً استفاده نشوند.

در سایت‌های وردپرسی، سیستم بارگذاری شرطی دارایی‌ها باعث می‌شود فایل‌های مربوط به اسلایدر، فرم، فروشگاه، گالری یا ویجت‌های خاص فقط زمانی لود شوند که واقعاً در همان صفحه لازم هستند. این کار تعداد requestها، حجم پردازش اولیه و منابع render-blocking را کاهش می‌دهد و می‌تواند به بهبود FCP و LCP کمک کند.

internal link | 1

برای آشنایی با نقش معماری جدید وردپرس در بهینه‌سازی سرعت و بارگذاری شرطی منابع، مقاله معرفی وردپرس ۷.۰؛ انقلاب هوش مصنوعی و سرعت را مطالعه کنید.

جمع‌بندی

Core Web Vitals فقط یک گزارش فنی در Search Console نیست؛ تصویری از تجربه واقعی کاربران سایت است. LCP نشان می‌دهد محتوای اصلی چقدر سریع دیده می‌شود، INP مشخص می‌کند صفحه چقدر سریع به تعامل کاربر پاسخ می‌دهد و CLS پایداری ظاهری صفحه را می‌سنجد. اگر سایت شما کند شده، بررسی این سه فاکتور بهترین نقطه شروع برای تصمیم‌گیری فنی و سئویی است.

برای تحلیل دقیق‌تر، از ابزارهایی مانند PageSpeed Insights، گزارش Core Web Vitals در Search Console و مستندات رسمی web.dev استفاده کنید.