Düzen kayması sorununun nedenleri uyarısı nasıl giderilir?
Sayfa yüklenirken zıplıyor, okuyucu yerini kaybediyor ya da yanlış düğmeye basıyor. Kaymaya yol açan beş kaynak, her birinin çözümü ve hepsinin dayandığı tek ilke.
Uyarı ne diyor?
Rapordaki başlık: "Düzen kayması sorununun nedenleri". Altında hangi öğelerin kaydığı listeleniyor.
Anlatılan şey herkesin yaşadığı ama adını bilmediği bir sorun: sayfa açılırken içerik yerinden oynuyor.
Bir yazıyı okumaya başlıyorsunuz, satır aşağı kayıyor. Bir düğmeye basmak üzeresiniz, düğme yer değiştiriyor ve yanlış yere basıyorsunuz.
Bu, ölçülen üç temel değerden biri. Tanımı ve eşiği web.dev üzerinde yayımlanıyor.
Neden oluyor?
Temel sebep tek: tarayıcı, sonradan gelecek bir şey için baştan yer ayırmamış.
Sayfa çiziliyor, sonra bir öğe geliyor ve araya giriyor. Altındaki her şey aşağı kayıyor.
Bu, teknik bir kusur değil bir bilgi eksikliği. Tarayıcı o öğenin ne kadar yer kaplayacağını bilseydi baştan boşluk bırakırdı.
Bütün çözümler bu tek ilkeye dayanıyor: sonradan gelecek her şey için baştan yer ayırmak.
Beş kaynak
Kaynak | Belirti | Çözüm |
|---|---|---|
Ölçüsüz görsel | Görsel gelince sayfa açılıyor | Genişlik ve yükseklik yaz |
Gömülü içerik | Video ya da harita gelince kayıyor | Kabına sabit oran ver |
Reklam alanı | Reklam gelince içerik itiliyor | Alanı baştan ayır |
Yazı tipi değişimi | Metin yerleşince satırlar kayıyor | Yedek yazı tipini yakınlaştır |
Sonradan eklenen blok | Bildirim ya da banner araya giriyor | Akışın dışına konumlandır |
Beşinin de ortak noktası aynı: bilinmeyen boyut.
Görseller — en yaygın kaynak
Sahada gördüğümüz kaymaların büyük kısmı buradan çıkıyor.
Görsele genişlik ve yükseklik değeri yazılmadığında tarayıcı, görsel inene kadar orada hiç yer ayırmıyor. Görsel gelince alan aniden açılıyor.
Çözüm tek satırlık: her görsele bu iki değeri yazmak.
Sık sorulan bir endişe var: "bu, görseli sabit boyuta kilitler mi?" Hayır. Bu değerler yalnızca oranı bildiriyor. Stil tarafında duyarlı davranış korunuyor; görsel yine ekran boyutuna göre büyüyüp küçülüyor.
Bu iki öznitelik yıllarca gereksiz sayıldı, sonra tam da bu sebeple geri döndü.
İpucu — Sitenizdeki ölçüsüz görselleri bulmak için bir tarama aracı kullanabilirsiniz; çoğu bunu doğrudan raporluyor. Tema kaynaklıysa tek bir şablon düzeltmesi bütün sayfaları birden çözüyor.
Gömülü içerik
Video, harita ve sosyal medya gömüleri de aynı sorunu üretiyor: geldiklerinde yer kaplıyorlar.
Çözüm, gömülü içeriği sabit oranlı bir kabın içine koymak. Kap baştan yerini alıyor, içerik gelince o boşluğu dolduruyor.
Bu, aynı zamanda hız kazancı da sağlıyor: gömülü içeriği tıklamayla yüklemek hem ağırlığı azaltıyor hem kaymayı önlüyor.
Reklam alanları
Reklam gösteren sitelerde en büyük kayma kaynağı bu ve çözümü en zor olanı.
Sorun şu: reklam boyutu önceden bilinmiyor. Farklı boyutlarda reklam gelebiliyor.
Yapılabilecekler:
Asgari yükseklik tanımlamak. En sık gelen boyuta göre alan ayırmak.
Reklamı içerik akışının dışına almak. Kenar çubuğu ya da içeriğin altı.
Reklam gelmediğinde alanı kapatmamak. Boş kalan alan, kaymaktan iyi.
Yazı tipleri
Bu kaynak en az bilinen ama sık görülen olanı.
Yazı tipi dosyası inene kadar metin yedek bir yazı tipiyle gösteriliyor. Asıl yazı tipi gelince metin yeniden çiziliyor. İki yazı tipinin harf genişlikleri farklıysa satırlar kayıyor.
Çözüm iki yönlü:
Yedek yazı tipini yakınlaştırmak. Ölçüleri asıl yazı tipine yakın bir yedek seçmek.
Yazı tipini erken yüklemek. Yerelden servis etmek ve öncelikli indirmek.
Konunun tamamını yazı tipi görüntüleme yazısında ele aldık.
Sonradan eklenen bloklar
Çerez bildirimi, kampanya banner'ı, "yeni ürün" duyurusu — sayfa yüklendikten sonra araya giren her blok kayma üretiyor.
Çözüm bunları içerik akışının dışına almak: sayfanın üzerinde duran sabit bir katman olarak konumlandırmak. Böylece altındaki içerik hiç oynamıyor.
Kendi sitemizde çerez onay kartı bu şekilde konumlandırılmış: sayfanın üzerinde, köşede duruyor ve içeriği hiç itmiyor.
Dikkat — Ekranı kaplayan ve içeriği kilitleyen bildirim katmanları ayrı bir sorun. Kaymayı önlüyorlar ama Google'ın sayfa deneyimi tarafında "araya giren içerik" sayılma riski taşıyorlar.
Nasıl görülür?
Rapordaki teşhis bölümü hangi öğelerin kaydığını listeliyor. Ama en pratik yöntem gözle bakmak.
Tarayıcının geliştirici araçlarında yavaş bir bağlantı simülasyonu açıp sayfayı yeniden yükleyin. Kayma çıplak gözle görülüyor ve hangi öğenin sorumlu olduğu hemen anlaşılıyor.
İkinci yöntem: sayfayı telefonda, gerçek bir mobil bağlantıyla açmak. Simülasyonun göstermediği bazı kaymalar orada ortaya çıkıyor.
İyileştirme yolları web.dev'in ilgili belgesinde ayrıntılı anlatılıyor.
Örnek senaryo — Bir e-ticaret sitesinde ürün listesi yüklenirken sayfa iki kez zıplıyor. İnceleme: ürün görsellerinde ölçü tanımı yok ve üstte bir kampanya banner'ı sonradan yükleniyor. Görsellere ölçü yazılıyor, banner sabit yükseklikli bir kaba alınıyor. Kayma ölçüsü eşiğin altına iniyor ve kullanıcı şikâyetleri duruyor.
Kontrol listesi
- Bütün görsellerde genişlik ve yükseklik değeri var mı?
- Gömülü video ve haritalar sabit oranlı bir kapta mı?
- Reklam alanları için asgari yükseklik tanımlı mı?
- Yedek yazı tipi asıl yazı tipine yakın mı?
- Bildirim ve banner'lar içerik akışının dışında mı?
- Yavaş bağlantı simülasyonuyla gözle kontrol yapıldı mı?
Altıncı madde en çok atlanan ve en çok bilgi veren adım.
Animasyonlar ve geçişler
Sık atlanan bir kaynak daha var: konum değiştiren animasyonlar.
Bir öğenin yukarı aşağı kayarak belirmesi görsel olarak hoş ama düzen kayması sayılabiliyor — özellikle o öğe diğer içeriği itiyorsa.
Çözüm animasyonu kaldırmak değil, doğru özellikleri kullanmak. Konumu ve boyutu değiştiren animasyonlar sayfayı yeniden hesaplatıyor; opaklık ve dönüşüm kullanan animasyonlar hesaplatmıyor.
Rapor bunu ayrı bir uyarıda da işaret ediyor: birleştirilmemiş animasyonlar.
Mobilde daha sık görülüyor
Düzen kayması mobilde belirgin şekilde daha çok karşımıza çıkıyor ve iki sebebi var.
Dar ekran. Aynı miktarda kayma, dar bir ekranda daha büyük bir oran üretiyor.
Yavaş bağlantı. Öğeler daha geç geliyor ve kayma daha görünür oluyor.
Bu yüzden ölçümü mobilde yapmak gerekiyor. Masaüstünde sorunsuz görünen bir sayfa mobilde eşiği geçemeyebiliyor.
Ölçüm ve önceliklendirmenin mobil tarafını mobil öncelikli indeksleme yazısında anlattık.
Sonuç — Düzen kayması, ölçülen üç değerin en kolay düzeltilen olanı. Çözümlerin çoğu tek satırlık ve hepsi aynı ilkeye dayanıyor: sonradan gelecek her şey için baştan yer ayırmak.
Bu düzeltmelerin uygulamasını teknik SEO kapsamında yapıyoruz; yeni bir sitede bu kurallar baştan uygulanıyor — web sitesi geliştirme ve kurumsal web tasarım sayfalarında anlattık.
Rapordaki diğer uyarılar için PageSpeed uyarıları yazısına bakabilirsiniz.
