Bir web sitesini gerçekte ne hızlandırır

Site hızı bir avuç karardan doğar — ilk ekrandaki en büyük görselin nasıl sunulduğu, fontların nasıl yüklendiği, geriye kalan ne kadar unutulmuş kodun hâlâ çalıştığı ve sayfa gelirken yerleşimin yerinde durup durmadığı — ve bunları hangi sırayla düzelttiğiniz, kaç tanesini düzelttiğinizden daha çok fark eder. Site hızıyla ilgili çoğu konuşma 100 üzerinden bir skorla başlar ve orada biter. Skor bir yangın alarmı olarak işe yarar; mutfakta yangın olduğunu söyler, hangi tencerede olduğunu söylemez.

Aşağıdaki sıra bizim çalışma sıramız ve nadiren değişir. Sıra önemli, çünkü listenin başındaki maddeler bir insanın gerçekten hissettiği gecikmenin büyük kısmını açıklar; aşağıdaki işler ise ilerleme sanılmaya müsaittir. Bir sayfadaki her dosyayı sıkıştırıp yine de telefonda dört saniyede beliren bir kapak görseli yayına verebilirsiniz.

Çoğu sayfada en yavaş tek unsur, ilk ekrandaki en büyük görseldir. Genellikle kameradan çıktığı boyutta yüklenmiş, telefona da aynı boyutta gönderilmiş ve sıklıkla sayfanın geri kalanı onu nereye koyacağını hesapladıktan sonra indirilmeye başlanmıştır.

İlk ekrandaki büyük görsel için etki sırasına göre üç düzeltme var: modern bir formatta sunun, cihazın gerçekten göstereceği boyutta sunun ve tarayıcıya erken haber verin ki stil dosyasını okumayı bitirmeden indirmeye başlasın. Bu üçlü bir sayfadan rutin olarak saniyeler götürür — hiçbir kod küçültme çalışmasının yaklaşamayacağı kadar.

Tarayıcıya görselden erken haber vermek, atlanan düzeltmedir; sebebini de mekanizmanın kendisi açıklar. Tarayıcı henüz keşfetmediği bir görseli isteyemez ve görsellerin çoğunu ancak HTML’i ve onları konumlandıran stil dosyasını çözümledikten sonra keşfeder; bir ön yükleme ipucu bu keşfi sayfanın ilk anına taşır. Ama aciliyet paylaşılan bir kaynaktır: onu bir görsele verirsiniz, geri kalanı sırasını bekler. Yaygın hata bunun tam tersidir — sitedeki her görsele uygulanmış bir tembel yükleme kuralı, ilk ekrandaki en büyük görseli bilerek geciktirir.

Özel fontlar ağırlığına değer; ama yalnızca kendi sunucunuzdan sunulup önceden yüklendiklerinde. Üçüncü taraf bir alan adından istenen font, tek bir kelime doğru yazı tipiyle çizilmeden önce bir DNS sorgusu, bir bağlantı ve bir indirme ekler.

Fontu kendi sunucunuzdan sunmak DNS sorgusunu ve ayrı bağlantıyı ortadan kaldırır. Makul bir yedek font ile doğru bir değiştirme davranışı tanımlamak da boş bekleyişi kaldırır. Ziyaretçi metni anında görür, metin bir an sonra doğru yazı tipine oturur.

Font yüklemesi iki yönde bozulur. Font gelene kadar metni bloklarsanız, yavaş bağlantıdaki biri geri kalanı çoktan yüklenmiş bir sayfada saniyelerce hiçbir şey okumaz. Farklı genişlikte bir yedek fontun üzerine geçiş yaparsanız, paragraf tam okumaya başladığı anda gözünün önünde yeniden akar — insanların hatırladığı sıçrama budur. Çıkış yolu, ölçüleri gerçek fonta yakın bir yedek font seçmek ve ikisi neredeyse aynı yeri kaplayana kadar ayarlamaktır.

İki yıl önce denediğiniz sohbet widget’ının üçüncü taraf betiği hâlâ yükleniyor. Bizden önceki ajansın analitik etiketi de, kimsenin bakmadığı ısı haritası aracı da, artık var olmayan bir sayfanın kullandığı iki font da.

