Mobil ziyaretçi için bir sayfanın kalitesi çoğu zaman görsellerin ve videoların ne kadar sorunsuz yüklendiğiyle ölçülür. Yanlış gömülmüş tek bir büyük dosya, sayfanın yavaşlamasına, içeriğin zıplamasına ve ziyaretçinin sayfadan ayrılmasına yol açabilir. Arama motorları da bu deneyimi performans metrikleriyle değerlendirir.
Görselleri boyutlandırma ve biçim seçimi
Her görsel için genişlik ve yükseklik değerlerini HTML içinde belirtin. Tarayıcı bu sayede yer ayırır ve içerik yüklenirken kayma yaşanmaz. Mobil ekranda 400-800 piksel genişlik çoğu zaman yeterlidir; 3000 piksellik bir fotoğrafı küçülterek göstermek gereksiz veri harcar. Biçim olarak WebP veya AVIF tercih edin, eski tarayıcılar için JPEG yedeği bırakın. Fotoğraflarda sıkıştırmayı kalite gözle fark edilmeyene kadar artırın, logo ve basit çizimlerde SVG kullanın.
Farklı ekran genişlikleri için srcset ve sizes özelliklerini kullanarak birden fazla boyut sunun. Telefon küçük sürümü, masaüstü büyük sürümü indirir. Alt metni ise görseli görmeyen birine anlatır gibi, kısa ve anlamlı yazın; anahtar kelime doldurmaktan kaçının.
Geç yükleme ve ilk ekran önceliği
Ekranın altında kalan görsellere loading=”lazy” ekleyin, böylece kullanıcı kaydırdıkça yüklenirler. Ancak sayfanın en üstündeki ana görsele bunu uygulamayın; bu görsel çoğu zaman en büyük içerik öğesidir ve gecikmesi yükleme puanını düşürür. Ona yüksek öncelik verin, gerekirse önceden yükleme ipucu ekleyin. Kaydırma sırasında görsellerin aniden belirmesini azaltmak için hafif bir yer tutucu renk veya düşük çözünürlüklü önizleme kullanılabilir.
Video gömmede hız ve kontrol
Harici platformlardan gömülen videolar, sayfaya ek betikler ve çerezler getirir. Bunu azaltmak için video yerine önce bir kapak görseli ve oynat düğmesi gösterin; kullanıcı dokunduğunda oynatıcıyı yükleyin. Bu yöntem ilk açılışı belirgin biçimde hızlandırır. Gömme kutusunu en-boy oranı sabit bir kapsayıcıya yerleştirin, böylece küçük ekranda taşma ve kayma olmaz.
Kendi sunucunuzda video barındırıyorsanız preload değerini metadata yapın, poster görseli ekleyin ve ses içermeyen kısa döngüler için muted ile playsinline özelliklerini kullanın. Otomatik oynatmayı yalnızca gerçekten gerekli yerlerde açın; mobil veri tüketimi ve pil için ağır bir yüktür. Altyazı ve metin dökümü eklemek hem erişilebilirliği hem de içeriğin arama motoru tarafından anlaşılmasını destekler.
Yayın öncesi kontrol
Sayfayı gerçek bir telefonda ve yavaş bağlantı simülasyonuyla test edin. Performans araçlarında en büyük içerik öğesi süresine, düzen kayması puanına ve toplam sayfa ağırlığına bakın. Videolar için yapılandırılmış veri eklemek, arama sonuçlarında görünme şansını artırır.
Görseli doğru boyutlandırmak, geç yüklemeyi akıllıca uygulamak ve videoyu talep üzerine yüklemek, küçük emekle büyük fark yaratır. Bu üç alışkanlığı yayın sürecinizin standart adımı haline getirin.