Web Sitesi Ağırlığı: Neyi Kesmek Gerçekten İşe Yarıyor

Bir sayfa açıldığında tarayıcıya kaç megabayt aktığını çoğu ekip bilmiyor. Bilmeyince de neyi keseceğini bilmiyor, gaza gelip görselleri sıkıştırıyor ve sayfa yine ağır kalıyor. Sayfa ağırlığı hem yükleme süresinin hem de o sayfanın harcattığı enerjinin en doğrudan göstergesi, üstelik ölçmesi en kolay olanı.

Ağırlık nereden geliyor

2003'te ortalama bir web sayfası 100 KB civarındaydı. Bugün birkaç megabayt. Bu artış tek bir kalemden gelmiyor: görseller, gömülü video, yazı tipleri, JavaScript paketleri ve analitik etiketleri üst üste biniyor.

Ölçek duygusu için kaba bir karşılaştırma yapalım. Bin kelimelik düz metin 6 KB kadar yer tutar. İyi optimize edilmiş orta boy dört fotoğraf 160 KB'ı bulur. Otuz saniyelik bir video rahatlıkla birkaç MB'a çıkar. Taşıdığı bilgi başına en ucuz biçim metindir, aradaki fark da yüzdelerle değil mertebelerle ölçülür.

Görselde kazanç kolay ama sınırlı

Görsel tarafı düzeltmesi en rahat kısım, çünkü kural listesi kısa:

• Formatı doğru seç: fotoğraf için WebP ya da AVIF, düz renkli şekiller için SVG.
• Görseli kullanılacak boyutta üret; 3000 piksel genişliğinde bir dosyayı CSS ile 400 piksele küçültmek dosyayı küçültmez.
• srcset ile cihaza göre farklı boyut sun.
• Ekranın altında kalan görselleri loading="lazy" ile ertele.

Bu konuda sık tekrarlanan bir cümle var: 4K'dan 8K'ya çıkınca dosya boyutu üçe katlanır. Hesap tutmuyor. 4K 3840×2160, yani 8,3 megapiksel; 8K 7680×4320, yani 33,2 megapiksel. Piksel sayısı ikiye değil dörde katlanıyor. Sıkıştırma sayesinde dosya tam dört kat büyümez, ama "üç kat" rakamı nereden geldiği belirsiz bir yuvarlama. Doğrusu şu: her çözünürlük adımında dörde katlanan bir veri yükünü, ekranda 800 piksel genişliğinde görünecek bir görsel için taşıyorsunuz.

Asıl kaçak üçüncü taraf kodunda

Görsel sıkıştırmayı üçüncü taraf script'i sökmekten çok daha kolay bulurum, ama kalıcı kazanç bakımından script'i sökmeyi daha güvenilir buluyorum. Sebebi basit: görsel bir kez iner, önbelleğe girer ve orada kalır. Script her açılışta indirilir, ayrıştırılır, çalıştırılır ve genellikle kendi başına yeni istekler açar.

Bir sayfaya eklenen 300 KB'lık etiket yöneticisi, ağ tarafında 300 KB'lık bir görselle aynı görünür. Cihazda öyle değil. Görselin kod çözme maliyeti öngörülebilir; script ana iş parçacığını meşgul eder, sayfanın etkileşime hazır olmasını geciktirir ve arkasına takılı üç dört alan adına daha bağlantı açar. Orta seviye bir Android telefonda fark net biçimde hissedilir.

Pratik yöntem: ağ sekmesinde alan adına göre grupla, kendi alan adınız dışındaki her isteği tek tek gerekçelendirin. Gerekçesi "pazarlama istemişti, üç yıl önce" olan ne varsa kaldırın.

Ölçmeden karar vermeyin

Sürdürülebilirlik konuşmaları çabuk soyutlaşıyor, oysa burada ölçüm ucuz. Tarayıcının geliştirici araçlarında ağ sekmesini açın, önbelleği devre dışı bırakın, sayfayı yenileyin ve aktarılan toplam veriye bakın. İki sayı önemli: sıkıştırılmış aktarım boyutu ve istek sayısı.

Sonra bu ölçümü bir yere yazın. Ölçüm tek seferlik yapıldığında hiçbir işe yaramıyor; asıl değeri, altı ay sonra aynı sayfanın 1,2 MB'dan 3,4 MB'a çıktığını görmenizde. Sayfa ağırlığı kendiliğinden artar, çünkü her yeni özellik bir şey ekler ve kimse bir şey çıkarmaz.

Yayın öncesi bir bütçe koymak da işe yarıyor: "bu şablon 500 KB'ı geçmeyecek" gibi tek satırlık bir kural, sonradan yapılan optimizasyon çalışmalarının hepsinden fazla iş görür.

Eklemek kadar silmek de bir karar

Ağırlığın bir kısmı hiç kullanılmayan içerikten geliyor. Yıllar içinde biriken kampanya sayfaları, kapanmış hizmetlerin duyuruları, artık kimsenin uğramadığı alt kategoriler. Bunlar tek başına yavaşlık yaratmaz ama bakım yükü üretir: her yeniden tasarımda taşınırlar, her şablon değişikliğinde kırılırlar.

Kod tarafında da durum aynı. Wikipedia, gereksiz JavaScript'i temizleyerek günlük terabaytlar mertebesinde veri tasarrufu bildirmişti. Bu ölçekte bir site için bile kazanç, yeni bir şey eklemekten değil, duran bir şeyi kaldırmaktan geldi.

Buradan çıkan kural sade: bir şey eklerken bir şey çıkarma alışkanlığı edinin. Ekleme kararı toplantıda alınır, silme kararı ise genellikle hiç alınmaz, bütün mesele de bu.