Preconnect mi Dns-Prefetch mi?
Her ne kadar da herkesin amacı web performans bütçesini azaltmak da olsa mutlaka üçüncü parti servislerden faydalanmak gerekir. Bu servisleri kullanırken, sayısına da bağlı olacak şekilde "DNS lookup" süreleri bütçe tüketecek boyuta gelebilir. Bu yüklemeler daha önce işlediğimiz First Contentful Paint(FCP) de olmak üzere sayfa hızını etkileyecek bir çok noktayı etkiler.
Bu iki kavramın da amacı üçüncü parti bağlantı sürelerini optimize etmektir.Bu iki kavramı ve aradaki farkları anlamadan önce üçüncü parti istek yapıldığında tam olarak neler olduğunu anlamak gerekir:
- Verilen domain çözümlenerek IP adres alınır.
- Sunucu ile bağlantı kurulur.
- Bağlantı güvenli hale gelecek şekilde şifrelenir.
Yani her bir üçüncü parti bağlantının hepsinde bu hiyerarşi tekrarlanır. Tam da bu nokta aslında preconnect ve dns-prefect arasında farkı bize verecektir.
- Preconnect: Yukarıdaki belirtilen üç adımın da baştan kurgulanmasını sağlar.
- DNS-Prefetch: Sadece ilk adım olan alan adını IP adresine çevirmeye yarar.
Buradan da anlayabileceğiniz gibi preconnect daha kapsamlı ve faydalıdır. Ancak her şeyin bir maliyeti var. Tüm bağlantılarınızda preconnect kullanmanız da sayfanın optimizasyonuna zarar verecek nitelikte olabilir. Bu sebeple preconnect'i sadece kritik bağlantılarda kullanmanız, kalan tüm üçüncü parti bağlantılar için dns-prefetch'i kullanmanız gerekiyor.
Bu kadar bilgi vermişken kullanımlarını da kısaca özetlemek gerekirse;
- <link rel="preconnect" href="https://third-party-example.com">
- <link rel="dns-prefetch" href="https://third-party-example.com">
Kullanımlarından bahsetmişken tarayıcı geçerliliğine de değinmezsek olmaz. Birbirine çok paralel bu iki kavramın günümüzdeki tarayıcılarda yaygın olarak kullanılabildiğini görüyoruz ancak tam olarak kullanımlar da örtüşmüyor. preconnect'in geçerli olduğu tarayıcıları ve dns-prefect'in geçerli olduğu tarayıcıları incelediğimizde birebir örtüşmediğini anlayabiliriz. Preconnect daha geçerli olarak %90'a yakın tarayıcılarda destek bulurken, dns-prefetch %81 tarayıcılarda kullanılabiliyor(Nisan 2021 itibariyle).
Web performans bütçesine ne kadar katkı sağlıyorlar?
Preconnect kullanımı toplamda 100-500ms arası hızlanma sağlarken, dns-prefetch bağlantı başına 20-120ms arasında hızlanma sağlayabiliyor(Kaynak: web.dev). İlk fırsatta kendi testlerimizi yaparak daha tatmin edici yerel örnekler vermek istiyoruz.
Bu yazıyı hazırlarken düşünce olarak bana çok katkı sağlayan yerli kaynak Ceyhun Enki Aksan'ın blogunu da tavsiye ederek kaynak göstermek isterim: https://ceaksan.com/tr/dnsprefetch-prefetch-preconnect-ve-prerender
Kaynak: https://web.dev/preconnect-and-dns-prefetch/, https://gtmetrix.com/preconnect-to-required-origins.html