Herkesin hedefi web performansı bütçesini azaltmak olsa da yine de üçüncü taraf hizmetlerinden yararlanmak gerekiyor. Bu hizmetleri kullanırken "DNS araması" kez, hizmet sayısına bağlı olarak bütçenin önemli bir bölümünü tüketebilir. Bu yükler, First Contentful Paint (FCP) dahil olmak üzere sayfa hızının çeşitli yönlerini etkiler.
Bu iki konseptin amacı üçüncü taraf bağlantı sürelerini optimize etmektir. Bu iki kavram arasındaki farkları anlamadan önce, üçüncü taraftan bir talep yapıldığında tam olarak ne olduğunu anlamak gerekir:
- Etki alanı bir IP adresi alacak şekilde çözümlenir.
- Sunucu ile bağlantı kurulur.
- Güvenliği sağlamak için bağlantı şifrelenir.
Bu hiyerarşi her üçüncü taraf bağlantısı için tekrarlanır. Ön bağlantı ile dns-önceden getirme arasındaki farkın devreye girdiği yer burasıdır.
- Ön bağlantı: Yukarıda belirtilen üç adımın tamamının önceden yapılandırılmasını sağlar.
- DNS-Önceden Getirme: Yalnızca ilk adımda alan adını bir IP adresine dönüştürmeye yarar.
Gördüğünüz gibi ön bağlantı daha kapsamlı ve faydalı. Ancak her şeyin bir bedeli vardır. Tüm bağlantılarınız için ön bağlantıyı kullanmak sayfanızın optimizasyonunu olumsuz etkileyebilir. Bu nedenlepreconnect'i yalnızca kritik bağlantılar için kullanmalı ve diğer tüm üçüncü taraf bağlantıları için dns-prefetch'i kullanmalısınız..
Kullanım Özeti
Yukarıdaki bilgiler göz önüne alındığında, kullanımlarının kısa bir özetini burada bulabilirsiniz:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Tarayıcı Uyumluluğu
Kullanımlarını tartışırken tarayıcı uyumluluğundan da bahsetmek önemlidir. Birbiriyle yakından ilişkili olan bu iki kavram, modern tarayıcılar tarafından geniş çapta desteklenmektedir, ancak kullanımları tamamen örtüşmemektedir. Ön bağlantı tarayıcıların yaklaşık %97'si tarafından desteklenmektedir, süre dns-prefetch, tarayıcıların %83'ü tarafından desteklenmektedir (Haziran 2024 itibarıyla).
Web Performans Bütçesine Katkı
- Ön bağlantı, toplam hız artışı sağlayabilir 100-500ms.
- DNS-Prefetch her bağlantıyı şu şekilde hızlandırabilir: 20-120ms.
Daha tatmin edici yerel örnekler sunmak için kendi testlerimizi yapmayı planlıyoruz.
Son olarak bu yazıyı hazırlarken anlamama büyük katkı sağlayan Ceyhun Enki Aksan'ın blogunu tavsiye etmek ve kaynak göstermek isterim: Ceyhun Enki Aksan'ın Blogu.
