Sayfa yüklenirken tıklamak istediğiniz düğmenin aşağı kayması veya ürün fiyatının aniden yer değiştirmesi kötü bir kullanım deneyimidir. Cumulative Layout Shift, beklenmeyen yerleşim değişikliklerini değerlendiren ölçüdür. Büyük dosya tek başına kayma nedeni değildir; görsel için alan ayrılmaması, font ölçülerinin değişmesi veya sayfanın üstüne sonradan içerik eklenmesi daha doğrudan etkiler. Kaymayı gerçekten hangi öğenin başlattığını inceleyerek düzeltmeyi doğru bileşene uygulayın.
Başlamadan önce
Ana sayfa, ürün kartları, sipariş ve uzun makale sayfalarını ayrı seçin. Yavaş ağ ve boş önbellek koşulunda test yapın; hızlı bağlantı sorunu saklayabilir. Kullanılan font dosyalarının, görsel ölçülerinin ve geç açılan bannerların listesini hazırlayın. Önce mevcut davranışı kaydedin. Tasarım değişikliğini yalnızca masaüstünde değerlendirmeyin; mobilde satır kırılması ve dar kartlar kaymayı daha belirgin hale getirebilir.
Uygulama adımları
- Kayma kaydını alın
Tarayıcı performans araçlarında yerleşim kayması olaylarını inceleyin. Hareket eden öğeyle hareketi başlatan öğe her zaman aynı değildir; üstteki görsel alanının büyümesi aşağıdaki metni kaydırabilir. Olayın zamanını ve o anda yüklenen kaynağı birlikte kaydedin.
- Görsellere doğru alan ayırın
Width ve height değerlerini dosyanın gerçek en boy oranıyla uyumlu kullanın. CSS farklı kırpma yapıyorsa bile kapsayıcının ölçüsü önceden belirlenmelidir. Boş img veya yanlış oran ilk yüklemede dar alan bırakıp kaynak geldiğinde genişleyebilir; hatalı kaynakları da temizleyin.
- Font geçişini inceleyin
Web fontu yüklenmeden önce kullanılan sistem fontunun ölçüleri farklı olabilir. Font-display kararı, yazının görünmesi ve geçiş biçimini etkiler; tek başına bütün kaymaları çözmez. Kullanılmayan ağırlıkları yüklemeyin, gerekli fontu yerel ve tutarlı sunun, metnin satır sayısını iki durumda karşılaştırın.
- Dinamik içerik için yer planlayın
Duyuru, çerez bildirimi veya fiyat alanı sonradan üst bölüme ekleniyorsa mevcut içeriği itebilir. Bileşen için önceden alan ayırmayı veya yerleşimi bozmayacak konumu değerlendirin. Kullanıcı işlemi gerektiren bildirimi gizleyerek ölçümü iyileştirmeye çalışmayın; işlev ve okunabilirlik korunmalıdır.
- Boyut değiştiren animasyonları gözden geçirin
Giriş animasyonlarında genişlik, yükseklik veya büyük üst boşluk değişimleri yerleşimi etkileyebilir. Görünürlük geçişlerini ölçün ve gerekli olduğunda daha sınırlı hareket tercih edin. Azaltılmış hareket tercihini destekleyin. Bütün animasyonları kaldırmak yerine belirli kayma kaynağını düzeltin.
- Etkileşim sonrası durumu test edin
Sayfayı kaydırın, menü açın, filtre değiştirin ve ürün seçin. Yalnızca ilk ekran yüklenmesini ölçmek geç gelen kaymaları kaçırabilir. Kullanıcı eylemine bağlı değişimleri ve beklenmeyen gecikmeli hareketleri ayırın; düğmenin odak ve tıklama konumunun tutarlı kaldığını görün.
Sonucu doğrulama
Yavaş bağlantıda ilk ekranı izleyin; görsel yüklenirken başlık ve CTA aynı yerde kalmalıdır. Web fontu geldiğinde ana başlığın satır sayısını, kart yüksekliğini ve tablo genişliğini kontrol edin. Telefon yatay ve dikey konumlarını deneyin. Laboratuvar kaydını gerçek kullanıcı verisiyle birlikte değerlendirin; bir cihazdaki düşük değer başka font veya ekran koşulunda aynı sonucu garanti etmez.
Sık karşılaşılan sorunlar
Görsel ölçüsü doğru olduğu halde kayma sürüyorsa kapsayıcı CSS’ini ve geç eklenen içerikleri kontrol edin. Fallback fontun daha geniş olması başlıkta ek satır oluşturabilir. CSS dosyasının geç gelmesi ilk stilsiz görünümün yerleşimini değiştirebilir. Skeleton alanı son içerikten farklı yükseklikteyse beklenmedik sıçrama oluşur. Sorunu yalnızca boş sabit yükseklik ekleyerek gizlemeyin; içerik taşması ve mobil kırılma da test edilmelidir.
Uygulama örneği
Bir ürün kartında görsel gelmeden önce hiç alan ayrılmıyorsa satın alma düğmesi yükleme sonunda aşağı iner. Aynı kartta doğru görsel oranı ayrıldığında bu hareket azalabilir. Buna rağmen başlık yeni fontla üç satıra çıkıyorsa font ve metin ölçülerini ayrı ele alın. Kullanıcı düğmeye yanlışlıkla basmamalı; performans kontrolünün pratik hedefi budur.
Sık sorulan sorular
Fontu preload etmek CLS’yi tamamen çözer mi?
Hayır. Daha erken font erişimi bazı gecikmeleri azaltabilir, fakat yanlış fallback ölçüsü veya görsel alanı hâlâ kayma üretir. Gereken fontu seçin, kaynak sayısını sınırlayın ve gerçek yerleşim davranışını ölçün.
Sabit yükseklik her bileşende iyi çözüm mü?
Hayır. Uzun başlık veya çeviri metni sabit alana sığmayabilir. Görsel için doğru en boy oranı ve metin için esnek, öngörülebilir yerleşim kurmak daha uygundur. Dar ekranlarda içerik kaybını ayrıca kontrol edin.
İlgili rehberler
Süreç özeti
İşlem ve doğrulama sırası
| Adım | Kontrol |
|---|---|
| 1 | Kaymayı kaydet |
| 2 | Öğeye alan ayır |
| 3 | Font geçişini incele |
| 4 | Etkileşimi tekrar dene |