Web Sitesi Hızı: Bağlantı Hızlandı, Sayfalar Neden Hızlanmadı
Bağlantı hızları yirmi yılda yüzlerce kat arttı, medyan sayfa açılış süresi ise aynı yerde duruyor. Bunun standart açıklaması "siteler ağırlaştı" biçiminde özetlenir. Doğru ama eksik: bant genişliği artarken hiç iyileşmeyen ikinci bir değişken var, sayfa açılış süresinin büyük kısmını o belirliyor.
Bant genişliği arttı, gecikme aynı kaldı
Bant genişliği bir saniyede kaç bit taşıyabildiğinizdir. Gecikme ise isteğin karşı tarafa gidip cevabın geri dönmesi için geçen süredir, ve fiziksel bir tabanı vardır. Işık fiber içinde saniyede kabaca 200.000 kilometre yol alır. İstanbul'dan ABD'nin doğu kıyısındaki bir sunucuya yaklaşık 8.000 kilometre var, bu da tek yön için 40 milisaniye, gidiş dönüş için 80 milisaniye eder. Hattınızı on kat hızlandırmak bu sayıyı değiştirmez.
Sorun burada bitmiyor. Bir bağlantıyı kurmak için DNS çözümlemesi, TCP el sıkışması ve TLS el sıkışması gerekir; sadece bu kurulum kolayca iki üç gidiş dönüş demektir. Sayfanız beş farklı alan adından kaynak çekiyorsa (yazı tipi bir yerden, analitik başka yerden, sohbet widget'ı üçüncü bir yerden) bu maliyeti beş kez ödersiniz, üstelik tarayıcı o alan adlarının varlığını çoğu zaman HTML'i ayrıştırana kadar bilmez.
Bu yüzden bir sayfayı hızlandırmak için ilk baktığım şey dosyaların toplam boyutu değil, kaç ayrı yerden kaç istek yapıldığıdır. Aynı 300 KB'ı üç istekte indiren sayfa, otuz istekte indiren sayfadan gözle görülür biçimde hızlı açılır.
Ağırlık meselesi de gerçek ama suçlu sanılan yerde değil
Sayfa ağırlığındaki artışın çoğu görsellerden geliyormuş gibi anlatılır. Görseller büyük, doğru, ama görsel indirilirken sayfa açılmaya devam eder. Asıl tıkanma JavaScript'te olur: indirmek zaman alır, ayrıştırmak ve çalıştırmak ayrıca zaman alır, ve bu iş ana iş parçacığında yapıldığı için o sırada arayüz dokunmaya cevap veremez.
Kullanıcının "yavaş" dediği anların önemli bir bölümü sayfanın görünmediği an değildir. Sayfa görünmüştür, kullanıcı butona basar, hiçbir şey olmaz. Görünen ama tepki vermeyen arayüz, geç açılan arayüzden daha rahatsız edicidir, çünkü kullanıcıya yanlış bir söz verir.
"Üç saniyede kullanıcıların yarısı gidiyor" cümlesine ne kadar güvenmeli
Hız yazılarında dolaşan yüzdelerin çoğu tek bir şirketin tek bir vaka çalışmasından çıkıp kaynağı düşerek genel bir yasa gibi tekrarlanıyor. Bir haber sitesinde ölçülen terk oranıyla bir kurumsal yazılımın giriş ekranındaki terk oranı aynı sayı olamaz; kullanıcının alternatifi ve motivasyonu farklıdır. Rakamı ezberlemek yerine, kendi analitiğinizde yükleme süresi ile terk arasındaki ilişkiye bakmak daha doğru bir zemin verir.
Buna karşılık insan algısına dair eşikler oldukça sağlam ve kırk yılı aşkın süredir aynı: 100 milisaniyenin altındaki tepki anlık hissedilir, bir saniyeye kadar olan gecikmede kullanıcı akışta kalır ama beklediğini fark eder, on saniyeden sonra dikkat başka yere kayar. Tasarım kararlarını yüzdelik iddialar üzerine değil bu eşikler üzerine kurmak daha güvenli.
Ölçtüğünüz şey kullanıcının yaşadığı şey mi?
PageSpeed Insights gibi araçların verdiği yüksek puan, sabit bir makinede, sabit bir ağ profilinde, tek bir sayfa için üretilmiş bir laboratuvar ölçümüdür. Gerçek kullanıcılarınız o profilde değil. Aynı aracın alt kısmındaki saha verisi bölümü daha çok şey söyler, çünkü orada gerçek ziyaretlerin dağılımı vardır.
Ortalamaya bakmak da ayrı bir tuzak. Ortalama iki saniye, kullanıcılarınızın yarısının iki saniyenin altında olduğu anlamına gelir; geri kalan yarının içinde sekiz saniye bekleyen bir grup rahatlıkla saklanabilir. 75. yüzdeliğe bakın, kötü deneyimi orada görürsünüz. Ayrıca hangi sayfa? Anasayfa optimize edilmiştir genelde. Yavaş olan, kimsenin bakmadığı ürün detayı ya da form adımıdır.
Sırayla ne yapmalı
Ölçüp neyin yavaşlattığını bulmadan optimizasyona başlamak, çoğu zaman zaten hızlı olan kısmı biraz daha hızlandırmakla sonuçlanıyor. Sıra kabaca şöyle işliyor:
- Üçüncü parti script'leri tek tek listeleyin ve her biri için "bu olmasa ne kaybederiz" sorusunu sorun. Genelde birkaçının cevabı yoktur.
- Kalanları asenkron yükleyin, ana iş parçacığını açılışta meşgul etmesinler.
- Yazı tiplerini kendi alan adınızdan sunun, hem bir bağlantı kurulumundan hem de metin görünene kadar geçen boşluktan kurtulursunuz.
- Görselleri doğru boyutta ve modern formatta verin, ekranın altında kalanları geciktirin.
- Sunucu tarafında sıkıştırma ve önbellek başlıklarını kontrol edin; burada yapılan iş küçük ama etkisi her istekte tekrarlanır.
Bu listenin ilk maddesi diğerlerinin toplamından daha çok fark yaratıyor, ve tek maliyeti birilerine bir eklentiyi kaldıracağınızı söylemek.