Web sitemdeki görseller neden yavaş yükleniyor?

Tek bir yavaş sayfayla başlayın

Yayımlanmış sayfayı telefonda ve bilgisayarda açın. Hangi görselin geç göründüğüne, tüm sayfanın yavaş olup olmadığına ve görseller görünürken metnin kayıp kaymadığına bakın.

1. Sayfa adresini ve sorunlu görseli not edin.
2. PageSpeed Insights ile test yapın ve görsellerle ilgili bulguları kaydedin.
3. Sitenizi başka biri yönetiyorsa adresi ve raporu ona iletin. Tüm kitaplığı değiştirmeden önce bu görseli kontrol etmesini isteyin.

Sonraki bölümler bir sonraki kontrolü seçmenize yardımcı olur. Daha ayrıntılı inceleme için tarayıcının Network paneli, sayfanın hangi dosyaları indirdiğini ve her isteğin ne kadar sürdüğünü gösterir.

Belirtiye göre kontrol noktası seçin

İsteğe bağlı: görseli Network panelinde inceleyin

Bilgisayarda sayfayı Chrome’da açın. Geliştirici araçlarını Windows veya Linux’ta Ctrl + Shift + J, Mac’te Command + Option + J ile açın. Network sekmesini seçip şu adımları izleyin:

1. Img görsel filtresini seçin.
2. Disable cache seçeneğini etkinleştirip panel açıkken sayfayı yeniden yükleyin. Böylece tarayıcıda saklanan bir kopya yerine yeni indirmeyi incelersiniz.
3. Sorunlu görselin isteğini seçin. Doğru görsel olduğundan emin olmak için önizlemeyi kontrol edin.
4. Görsel adresini ve dosya boyutunu kaydedin.
5. İsteğin nerede zaman harcadığını görmek için Timing bölümünü açın. Ardından isteği neyin başlattığını görmek için Initiator bölümüne bakın.

Bu tarayıcı ayarı, sitenin sunucu veya CDN önbelleğini temizlemez. CDN, site dosyalarını farklı sunuculardan dağıtan ve kendi kopyalarını saklayabilen bir hizmettir.

İstek geç başlıyorsa HTML, betik veya ertelenmiş yükleme tarafından mı başlatıldığını bulun. Erken başlayıp yanıtı bekliyorsa başka bir görsel ve HTML belgesiyle karşılaştırın. Dosya hızlı gelip görünmüyorsa CSS, animasyon ve JavaScript'i inceleyin. Gerçekte geciken aşamayı düzeltin.

Timing, isteğin zamanı nerede harcadığını gösterir; örneğin sunucuyu beklemek veya indirmek. Initiator, isteği HTML veya betik gibi neyin başlattığını gösterir. Böylece büyük dosyayla geç başlayan isteği ayırabilirsiniz.

Chrome'un Network belgeleri

Timing bölümünde Queueing veya Stalled, Waiting for server response (TTFB) ve Content Download aşamalarını ayırın. İstek gönderilmeden önce geçen süre, tarayıcı zamanlamasına veya bağlantı kurulmasına bağlı olabilir; tamamı sunucu işlem süresi değildir. TTFB ağda geçen zamanı da içerir, bu yüzden uzun bekleme tek başına barındırma sorunu olduğunu kanıtlamaz. Uzun indirme aşaması, aktarılan veri miktarı ve bağlantı hızının incelenmesini gerektirir. Birkaç isteği aynı koşullarda karşılaştırın.

Gereksiz büyüklükteki dosyaları küçültün

Küçük bir kart dev bir fotoğraf indiriyorsa önce ölçüleri ele alın. Boyutlandırma aracıyla oranları koruyan bir kopya hazırlayın, ardından dağıtım sisteminiz destekliyorsa WebP veya AVIF'yi karşılaştırın. Format rehberi seçim yapmanıza yardımcı olur.

İlk ekranın tamamını değerlendirin. Aynı anda indirilen onlarca küçük önizleme toplamda çok fazla veri aktarabilir. Hangilerinin hemen gerektiğine, hangilerinin ziyaretçi sayfayı kaydırarak yaklaştığında yüklenebileceğine karar verin.

Sorun boyut değilse zamanlamayı düzeltin

Ertelenmiş yüklemenin en önemli görünür görseli geciktirmesine izin vermeyin. Bir animasyonu veya betiği bekliyorsa sırayı geliştiriciyle inceleyin. Google'ın LCP rehberi yükleme ve oluşturma gecikmelerini ayırır.

Formatı sorumlu tutmadan önce birkaç isteği karşılaştırın. HTML ve diğer kaynaklar da uzun süre bekliyorsa barındırmayı ve dağıtımı inceleyin. On yeni çıktı almak, sunucu yanıtından önceki beklemeyi muhtemelen çözmez.

Karşılaştırılabilir koşullarda yeniden test edin

Tekrar ziyaret önbellek sayesinde daha hızlı olabilir. Yüklemenin önbellekten olup olmadığını kaydedin; cihazı ve ağı aynı tutun. Eksik mobil sürümleri bulmak için dar bir ekranı da deneyin.

1. Yavaş sayfanın URL'sini ve ilgili görsel isteğini kaydedin.
2. Dosyayı veya yüklenme davranışını değiştirin.
3. Yeni sürümün sunulduğunu doğrulayın.
4. Ölçümü tekrarlayıp görsel kalitesini kontrol edin.

Galerinin ilk görünümünü birlikte değerlendirin: ana görsel ve yirmi küçük resim farklı kurallar gerektirebilir. Görünene öncelik verip aşağıdakileri uygun olduğunda erteleyin. Sonra tüm galeriyi kaydırın ve geri gezinerek resimlerin zamanında geldiğini, boşluk kalmadığını kontrol edin.