Bir araç siz hiçbir şeye basmadan önce neyi indiriyor

Kimsenin yayınlamadığı sayı

Her araç sitesi özellik listesini yayınlar. Sayfanın kullanılmadan önce ne kadar ağır olduğunu neredeyse hiçbiri yayınlamaz. Oysa bir aracın nasıl hissettirdiğine karar veren sayı budur: telefonda normal bir mobil bağlantıda her 400 KB JavaScript, hazır görünen ama olmayan bir sayfaya bakarak geçen bir saniye daha demektir.

Bizim için bu, çoğu siteden daha önemli. nopa sizin cihazınızda çalışır — birleştirme, sıkıştırma, konuşma çözümleme tarayıcıda olur, hiçbir şey yüklenmez. Bu sözün diğer yüzü şu: kodun önce gelmesi gerekir. İndirme, ürünün etrafındaki bir masraf değildir; ürünün kendisinin gelişidir.

Nasıl ölçtük

Depomuzdaki bir betik her rotayı gerçek bir Chromium’da, önbellek boşken ve service worker kapalıyken açıyor ve sayfanın herhangi bir etkileşimden önce çektiği bütün betiklerin aktarılan baytlarını topluyor. Açılmış boyutu ya da paketleyici raporunu değil — bağlantınızın gerçekten ödediği, hattan geçen baytları.

Bunu tüm sitede çalıştırdık: ana sayfa, katalog ve hub sayfaları, her araç sayfası. Yedi rota bir megabaytın üzerinde döndü.

Kendi kodumuzda ne bulduk

“Önce” sütunu yayınladığımız hali. “Sonra” sütunu bugünkü aynı sayfa — hiçbirinden tek bir özellik çıkarılmadan.

Sorun hiçbir zaman özellik değil. Sorun import.

Bu sayfaların hiçbiri yaptığı iş yüzünden ağır değildi. Her seferinde bir dosyanın en üstündeki tek bir satır, sayfanın asla çalıştırmayacağı bir şeyi içeri çekiyordu.

• “Yapay zekâ modeli zaten indi mi?” kontrolü, hiç model yüklemeyen sayfalara bütün makine öğrenmesi çalışma zamanını — 539 KB — taşıyordu. Artık tarayıcı önbelleğini doğrudan, dokuz satırda okuyor.
• Bir zip yardımcısı PDF motorunun başında içe aktarılmıştı; bu yüzden bir şeyi sıkıştıran her sayfa 443 KB PDF kodunu da indiriyordu. Yardımcıyı kullanıldığı anda yüklemek dört araç sayfasını yarıya indirdi.
• Emoji seçici, anahtar kelime tablosunu — ağırlıkça veri kümesinin yarısını — daha ilk tuşa basılmadan gönderiyordu. Artık ilk aramanızla geliyor; onu okuyan tek an da o.
• Telefonlarda yukarı kayan tek bir panel için koca bir animasyon kütüphanesi yükleniyordu. Tarayıcının kendi animasyon API’si var; kütüphane gitti.
• 373 KB’lık bir katalog dizini, “benzer araçlar” bağlantılarından ibaret tek bir satır için her sayfada yükleniyordu.

Burada neden rakip sayıları yok

O tabloya başka araçları da koymak istedik. Dürüstçe yapamadık. İlk denememiz rakiplerin sayfalarını indirip HTML’deki betikleri saydı; sonuç, tanınmış bir PDF paketinin 2 KB JavaScript yayınladığını söylüyordu — çünkü asıl uygulamayı sayfaya yazılmış kod değil, JavaScript’in kendisi yüklüyor. Yeniden üretemediğimiz bir sayı, hiç sayı olmamasından kötüdür; kendimize kendimizin not verdiği bir kıyaslama da kıyaslama değildir.

Bu yüzden yukarıdaki tabloda yalnızca bize ait sayfalar var. İnanmak zorunda kalacağınız sayılar yerine, işte yöntem.

Herhangi bir aracı otuz saniyede ölçün

Her sitede işe yarar, bizimki dâhil. Sayılarımız yanlışsa bizi böyle yakalarsınız.

• Aracı masaüstü tarayıcıda açın, geliştirici araçlarını başlatın (F12), Network sekmesi.
• “Disable cache” kutusunu işaretleyin, JS’e göre süzün ve sayfayı yeniden yükleyin.
• Hiçbir şeye tıklamadan alttaki transferred toplamını okuyun. Her soğuk ziyarette ödediğiniz indirme budur.
• Yerel çalışma iddiası için: sayfa yüklendikten sonra ağı çevrimdışı yapın ve işinizi yapın. Tamamlanıyorsa iş sizin cihazınızda. Başarısız oluyorsa dosyanız bir yere gidiyordu.

Artık kendimize koyduğumuz sınır

Her rotanın 600 KB JavaScript’lik sert bir tavanı var ve bunu ölçen betik, bir sayfa sınırı aştığında yüksek sesle hata veriyor. Bunun tekrarlanmasını engelleyen şey de bu: yukarıdaki dört düzeltme bir gün sürdü, aylardır gerekli olmalarının tek sebebi ise kimsenin saymamasıydı.

Araçlar ihtiyacınız olduğunda burada ve hiçbiri ne kadar ağır olduğunu öğrenmeniz için kayıt olmanızı istemiyor.