CLS چیست؟
Cumulative Layout Shift
CLS جمع جابه‌جایی‌های ناگهانی محتوا هنگام بارگذاری است؛ همان لحظه‌ای که دکمه‌ای زیر انگشتتان پایین می‌رود و روی چیز اشتباهی کلیک می‌کنید.
بروزرسانی:
عدد خوب چیست؟
CLS تا ۰٫۱ خوب، بین ۰٫۱ تا ۰٫۲۵ نیازمند بهبود و بیشتر از ۰٫۲۵ ضعیف است. این عدد بدون واحد است و از اندازه و فاصله‌ی جابه‌جایی‌ها حساب می‌شود.
دلیل‌های رایج
- تصویر یا ویدیو بدون
widthوheight(جا برایشان رزرو نشده) - تبلیغ، iframe یا ویجتی که دیر بارگذاری می‌شود و محتوا را هل می‌دهد
- فونت وبی که شکل متن را بعد از آمدنش عوض می‌کند
- محتوایی که با جاوااسکریپت بالای محتوای موجود اضافه می‌شود
راه‌حل
برای هر عنصر از قبل جا رزرو کنید (ابعاد یا aspect-ratio) و برای فونت از font-display مناسب استفاده کنید. فونت فارسی سبک‌تر هم زودتر می‌آید؛ بهینه‌سازی فونت فارسی کمک می‌کند.
با ابزار بسنجید
راهنماهای مرتبط
راهنما۳ دقیقه مطالعهCore Web Vitals چیست و چطور نمره‌اش را بهتر کنیم؟سه معیار LCP، INP و CLS چه می‌سنجند، عدد خوب هر کدام چیست و برای هر یک چه کاری بیشترین اثر را دارد؛ همراه با نکته‌های وردپرس.بروزرسانی: ۱۶ مهر ۱۴۰۵راهنما۳ دقیقه مطالعهکاهش حجم فونت فارسی با subsetting و WOFF2چرا فونت فارسی سنگین است و چطور با subsetting، قالب WOFF2، font-display و unicode-range حجمش را تا حدود ۹۰٪ کم کنیم بی‌آنکه اتصال حروف خراب شود.بروزرسانی: ۱۶ مهر ۱۴۰۵