Core Web Vitals: اصلاح LCP، INP و CLS در جایی که واقعاً اثر دارد

این سه عدد واقعاً چه چیزی را اندازه می‌گیرند

LCP — یعنی Largest Contentful Paint — زمانی است که بزرگ‌ترین عنصر قابل‌مشاهده رندر می‌شود: تصویر hero، بلوک تیتر. نزدیک‌ترین معیار به «صفحه کِی حس شد که بارگذاری شده». مقدار خوب، زیر 2.5 ثانیه برای صدک 75اُم بازدیدهای واقعی است.

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

CLS — یعنی Cumulative Layout Shift — نمره می‌دهد که محتوای قابل‌مشاهده چقدر بدون خواستِ کاربر جابه‌جا می‌شود: پاراگرافی که داشتید می‌خواندید و با بارشدن یک تبلیغ پرید، دکمه‌ای که درست لحظه‌ی لمس جابه‌جا شد. مقدار خوب زیر 0.1 است و برخلاف دو معیار دیگر، یک نمره‌ی بدون واحد است، نه زمان.

داده‌ی میدانی در برابر داده‌ی آزمایشگاهی: به کدام اعداد اعتماد کنیم

PageSpeed Insights دو دنیای متفاوت نشان می‌دهد. بخش بالایی — «کاربران واقعی چه تجربه‌ای داشتند» — داده‌ی میدانی از کاربران کروم در بازه‌ی 28 روزه است، و همین است که گوگل واقعاً استفاده می‌کند. امتیاز پایینی یک شبیه‌سازی آزمایشگاهی روی سخت‌افزار محدودشده است: برای عیب‌یابی مفید، به‌عنوان هدف گمراه‌کننده.

نتایج عملی: امتیاز آزمایشگاهی 60 با داده‌ی میدانی سبز یعنی وضع‌تان خوب است؛ آزمایشگاهِ بی‌نقص با میدانِ قرمز یعنی بازدیدکنندگان واقعی روی شبکه‌های واقعی رنج می‌برند و ماشین آزمایشگاه نه. برای اعداد میدانی بهینه‌سازی کنید، از گزارش آزمایشگاه برای فهمیدن اینکه چرا این اعداد چنین‌اند استفاده کنید، و یادتان باشد داده‌ی میدانی تأخیر دارد — اصلاح امروز تا 28 روز طول می‌کشد تا کامل دیده شود.

اصلاح LCP: عمدتاً یک مسئله‌ی تحویل

LCP به این اجزا تجزیه می‌شود: زمان دریافت HTML، زمان کشف تصویر اصلی، زمان دانلود آن، زمان رندر. سه‌تا از این چهار جزء تحویل‌اند — به همین دلیل LCP همان ویتالی است که CDN بیش از همه جابه‌جایش می‌کند، و به همین دلیل هدفِ اولِ درست است.

اهرم‌ها به ترتیب اثر: HTML و assetها را از کش لبه سرو کنید تا اولین بایت‌ها از نزدیکی بیایند نه از origin شما؛ تصاویر hero را به WebP/AVIF تبدیل کنید و به اندازه‌ی نمایش واقعی برش بزنید، به‌جای ارسال فایل‌هایی با رزولوشن دوربین؛ و متنی را که باید پیش از رندر برسد فشرده کنید. در cdn.com.tr هر سه از تنظیمات قانون تحویل‌اند — کش لبه، بهینه‌سازی خودکار تصاویر به WebP/AVIF، و Brotli/Gzip — بنابراین بزرگ‌ترین اهرم‌های LCP کلیدهایی برای روشن‌کردن‌اند، نه یک بازسازی. در سمت اپلیکیشن، به تصویر hero اولویت fetch بالا بدهید و هرگز آن را lazy-load نکنید: lazy-load کردنِ عنصر LCP رایج‌ترین زخمِ خودخواسته‌ی LCP است.

اصلاح CLS: فضا را رزرو کنید

جابه‌جایی چیدمان یک ریشه دارد: محتوایی که بدون فضای رزروشده می‌رسد. اصلاحاتش پرزرق‌وبرق نیستند اما قابل‌اعتمادند. به هر تصویر و ویدیو اتریبیوت‌های صریح width و height بدهید (یا aspect-ratio در CSS) تا مرورگر پیش از رسیدن فایل، جعبه‌اش را رزرو کند. برای جایگاه‌های تبلیغ و embedها کانتینرهایی با اندازه‌ی ثابت بگذارید که چه محتوا بار شود چه نه، فضای خود را نگه دارند. فونت‌های سفارشی را preload کنید و از راهبردهای font-display استفاده کنید که از swap دیرهنگام و reflow صفحه جلوگیری می‌کنند. و هرگز پس از بارگذاری، بنری بالای محتوای موجود تزریق نکنید — همین یک الگو پشت بیشترِ نمره‌های افتضاح CLS است.

CLS همان ویتالی است که یک آخر هفته اتریبیوت‌افزودن، به‌طور معمول یک صفحه‌ی مردود را سبز می‌کند.

اصلاح INP: JavaScript کمتر روی thread اصلی

INP سرسخت‌ترینِ این سه است، چون علتش ساختاری است: JavaScript بیش از حد که کار بیش از حدی روی همان threadی انجام می‌دهد که باید به کاربر هم پاسخ بدهد. تحویل در حاشیه کمک می‌کند — باندل‌های کوچک‌تر و فشرده‌تر زودتر می‌رسند و زودتر parse می‌شوند — اما اصلاحات واقعی در اپلیکیشن‌اند: taskهای طولانی را بشکنید تا مرورگر بین‌شان نفس بکشد، اسکریپت‌های شخص‌ثالثی را که لازم نیست پیش از تعامل اجرا شوند defer کنید، و بارِ tag manager را که طی سال‌ها انباشته شده کم کنید. اول اندازه بگیرید: نمای long-task در پنل performance دقیقاً می‌گوید کدام اسکریپت‌ها thread را نگه داشته‌اند.

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

یک ترتیب کارِ عاقلانه

داده‌ی میدانیِ صفحاتی را بررسی کنید که از نظر تجاری مهم‌اند، نه فقط صفحه‌ی اصلی را. اگر LCP رد می‌شود: کش لبه، فرمت و اندازه‌ی تصاویر، فشرده‌سازی — یعنی مجموعه‌ی تحویل — و سپس اولویت fetch. اگر CLS رد می‌شود: ابعاد، جایگاه‌های رزروشده، بارگذاری فونت. اگر INP رد می‌شود: برای کار واقعی روی اپلیکیشن بودجه بگذارید؛ هیچ چیز دیگری آن را صادقانه جابه‌جا نمی‌کند. بعد از هر دور، دوباره در میدان اندازه بگیرید و منتظر تأخیر 28 روزه باشید.

و چارچوب را حفظ کنید: هدف، نشانِ سبز نیست. همان 2.5 ثانیه‌ای که یک معیار را راضی می‌کند، تفاوت میان بازدیدکننده‌ای است که می‌ماند و آنکه می‌رود — نشان فقط جایی است که این تفاوت را می‌بینید.