Bir sayfanın neleri yüklediğini denetlemek gösterişsiz bir iştir ve neredeyse her zaman ikinci en büyük kazancı verir. Kaldırdığınız her betik, her ziyarette, sonsuza dek hiç yapılmayacak bir istektir.

Unutulmuş bir betiğin maliyeti, dosya boyutunun söylediğinden fazladır. Önce bir bağlantıyı meşgul eder, sonra çalışır — ve çalıştığı sürece tarayıcı başka hiçbir şey çizemez; yani neredeyse hiç yer kaplamayan bir etiket sayfayı bir an yerinde tutabilir. Ama bu betiklerin bir kısmı taşıyıcıdır: ödeme betiği, çerez bandı, birinin gerçekten okuduğu analitik. Tahminle etiket silmek, bir ödeme akışının sipariş kaydını sessizce bırakmasının yoludur; o yüzden her satıra bir sahip bulun ve kimsenin sahiplenmediğini kaldırın.

Bir sayfa hızlı olup yine de bozuk hissettirebilir — yüklenirken her şey zıplıyorsa. Görseller ve gömülü içerikler gelmeden önce yerlerini ayırın; sonradan görünen her öğeye tarayıcının hesaba katabileceği bir boyut verin. Bunun ölçülebilir adı kümülatif yerleşim kayması; insani karşılığı, sayfa kaydığı için yanlış düğmeye basmamak.

Tarayıcı sayfayı bildikleriyle yerleştirir ve yeni bir şey öğrendiği her seferinde yeniden yerleştirir. İşaretlemede boyutu yazılmamış bir görselin yüksekliği bilinmezdir; dolayısıyla altındaki her şey iki kez konumlanır — bir kez yanlış, sonra bir kez doğru.

Her denetimden sağ çıkan yerleşim kaymaları, tasarımı gereği sonradan gelen öğelerdir: sayfayı aşağı iten bir çerez bandı, iki satırlık bir başlığı üçe çıkaran bir font değişimi, tabanı olmayan bir kutuya yerleştirilmiş bir gömülü içerik. Bunların her biri sayfayı kuran kişiye görünmezdir — onun tarayıcısında font zaten önbellekte, bant aylar önce kapatılmış — ve ilk kez telefonla gelen ziyaretçide ortaya çıkar.

Bir sayfa hızlı gelip yine de yavaş hissettirebilir; çünkü yüklenmek ve yanıt vermek iki ayrı problemdir. Tarayıcı sayfayı çizmek ve kodunuzu çalıştırmak için aynı tek iş parçacığını kullanır; yani bir betik meşgulken, biraz önce yapılan dokunuş sırasını bekler. Düğme bir an tepki vermez, kişi de tekrar basar.

Yükleme skoru bunu göremez; çünkü skor, kimsenin dokunmadığı bir sayfada ölçülür. Onun yerine talep üzerine değil takvimle çalışan işlere bakın: her kaydırma olayında çalışan bir betik, tek bir değer değiştiğinde yüzlerce satırı baştan kuran bir filtre. Etkileşimli özellikler ana iş parçacığından zaman alır ve bir kısmı buna değer — ama maliyetin yeri, ziyaretçinin bir şey istediği andır; sayfaya girişi değil.

Ofis fiberinde test edilmiş bir site, test edilmiş sayılmaz. Yavaş bir bağlantıdaki orta seviye bir telefona kısıtlayın ve tekrar bakın. Çoğu ziyaretçinin gerçekte yaşadığı deneyim budur ve kalan işin kendini gösterdiği yer de orasıdır.

Aynı sayfayı aynı kısıtlı profilde, öncesi ve sonrası olmak üzere iki kez ölçün; sıcak önbellekle yapılan bir ölçüm siteyi değil kendi tarayıcınızın hafızasını ölçer. Kendi yaptığınız test sizin seçtiğiniz koşulları anlatır; gerçek ziyaretlerden gelen saha verisi ise hiçbir şey seçmemiş insanların başına ne geldiğini anlatır — ikisi çeliştiğinde güvenilecek sürüm bu.

Belirli bir skor vaat etmiyoruz; çünkü hosting, içerik ve üçüncü taraf araçlar yayından sonra bu skoru oynatır. Vaat ettiğimiz şey, bu kararların bilinçli alınması ve öncesiyle sonrasının ölçülmesi.