İçeriğe atla
  • Kapak: Görsellerin siteni yavaşlatıyor. Telefonla çekilmiş 4 MB'lık fotoğrafı doğrudan yüklemek. En sık, en kolay çözülen sorun.
  • Adım 1 · Bul: En ağır dosyayı bul.
  • Adım 2 · Küçült: Ekranda kaç piksel?
  • Adım 3 · Sırala: İlk görseli erteleme.
  • Adım 4 · Yer aç: Sayfa zıplıyor.
  • Ölçüm: Sonuç nerede görünür?
  • Kapanış: Yoruma GORSEL yaz. Görsel kontrol listesini DM’den gönderiyoruz.
1/7

Uygulama Rehberi · Web

Görsellerin siteni yavaşlatıyor.

Telefonla çekilmiş 4 MB'lık fotoğrafı doğrudan yüklemek. En sık, en kolay çözülen sorun.

Kısa cevap

Telefonla çekilmiş birkaç megabaytlık fotoğrafı doğrudan yüklemek, site yavaşlığının en sık ve en kolay çözülen sebebidir. Tam genişlikteki kapak görseli 200 KB altında, gösterildiği alanın en fazla iki katı çözünürlükte ve WebP ya da AVIF biçiminde olmalı. İlk ekrandaki görsel ertelenmemeli; alttakilere loading="lazy" verilmelidir.

4 adım · 1 dk · · Turan Yasin Salcı

Adım adım · 4 adım

0/4 işaretli · yalnızca bu tarayıcıda saklanır

  1. En ağır dosyayı bul.

    3 DAKİKA

    Geliştirici araçları → Ağ → Img süzgeci → Boyuta göre sırala. Listenin başındaki dosya, ziyaretçinin beklediği dosyadır.

    Ölçü: Tam genişlikte bir kapak görseli 200 KB altında olmalı. Bunun üç katıysa, sayfanın en yavaş parçasını bulmuşsun demektir.

  2. Ekranda kaç piksel?

    15 DAKİKA

    Görselin gerçek boyutu, ekranda kapladığı alanın en fazla iki katı olmalı. 400 piksellik alana 2000 piksellik dosya koymak, veriyi boşa harcamak.

    gosterim alani : 600 px
yuklenecek     : 1200 px
yuklenen       : 3024 px

# bicim: .webp veya .avif · .jpg degil

  3. İlk görseli erteleme.

    10 DAKİKA

    En sık yapılan hata: tüm görsellere toptan lazy vermek. Ekranda ilk görünen görsele bunu yaparsan açılışı kendi elinle geciktirirsin.

    Aşağıdakiler: İlk ekranın altındaki her görsele loading="lazy" ve decoding="async" ver. Kural basit: ilk görünen hariç hepsi tembel.

    <img src="kapak.webp" loading="lazy">

<img src="kapak.webp"
     fetchpriority="high"
     width="1200" height="800">

  4. Sayfa zıplıyor.

    10 DAKİKA

    Görsel yüklenince metin aşağı kayıyorsa, ölçüsünü yazmamışsındır. Tarayıcı yeri önceden ayıramaz.

    Neden önemli: Zıplayan sayfa, yanlış düğmeye basılmasına yol açar. Bu da ayrı bir Temel Web Verisi: düzen kayması.

    <img src="urun.webp">

<img src="urun.webp" width="800" height="600">

# CSS: img { max-width:100%; height:auto; }

Nasıl ölçersin?

Sonuç nerede görünür?

Bu dört işin karşılığı en hızlı görünen iyileştirmedir. Bakacağın yerler:

  • PageSpeed laboratuvar puanı hemen yükselir
  • Ağ sekmesinde toplam sayfa boyutu düştü
  • Saha verisinde LCP 28 gün içinde iyileşir
  • Mobil hemen çıkma oranı düşer

Sıralama: Önce en ağır 5 görseli düzelt. Sitedeki 400 görselin hepsini optimize etmeye çalışmak, işi hiç yapmamakla aynı yere çıkıyor.

Ücretsiz · PDF

GORSEL kontrol listesi indir.

Bu sayfadaki adımların yazdırılabilir, işaretlenebilir sürümü. Giriş ya da üyelik istemez.

Kontrol listesini indir

Kaynaklar

[A] birincil kaynak · [B] sektör araştırması · [C] pratisyen · [D] kendi verimiz

Bu içerik şurada da

Sık sorulan sorular

Web sitesindeki görseller kaç KB olmalı?

Tam genişlikte bir kapak görseli için hedef 200 KB altıdır. Çözünürlük, görselin ekranda gösterildiği alanın en fazla iki katı olmalı; WebP ya da AVIF aynı kalitede daha küçük dosya verir.

Tüm görsellere lazy loading eklemek doğru mu?

Hayır. İlk ekranda görünen ana görsel ertelenirse sayfa daha geç dolar; ona fetchpriority="high" verilir. loading="lazy" ve decoding="async" yalnızca aşağıdaki görsellere eklenir. width ve height yazmak sayfanın zıplamasını önler.

Sonraki adım

Sitene birlikte bakalım.

Ücretsiz dijital kontrol: sitenin, reklamlarının ve yapay zekâ görünürlüğünün sağlık skoru ve önce yapılacak işler. 3 dakika.

Ücretsiz dijital kontrol Web hizmetimiz

Sıradaki rehberler