Bir web sitesine analiz aracı, canlı destek penceresi, reklam etiketi ya da harita eklemek birkaç satır kodla mümkün. Ancak bu satırların her biri başka bir sunucudan dosya indirir, tarayıcının işlemcisini meşgul eder ve çoğu zaman sizin kontrol edemediğiniz bir kaynağa bağımlılık yaratır. Zamanla biriken bu yük, sayfanın geç açılmasına ve kullanıcının etkileşime geçememesine neden olur.
Yük tam olarak nereden geliyor?
Üçüncü taraf betik, kendi alan adınız dışındaki bir kaynaktan yüklenen JavaScript dosyasıdır. Her yeni alan adı için tarayıcı DNS sorgusu yapar, bağlantı kurar ve güvenlik el sıkışmasını tamamlar. Dosya indikten sonra ayrıştırılır ve çalıştırılır. Bu işlemler ana iş parçacığını kilitlediğinde sayfa görünse bile tıklamalara yanıt vermez. Bu durum etkileşim gecikmesi ve toplam bloklama süresi metriklerine doğrudan yansır. Ayrıca bir betik başka betikleri zincirleme çağırabilir; tek bir etiket yöneticisi kaydı, arkasından on farklı istek getirebilir.
Etkiyi ölçmek için ne yapmalı?
Tarayıcının geliştirici araçlarındaki ağ sekmesinde istekleri alan adına göre gruplayın ve kendi alan adınız dışındakilerin toplam boyutuna ve süresine bakın. Performans sekmesinde uzun görevleri hangi betiğin oluşturduğunu görebilirsiniz. Lighthouse raporundaki üçüncü taraf kodun etkisini gösteren bölüm de hızlı bir özet sunar. Ölçümü mobil cihaz ve yavaş ağ simülasyonuyla tekrarlayın, çünkü masaüstünde fark edilmeyen gecikme telefonlarda belirgin hale gelir. Bir betiği geçici olarak kaldırıp önce ve sonra değerlerini karşılaştırmak, gerçek maliyeti en net gösteren yöntemdir.
Yükü azaltmanın pratik yolları
İlk adım envanter çıkarmaktır: Hangi betik kim tarafından eklendi, hâlâ kullanılıyor mu, çıktısına kim bakıyor? Kullanılmayan etiketleri silmek en ucuz kazançtır. Kalanlar için async veya defer özniteliğini kullanın, kritik olmayanları sayfa yüklendikten sonra ya da kullanıcı etkileşiminden sonra başlatın. Sohbet penceresi gibi araçları kullanıcı simgeye tıklayana kadar yüklememek iyi bir örnektir. Sık kullanılan sunucular için preconnect ipucu eklemek bağlantı süresini kısaltır. Videolar ve haritalar için önizleme görseli gösterip asıl içeriği tıklamayla yüklemek de etkilidir. Mümkünse yazı tipi ve küçük kütüphaneleri kendi sunucunuzdan sunun.
Sürekli kontrol alışkanlığı kurun
Etiket yöneticisine yeni kod eklemeyi onaya bağlayın ve her eklemeden sonra hız ölçümü yapın. Üç ayda bir envanteri gözden geçirin, performans bütçesi belirleyin; örneğin üçüncü taraf kodun toplam boyutu belli bir sınırı aşmasın. Böylece sitenin hızı, kimsenin fark etmeden eklediği küçük kodlara kurban gitmez.