Dns Prefetch, web sitesine dışarıdan çağrılan kaynakların önceden çözümlenmesini sağlayan etikettir. Sayfa açılışını hızlandırmak için kullanırız. Web sayfası tarayıcı tarafından yukarıdan aşağıya doğru okunur. Eğer bir dış link ile karşılaşırsa önce ilgili kaynağın DNS bilgisini çözümler, sonra veriyi okur. Bu işlem sırasında zaman kaybetmesi web sitenizin hızına olumsuz etki eder. Çözümü ise dns-prefetch etiketini kullanmaktır.
Aşağıdaki örnekte olduğu gibi dışarıdan çağrılan bir kaynak varsa “alan adını” href etiketinin karşısında belirtmelisiniz. İlgili bu satırı, web sitenizin head bölümüne eklemeniz gerekir.
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />Bu sayede tarayıcı, web sitesini okurken DNS”i önceden çözer. Sonra dış kaynak linkinin eklendiği satıra gelindiğinde verileri doğrudan okur. Dışarıdan çok sayıda kütüphane çağırıyorsanız her bir kaynağa ait alan adını belirtmeniz, hız performansınız için katkı sağlayacaktır. Nedenini daha açık anlatalım:
Web sitelerinde esas içerik, öncelikli olarak yüklenmelidir. Zorunlu bir durum yoksa “head” bölümünde CSS veya JS dosyaları tanımlamayız. Bu sayede tarayıcılar, “ilk anlamlı okuma” alanını hızlıca görür. Google bu veriye önem verir. Web sitenizin açılış hızında etkili olduğunu söylemeliyiz.
İçerik > CSS dosyaları > Javascript kütüphaneleri şeklinde yukarıdan aşağıya ekleriz. CSS ve JS”ler body kapanış alanında bulunur.
Tarayıcı, body sonundaki kütüphaneleri okurken, hem dış linke ait DNS”i çözümlemek hem de verileri okuyup yansıtmakla zaman harcar.
Fakat biz head bölümüne DNS Prefetch etiketiyle tanımlama yaparsak bu alana geldiğinde DNS”i çözümlenmiş alan adından veriyi doğruca okur.
Yukarıdaki örnekte Google Fonts dizinine ait DNS çözümlemesini istemiştik. Body kapanışında font tanımları genelde şu şekilde olur:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">Görüleceği üzere verimizi googleapis alan adından çekiyoruz. Fakat bir subdomaine ait. Bu tür durumlarda doğrudan alan adını almak yerine subdomaini (alt alan adını) hedeflemeniz doğru olur. Çünkü kaynağınız subdomain için farklı bir DNS belirlemiş olabilir.
Yeni nesil web sitelerinde pek çok kaynak ve gelişmiş kütüphaneler kullanıyoruz. Web sayfasına dışarıdan en sık çağırdığımız kütüphaneler ise genellikle fontlar oluyor. (Özellikle Google Fonts) Ancak pek çok farklı kaynak olması da muhtemel.
Örneğin Google Tag Manager”ı istatistik ve Ads reklamları için sıklıkla kullanırız. Yine benzer şekilde CDN üzerinde yer alan pek çok kütüphane çekiyoruz. Bu nedenle sık kullanabileceğiniz şu örnekleri web sitenize eklemenizde fayda var.
<link rel="dns-prefetch" href="https://www.googletagmanager.com" /> <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />Konu hakkında Google”ın developers servisinde yer alan makaleyi de okuyabilirsiniz. Makale kaynağı olan dns prefetch nedir blog yazımızı inceleyebilirsiniz.
