سرعت و سئوی فنی
Core Web Vitals به زبان ساده: سه عددی که گوگل درباره‌ی سایت شما می‌داند
LCP، INP و CLS یعنی چه، گوگل آن‌ها را از کجا می‌آورد، حد «خوب» هرکدام چقدر است و مقصرهای همیشگی چه چیزهایی‌اند.
گوگل فقط محتوای صفحه را نمی‌خواند؛ تجربه‌ی کسی را هم که آن صفحه را باز می‌کند می‌سنجد. بخش اندازه‌پذیر این تجربه سه عدد است که با نام Core Web Vitals شناخته می‌شوند و از سال ۲۰۲۱ میان سیگنال‌های رتبه‌بندی گوگل‌اند.
این سه عدد از آزمایشگاه نمی‌آیند؛ از مرورگر Chrome کاربران واقعی جمع می‌شوند. یعنی گوگل می‌داند سایت شما روی گوشی یک بازدیدکننده‌ی واقعی، با اینترنت واقعی او، چطور باز می‌شود.
سه عدد، سه سؤال
هر شاخص به یک سؤال ساده درباره‌ی تجربه‌ی بازدیدکننده جواب می‌دهد.
LCP: بزرگ‌ترین بخش صفحه کی دیده می‌شود؟
Largest Contentful Paint لحظه‌ای است که بزرگ‌ترین تصویر یا بلوک متنی بالای صفحه نمایش داده می‌شود؛ معمولاً عکس اصلی یا تیتر بزرگ. این نزدیک‌ترین عدد به احساس «صفحه باز شد» است.
INP: صفحه به کلیک چقدر سریع جواب می‌دهد؟
Interaction to Next Paint فاصله‌ی میان یک تعامل (کلیک، لمس یا فشردن کلید) و اولین تغییر دیدنی صفحه است. INP در مارس ۲۰۲۴ جای شاخص قدیمی‌تر FID را گرفت؛ FID فقط اولین تعامل را می‌سنجید و INP همه‌ی تعامل‌های یک بازدید را.
CLS: چیزها هنگام بارگذاری جابه‌جا می‌شوند؟
Cumulative Layout Shift اندازه‌ی جابه‌جایی‌های ناخواسته‌ی محتواست؛ همان لحظه‌ای که می‌خواهید روی دکمه‌ای بزنید و تصویری بالای آن بارگذاری می‌شود و انگشتتان روی چیز دیگری فرود می‌آید. CLS واحد زمان ندارد؛ عددی است که از اندازه و فاصله‌ی جابه‌جایی‌ها به دست می‌آید.
حد «خوب» هرکدام چقدر است؟
| شاخص | خوب | نیازمند بهبود | ضعیف |
|---|---|---|---|
| LCP | تا ۲٫۵ ثانیه | ۲٫۵ تا ۴ ثانیه | بیشتر از ۴ ثانیه |
| INP | تا ۲۰۰ میلی‌ثانیه | ۲۰۰ تا ۵۰۰ میلی‌ثانیه | بیشتر از ۵۰۰ میلی‌ثانیه |
| CLS | تا ۰٫۱ | ۰٫۱ تا ۰٫۲۵ | بیشتر از ۰٫۲۵ |
گوگل به میانگین نگاه نمی‌کند. هر شاخص در صدک ۷۵ سنجیده می‌شود: دست‌کم ۷۵ درصد بازدیدهای یک صفحه باید در محدوده‌ی خوب باشند تا آن صفحه «خوب» حساب شود. پس اگر سایت روی لپ‌تاپ شما سریع است ولی بیشتر مشتری‌هایتان با گوشی و اینترنت همراه می‌آیند، عدد واقعی همان است که آن‌ها تجربه می‌کنند.
از کجا بفهمیم وضع سایت چطور است؟
- گزارش Core Web Vitals در Search Console: صفحه‌های سایت را بر اساس داده‌ی کاربران واقعی در سه گروه خوب، نیازمند بهبود و ضعیف نشان می‌دهد.
- PageSpeed Insights: برای هر آدرس، هم داده‌ی واقعی ۲۸ روز اخیر را نشان می‌دهد (اگر آن صفحه ترافیک کافی داشته باشد)، هم یک آزمون آزمایشگاهی با Lighthouse و پیشنهادهای مشخص.
- ابزار توسعه‌دهنده‌ی Chrome: بخش Performance نشان می‌دهد دقیقاً کدام تصویر LCP است و کدام اسکریپت رشته‌ی اصلی مرورگر را قفل کرده است.
عدد آزمایشگاهی برای پیدا کردن علت عالی است، اما داوری نهایی با داده‌ی واقعی است. ممکن است Lighthouse نمره‌ی خوبی بدهد و کاربران واقعی، با گوشی ضعیف‌تر یا اینترنت کندتر، تجربه‌ی بدتری داشته باشند.
مقصرهای همیشگی و راه‌حلشان
وقتی LCP بالاست
- عکس اصلی سنگین است. از AVIF یا WebP استفاده کنید، با
srcsetبرای هر اندازه‌ی صفحه نسخه‌ی مناسب بفرستید و به همان تصویرfetchpriority="high"بدهید. - عکس اصلی دیر شروع به دانلود می‌کند.
loading="lazy"مال تصاویر پایین صفحه است؛ روی تصویر بالای صفحه فقط شروع دانلود را عقب می‌اندازد. - سرور دیر جواب می‌دهد. تا اولین بایت نرسد، هیچ چیز دیگری شروع نمی‌شود. کش صفحه و CDN معمولاً بیشترین اثر را دارند.
- فونت‌ها و CSS جلوی نمایش را گرفته‌اند. فونت کمتر، کوچک‌شده به حروف لازم و پیش‌بارگذاری‌شده با
preload.
وقتی INP بالاست
- جاوااسکریپت زیادی روی رشته‌ی اصلی اجرا می‌شود. هر کار طولانی‌تر از ۵۰ میلی‌ثانیه پاسخ به کلیک را عقب می‌اندازد. کارهای بزرگ را تقسیم کنید و آنچه لازم نیست، اصلاً بارگذاری نکنید.
- اسکریپت‌های شخص ثالث. چت آنلاین، ابزارهای ردیابی و ویجت‌ها اغلب بزرگ‌ترین سهم را دارند. هرکدام باید دلیل مشخصی برای ماندن داشته باشد.
- کار سنگین پیش از بازخورد. اول تغییر دیدنی، مثل حالت فشرده‌ی دکمه، را نشان دهید و بعد سراغ کار سنگین بروید.
وقتی CLS بالاست
- تصویر و ویدیو بدون ابعاد. با
widthوheight، مرورگر پیش از رسیدن تصویر جایش را نگه می‌دارد. - تبلیغ، بنر و embed بدون جای رزروشده. ارتفاع ظرفشان را از قبل مشخص کنید.
- فونتی که دیر می‌رسد. اگر فونت جایگزین اندازه‌ی متفاوتی داشته باشد، رسیدن فونت اصلی متن را جابه‌جا می‌کند.
size-adjustفونت جایگزین را هم‌اندازه‌ی فونت اصلی می‌کند. - محتوایی که بالای محتوای موجود اضافه می‌شود، مثل نوار اعلانی که بعد از بارگذاری صفحه را پایین هل می‌دهد.
همین سایت
این سایت با همین فهرست ساخته شده است: یک فونت نمایشی کوچک‌شده و پیش‌بارگذاری‌شده، فونت جایگزین هم‌اندازه، ابعاد مشخص برای همه‌ی تصاویر و هیچ اسکریپت شخص ثالثی. عدد واقعی‌اش را هم پنهان نمی‌کند: پایین هر صفحه وزن و زمان بارگذاری همان صفحه نوشته شده و «نمای فنی» هر صفحه LCP، CLS و INP را همان لحظه روی دستگاه خودتان نشان می‌دهد.
چقدر مهم است؟
Core Web Vitals جای محتوای خوب را نمی‌گیرد. گوگل صریحاً می‌گوید صفحه‌ای که پاسخ مرتبط‌تری به جست‌وجو دارد، حتی با تجربه‌ی ضعیف‌تر، می‌تواند بالاتر بنشیند. اما در بیشتر جست‌وجوها صفحه‌های اول محتوای نزدیک به هم دارند و آنجاست که سرعت و پایداری تفاوت می‌سازد؛ هم در رتبه، هم در اینکه بازدیدکننده بماند یا به نتایج جست‌وجو برگردد.