Yazı · Mühendislik
Açılış sayfasını 4,2 MB'tan 1,9 MB'a nasıl indirdik
Açılış sayfasının ilk yüklemede indirdiği veriyi yarıdan fazla azalttık. Neyi sonraya bıraktık, neyi sıkıştırdık, görüntünün değişmediğini nasıl gösterdik?
Bu yazıda
Kısaca
- Açılış sayfası ilk yüklemede 4197 K indiriyordu. Şimdi 1948 K indiriyor.
- Asıl kazanç, görünmeyen veriyi gerektiği ana bırakmaktan geldi. Geri kalanını sıkıştırma sağladı.
- Önceki ve sonraki sayfaları piksel piksel karşılaştırdık. Ölçülen fark, karşılaştırmanın kendi gürültüsüydü.
Neyi ölçtük
Açılış sayfamız kaydırdıkça ilerleyen üç boyutlu bir sahne. Sahnenin noktaları ve nesneleri ayrı veri dosyalarında duruyor. İlk ölçümde sayfanın tamamı, tek bir kaydırma yapılmadan 42 istek gönderiyor ve 4197 K indiriyordu. Bunun 3062 K'sı veri dosyalarıydı.
Bu verinin büyük kısmı ziyaretçi henüz görmediği bölümler içindi. Yani sorun verinin miktarı kadar zamanlamasıydı.
Veriyi aşamalara böldük
İlk yüklemede yalnızca açılışın altı veri dosyasını bıraktık. Galerideki her kutunun nokta verisi, kaydırma o kutuya yaklaşınca geliyor.
Bunun bir bedeli olabilirdi: hızlı kaydıran biri boş bir sahne görebilirdi. Bu yüzden zor durumları tek tek denedik: yavaş kaydırma, hızlı kaydırma, kaydırma çubuğuyla sayfanın ortasına atlama, doğrudan bir bölüme gelen bağlantı ve sayfanın ortasında yenileme. On denemede de konsol hatası çıkmadı, sahne boş kalmadı.
Dosyaları kendimiz sıkıştırdık
Vercel'in de aralarında olduğu bazı barındırma servisleri yalnızca listelerindeki dosya türlerini sıkıştırır. Bizim ikili veri dosyalarımız bu listede değil, yani olduğu gibi gidecekti.
Bu yüzden her derlemede her .bin dosyasının yanına sıkıştırılmış bir .gz kopyası yazıyoruz. Tarayıcı bu kopyayı indirip kendi açıyor. Bunu desteklemeyen eski tarayıcılar düz dosyaya dönüyor. Bugünkü derlemede 23 dosya 5300 K'dan 3859 K'ya iniyor, yani yüzde 27 kazanç var.
Neyi yapmadık
Veriyi daha az hassas sayılarla saklayarak yaklaşık 300 K daha kazanabilirdik. Ama bu, sahnedeki sırt çizgilerinde basamaklanma riski taşıyordu. 300 K için görüntüyü riske atmaya değmezdi, o yüzden burada durduk.
Görüntünün değişmediğini nasıl gösterdik
Hız çalışması görüntüyü bozuyorsa kazanç sayılmaz. Bu yüzden açılış ve galeriden yedi kareyi önceki ve sonraki sürümde karşılaştırdık. Üç karede hiç fark yoktu. Diğer dördünde fark en fazla 97 renk kanalıydı, yani binde birin altında. Bu fark, kaynağı önceki sürüme giden bir karşılaştırma gürültüsüydü.
Sonuç
| Ölçüm | Önce | Sonra |
|---|---|---|
| Sayfanın tamamı, aktarılan veri | 4197 K | 1948 K |
| Sayfanın tamamı, istek sayısı | 42 | 26 |
| Veri dosyaları, aktarılan veri | 3062 K | 1163 K |
| Veri dosyaları, dosya sayısı | 14 | 6 |
| Kaydırmada en uzun kare | 166,6 ms | 41,6 ms |
| Yavaş bağlantıda sahnenin açılması | 13,4 sn | 11,0 sn |
Aktarılan veri, metinleri sıkıştıran ama .bin dosyalarını sıkıştırmayan bir barındırma servisine göre ölçüldü.
Sayfa hâlâ aynı sayfa. Tek fark, artık ziyaretçi görmediği şey için beklemiyor.