CLS تنها معیار Core Web Vitals است که به زمان ربطی ندارد؛ به ثبات ربط دارد. صفحه‌ای که مدام زیر دست کاربر جابه‌جا می‌شود، حتی اگر سریع باشد، تجربه‌ی بدی می‌سازد.
حد مجاز و نحوه‌ی محاسبه
خوب: تا ۰.۱. نیاز به بهبود: تا ۰.۲۵. ضعیف: بیش از ۰.۲۵.
امتیاز هر جابه‌جایی از حاصل‌ضرب «چه سهمی از صفحه جابه‌جا شد» در «چقدر جابه‌جا شد» به دست می‌آید. جابه‌جایی‌هایی که پشت سر هم رخ می‌دهند در «پنجره‌هایی» تا ۵ ثانیه جمع می‌شوند و بدترین پنجره گزارش می‌شود. جابه‌جایی‌هایی که تا نیم ثانیه بعد از کلیک خود کاربر رخ دهند (مثل باز شدن منو) حساب نمی‌شوند.
دلایل رایج
- تصاویر و ویدئوهای بدون عرض و ارتفاع مشخص؛
- تبلیغ‌ها، iframeها و بنرهایی که بعد از بارگذاری متن جا باز می‌کنند؛
- نوار کوکی یا اعلان که محتوا را به پایین هل می‌دهد؛
- عوض شدن فونت بعد از بارگذاری و تغییر اندازه‌ی متن؛
- محتوایی که با جاوااسکریپت بالای محتوای موجود اضافه می‌شود.
راه‌های رفع
- برای همه‌ی تصاویر
widthوheightیاaspect-ratioدر CSS تعیین کنید. - برای جای تبلیغ و بنر ارتفاع ثابت رزرو کنید.
- اعلان‌ها و نوار کوکی را روی صفحه (overlay) نمایش دهید نه داخل جریان صفحه.
- فونت اصلی را preload کنید و فونت جایگزین با ابعاد نزدیک انتخاب کنید.
- برای انیمیشن از
transformاستفاده کنید، نه تغییر top و height.
مثال از همین سایت
کارت‌های مقاله در صفحه‌ی وبلاگ این سایت قبلاً تصاویری با ارتفاع نامشخص داشتند. با تعیین aspect-ratio: 16/9 برای تصویر کارت‌ها، مرورگر از ابتدا جای دقیق تصویر را رزرو می‌کند و کارت‌ها هنگام بارگذاری جابه‌جا نمی‌شوند.
چطور بررسی کنیم؟
در PageSpeed Insights بخش «Avoid large layout shifts» عناصر مقصر را نشان می‌دهد. در کروم، پنل Performance جابه‌جایی‌ها را با رنگ مشخص می‌کند. گزارش Core Web Vitals سرچ کنسول هم وضعیت کل سایت را بر اساس داده‌ی واقعی نشان می‌دهد.