Preconnect (Ön Bağlantı) Nedir?

Bir isteğin görünmeyen ön maliyeti

Tarayıcı yeni bir alan adından ilk dosyayı istemeden önce üç iş yapar: alan adını DNS ile IP adresine çevirir, sunucuyla TCP bağlantısı kurar ve HTTPS için TLS el sıkışmasını tamamlar. Bu adımlar birkaç gidiş-dönüş sürer; yüksek gecikmeli mobil ağlarda toplamı kolayca yüzlerce milisaniyeye ulaşır. web.dev, üçüncü taraf kökenlere erken bağlantı kurmanın yükleme süresinde 100–500 ms arası kazanç sağlayabildiğini belirtir.

Normalde bu maliyet, tarayıcı o kökenden bir kaynağa ihtiyaç duyduğunu fark ettiği anda başlar. Font CSS dosyasında, görsel bir JavaScript yanıtında tanımlıysa bu an geç gelir. Preconnect, bağlantı kurulumunu sayfanın başına taşır; dosyanın kendisi henüz bilinmese bile yol hazırlanmış olur.

Yazım ve crossorigin ayrıntısı

<!-- Görsel CDN'i: normal istekler -->
<link rel="preconnect" href="https://img.ornek-cdn.com">

<!-- Font sunucusu: fontlar CORS modunda istenir -->
<link rel="preconnect" href="https://fonts.ornek-cdn.com" crossorigin>

<!-- Daha az kritik köken: yalnızca DNS -->
<link rel="dns-prefetch" href="https://analitik.ornek.com">

Fontlar gibi anonim CORS moduyla istenen kaynaklar ayrı bir bağlantı havuzu kullanır. Font sunucusuna yapılan preconnect'e crossorigin eklenmezse hazırlanan bağlantı font isteğinde kullanılamaz ve emek boşa gider. Aynı ipucu sunucudan Link: <https://img.ornek-cdn.com>; rel=preconnect başlığı olarak da gönderilebilir; bu durumda HTML'in ayrıştırılması beklenmez.

Eski tarayıcılar için dns-prefetch yedeği eklenecekse iki ayrı etiket kullanılmalıdır. İkisini tek bir rel değerinde birleştirmek, web.dev'e göre Safari'de preconnect'in iptal edilmesine yol açan bir hataya neden olur.

Fayda sağlamadığı ve zarar verdiği durumlar

• Aynı köken: Sayfanın kendi alan adına bağlantı zaten açıktır; preconnect'in bir katkısı yoktur.
• Geç kullanılan kökenler: Tarayıcı, yaklaşık 10 saniye içinde kullanılmayan bağlantıyı kapatır. Kullanıcı etkileşiminden sonra yüklenen bir sohbet widget'ı için açılan bağlantı bu sürede ölür ve maliyet iki kez ödenir.
• Çok sayıda preconnect: Her bağlantı CPU ve ağ kaynağı tüketir; on alan adına birden bağlanmak kritik isteklerin önünü kesebilir. Az sayıdaki gerçekten kritik köken dışındakiler için hafif dns-prefetch yeterlidir.
• Tam URL biliniyorsa: İndirilecek dosya belliyse preload hem bağlantıyı açar hem dosyayı getirir; ayrıca preconnect eklemeye gerek kalmaz.

İyi adaylar nasıl seçilir?

DevTools'un Network panelinde ilk saniyelerde istek yapılan üçüncü taraf kökenlere bakın. Sayfanın ilk görünümü için kritik olanlar, yani font sunucusu, LCP görselini sunan CDN ya da içeriği dolduran API, preconnect için iyi adaylardır. Analitik, reklam ve sonradan yüklenen widget'lar ise genellikle bekleyebilir. Değişiklikten sonra waterfall grafiğinde bağlantı adımlarının istekten önceye kaydığını doğrulamak, kazancın gerçek olup olmadığını gösterir.