Neden önemli?
Sayfa ağırlığı, özellikle mobil ve yavaş bağlantılarda yükleme süresini doğrudan belirler. Ayrıca kullanıcının veri kotasını tüketir.
Tipik dağılım
Görseller %50-70 ← genellikle en büyük pay
JavaScript %15-25
CSS %5-10
Yazı tipleri %5-10
Sayfa kodu %2-5
Video/diğer Değişken
Bu dağılım, optimizasyon önceliğini de gösterir: Önce görseller.
Ağırlık bütçesi belirleyin
Bir hedef koymak, kontrolsüz büyümeyi engeller:
| Sayfa türü | Makul hedef |
|---|---|
| İçerik sayfası | 1 MB altı |
| Ürün sayfası | 1,5 MB altı |
| Kategori sayfası | 2 MB altı |
| Ana sayfa | 2 MB altı |
Bu değerler mutlak kural değildir ama bütçe olmadan ağırlık zamanla sessizce büyür.
Ağırlığı büyüten yaygın nedenler
- Optimize edilmemiş görseller
- Gereksiz büyük çözünürlükte yüklenen fotoğraflar
- Kullanılmayan CSS ve JavaScript
- Üçüncü taraf betikleri
- Çok sayıda yazı tipi varyantı
- Otomatik oynayan videolar
- Ağır slider ve animasyon kütüphaneleri
İlk ekran ağırlığı
Toplam ağırlıktan daha önemli olan, ilk ekran için gereken ağırlıktır. Kullanıcı sayfanın tamamını görmeden karar verir.
Bu nedenle:
- İlk ekran kaynaklarını önceliklendirin
- Alt kısımdaki görselleri geç yükleyin
- Kritik olmayan betikleri erteleyin
Ölçüm
Tarayıcı geliştirici araçlarında ağ sekmesi toplam transfer boyutunu gösterir. Önbelleği devre dışı bırakarak ölçün — ilk ziyaret deneyimi budur.
Ayrıca mobil ağ hızını simüle ederek test edin; masaüstü bağlantıda fark edilmeyen ağırlık, mobilde belirgin sorun üretir.
Düzenli denetim
Sayfa ağırlığı zamanla artar: yeni araçlar eklenir, görseller yüklenir, özellikler birikir. Çeyreklik kontrol, bu sessiz büyümeyi yakalar.
Ne anlama gelir?
Sayfa ağırlığı (page weight), bir web sayfasının tüm kaynaklarıyla (HTML, CSS, JavaScript, görseller, fontlar, videolar) birlikte toplam boyutudur, genellikle kilobayt veya megabayt cinsinden ölçülür. Sayfa ne kadar ağırsa, indirilmesi o kadar uzun sürer; bu da doğrudan sayfa hızını ve Core Web Vitals'ı etkiler. Sayfa ağırlığını kontrol altında tutmak, hız optimizasyonunun en temel adımlarından biridir.
Ağırlığı ne oluşturur?
- Görseller: Genellikle en büyük pay (optimize edilmezse çok ağır)
- JavaScript: İkinci büyük yük, işlem maliyeti de yüksek
- CSS, fontlar ve videolar
- Üçüncü taraf betikleri
Nasıl hafifletilir?
Sayfa ağırlığını azaltmanın en etkili yolu genellikle görselleri optimize etmektir: modern formatlar (WebP), doğru boyutlandırma ve sıkıştırma büyük kazanç sağlar. JavaScript ve CSS küçültülmeli, kullanılmayan kod temizlenmeli ve gereksiz üçüncü taraf betikleri kaldırılmalıdır. Özellikle mobil kullanıcılar sınırlı bağlantılarda gezindiğinden, hafif sayfalar mobilde çok daha büyük fark yaratır. Sayfa ağırlığını bir bütçe gibi düşünmek ("bu sayfa en fazla şu kadar olmalı"), disiplinli bir hız yönetimi sağlar.
Gerçek örnek
Bir sitenin sayfaları, optimize edilmemiş büyük görseller yüzünden çok ağırdı ve mobilde yavaş yükleniyordu. Görseller WebP'ye çevrilip doğru boyutlandırıldığında ve gereksiz betikler kaldırıldığında, sayfa ağırlığı büyük ölçüde düştü ve hız belirgin iyileşti.
Özet
Sayfa ağırlığı, bir sayfanın tüm kaynaklarıyla toplam boyutudur; ağır sayfalar yavaş yüklenir ve Core Web Vitals'ı bozar. En büyük pay genellikle görsellerdir. Görsel optimizasyonu, kod küçültme ve gereksiz betik temizliği sayfayı hafifletmenin temel yollarıdır.