Bir projede etiketini her yere koymuştum. Mantık basitti: önceden indirirsek hızlı olur. LCP metriği ise tam tersini söylüyordu. Biraz kazınca şunu öğrendim, hint’ler ücretsiz değil. Yanlış kullanılan preload, asıl kritik kaynakla bant genişliği yarışına giriyor.
Üç hint üç farklı problemi çözüyor.
Preconnect: Tarayıcıya “şu origin ile bağlantı kurmaya başla” der. DNS lookup, TCP handshake ve TLS negotiation’ı erkene çeker. Google Fonts, analytics, CDN gibi üçüncü taraf sunucular için mantıklı. Süresi kısıtlı, 10 saniye içinde kaynak istemezseniz tarayıcı bağlantıyı kapatabiliyor. Bu yüzden içinde ama sadece gerçekten kullanılacak origin’ler için.
Preload: “Şu kaynağı şimdi indir, biraz sonra kullanacağım” der. Font, kritik CSS, above-the-fold görsel, hero video. Render engelleyici olmayan ama kritik olan şeyler. Yanlış kullanımının en büyük sebebi as niteliğini atlamak. as="font" yazmadan font preload ederseniz tarayıcı iki kez indiriyor. Aynı şekilde font preload’ların crossorigin olması lazım.
Prefetch: “Bu kullanıcı büyük ihtimalle sonraki sayfaya geçecek, arka planda indir” der. Idle durumda, düşük öncelikle çalışır. E-ticaret’te ürün listesinden detay sayfasına geçişte veya blog’da sonraki yazıya geçişte anlamlı.
Bir müşterinin e-ticaret sitesinde hero image için preload ekledim. LCP 3.8 saniyeden 2.1 saniyeye düştü. Çünkü bu görsel HTML parse edildikten sonra CSS üzerinden bulunuyordu, yani tarayıcı görseli geç keşfediyordu. Preload bu gecikmeyi ortadan kaldırdı.
Ama aynı sitede iki analytics script için de preload yazmıştım. LCP metriğinin dalgalanma sebebi oymuş. Analytics script zaten defer çalışıyordu, preload ekleyince tarayıcı onu kritik kabul edip kaynaklarını oraya yönlendirdi. Preload’ları kaldırdım, LCP 1.8 saniyeye indi.
Font yüklemesinde preload’ın kritik olduğu bir durum daha var. Web font CSS içinden geldiği için tarayıcı CSS’i parse edene kadar font’un varlığını bilmiyor. Bu FOIT veya FOUT yaratıyor. Critical font’u preload etmek bu gecikmeyi azaltıyor.
Prefetch konusunda dikkatli olmak lazım. Her yere prefetch koyarsanız arka planda bir sürü kaynak indirilip hiç kullanılmıyor. Mobil kullanıcının data planını yiyorsunuz. Quicklink tarzı akıllı prefetch kütüphaneleri var, viewport’a giren linkleri önden çekiyor. Blog sitemde kullanıyorum, sonraki yazıya geçiş algılanır algılanmaz açılıyor.
En ağır hata şu: aynı kaynağa hem preload hem normal link vermek. Tarayıcı cache key’leri farklı olursa ikinci kez indirebiliyor. Özellikle font dosyalarında bu tuzağa düştüm. crossorigin niteliği eşleşmiyordu.
DNS-prefetch de var ama modern tarayıcılarda preconnect’in alt kümesi gibi davranıyor. Sadece çok sayıda origin’e bağlanıp preconnect slot’larını tüketmek istemediğiniz durumlarda ayrı değeri var.
Son bir pratik ipucu, hint’lerin işe yarayıp yaramadığını Lighthouse veya WebPageTest’in waterfall görünümünde görebiliyorsunuz. Kaynak ne zaman istendi, ne zaman başladı, hint ne kadar avantaj sağladı. Bu metrikleri takip etmeden hint eklemek karanlıkta ok atmak gibi.