CLS sorunlarını tasarım aşamasında önlemek için ne yapılmalı?

Kısa cevap: CLS sorunlarının en ucuz çözümü tasarım aşamasındadır: her dinamik öğeye önceden yer ayrılırsa, yerleşim kayması üretimde değil çizim masasında engellenir. Google'ın yayınladığı eşik, CLS için 0,1'dir.

Tasarım aşaması kontrol listesi

• Görsel ve video alanlarını en boy oranıyla tasarlayın; geliştirmede width ve height nitelikleri veya aspect-ratio ile karşılığı verilsin.
• Reklam, banner ve embed alanlarına sabit yükseklikte kapsayıcı ayırın; içerik geldikçe açılan alan, kaymanın ana kaynağıdır.
• Font stratejisini belirleyin: font-display ayarı ve yedek fontun metrik uyumu, metin zıplamasını önler.
• Geç gelen bileşenleri (çerez bandı, kampanya çubuğu) içeriği itmeyecek biçimde overlay olarak konumlandırın.
• Skeleton ekranları gerçek içerikle aynı boyutta çizin.

Doğrulama iki katmanlıdır: bileşen kütüphanesine boyutu bilinmeyen öğe sokmayan bir kural yazılır, ardından Lighthouse ve CrUX alan verisiyle 75. yüzdelik CLS izlenir. Tasarım sistemine bir kez giren kural, sonraki her sayfayı otomatik korur.