DNS prefecth, Web sitelerinde içerik zenginleştikçe sayfa indirme boyutu bu zenginlikle beraber büyüyor ve performans iyileştirmeleri ihtiyacı her geçen gün daha da artıyor. Performans iyileştirmesi yapmanın yeni yollarından biri DNS prefetch’dir. Bu yol ile genellikle CDN kullandığımız kaynakların DNS çözümlemesi için kaybettiği süre ile sayfanın yüklenme süresini geciktirebiliyor böylelikle kullanıcı deneyimi olumsuz yönde etkileniyor. İşte tam da bu sorunu çözmek için DNS prefetch kullanacağız.
DNS Prefetch Nedir, Neden Kullanılır?
Örnek bir dns prefecth kodu altta yer almaktadır.
1 | <link rel="dns-prefetch" href="//fonts.google.com/"> |
Üstteki kod ile tam olarak şunu diyoruz; “fonts.google.com adresini veri transferi için kullanacağım ama kullanacağım zaman dns çözümlemesi v.s. ile uğraşmamak için önceden dns çözümlemesini yap ve fonts.google.com adresinden herhangi bir kaynak kullanmak istediğim zaman dns çözümlemesi ile uğraştırma beni” böylelikle hızlıca kaynağa erişiyor olacağız.
http:// veya https:// eklemeyin, bunun yerine // kullanın. Bu şekilde, protokol ne olursa olsun DNS’yi çözecektir.
✨ Birden fazla dns-prefetch tanımlayabiliyor muyum?
Evet birden fazla prefetch tanımlaması yapabiliyorsunuz alttaki gibi istediğiniz kadar dns-prefetch link etiketi tanımlayabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="//ajax.googleapis.com"> <link rel="dns-prefetch" href="//cdnjs.cloudflare.com"> </head> <body> </body> </html> |
🔗 Hangi adresleri kullanabilirim?
Adres tanımlama ile ilgili herhangi bir sınır bulunmamaktadır. En sık kullanılan cdn adreslerlerinin örnek dns-prefetch tanımlarına ise alttaki kod bloklarından gözatabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!-- Google CDN --> <link rel="dns-prefetch" href="//ajax.googleapis.com"> <!-- Google API --> <link rel="dns-prefetch" href="//apis.google.com"> <!-- Google Fonts --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <!-- Google Analytics --> <link rel="dns-prefetch" href="//www.google-analytics.com"> <!-- Google Tag Manager --> <link rel="dns-prefetch" href="//www.googletagmanager.com"> <!-- Google Publisher Tag --> <link rel="dns-prefetch" href="//www.googletagservices.com"> <!-- Google AdSense --> <link rel="dns-prefetch" href="//adservice.google.com"> <link rel="dns-prefetch" href="//pagead2.googlesyndication.com"> <link rel="dns-prefetch" href="//tpc.googlesyndication.com"> <!-- Google Blogger --> <link rel="dns-prefetch" href="//bp.blogspot.com"> <link rel="dns-prefetch" href="//1.bp.blogspot.com"> <link rel="dns-prefetch" href="//2.bp.blogspot.com"> <link rel="dns-prefetch" href="//3.bp.blogspot.com"> <link rel="dns-prefetch" href="//4.bp.blogspot.com"> <!-- Microsoft CDN --> <link rel="dns-prefetch" href="//ajax.microsoft.com"> <link rel="dns-prefetch" href="//ajax.aspnetcdn.com"> <!-- Amazon S3 --> <link rel="dns-prefetch" href="//s3.amazonaws.com"> <!-- Cloudflare CDN --> <link rel="dns-prefetch" href="//cdnjs.cloudflare.com"> <!-- jQuery CDN --> <link rel="dns-prefetch" href="//code.jquery.com"> <!-- Bootstrap CDN --> <link rel="dns-prefetch" href="//stackpath.bootstrapcdn.com"> <!-- Font Awesome CDN --> <link rel="dns-prefetch" href="//use.fontawesome.com"> <!-- Facebook --> <link rel="dns-prefetch" href="//connect.facebook.net"> <!-- Twitter --> <link rel="dns-prefetch" href="//platform.twitter.com"> <!-- Linkedin --> <link rel="dns-prefetch" href="//platform.linkedin.com"> <!-- Vimeo --> <link rel="dns-prefetch" href="//player.vimeo.com"> <!-- GitHub --> <link rel="dns-prefetch" href="//github.githubassets.com"> <!-- Disqus --> <link rel="dns-prefetch" href="//referrer.disqus.com"> <link rel="dns-prefetch" href="//c.disquscdn.com"> <!-- Gravatar --> <link rel="dns-prefetch" href="//0.gravatar.com"> <link rel="dns-prefetch" href="//2.gravatar.com"> <link rel="dns-prefetch" href="//1.gravatar.com"> <!-- BuySellads --> <link rel="dns-prefetch" href="//stats.buysellads.com"> <link rel="dns-prefetch" href="//s3.buysellads.com"> <!-- DoubleClick --> <link rel="dns-prefetch" href="//ad.doubleclick.net"> <link rel="dns-prefetch" href="//googleads.g.doubleclick.net"> <link rel="dns-prefetch" href="//stats.g.doubleclick.net"> <link rel="dns-prefetch" href="//cm.g.doubleclick.net"> |
✅ Sonuç
Eğer çok fazla farklı domainlere sahip CDN adresleri kullanıyorsanız performans olarak kazanç sağlayabileceğiniz bir teknik olduğunu söylemek gerekiyor ve bu tekniğin uygulanmasınında bir link etiketine bakıyor. Oldukça basit bir kullanım şekli olduğunu görüyorsunuz.
🌏 Tarayıcı Desteği
Alttaki tablodan Opera Mini hariç tüm tarayıcılar tarafından desteklendiğini görüyoruz.
📚 İlgilenebileceğiniz Bazı Makaleler
- Javascript fetch fonksiyonu ile http işlemleri
- Javascript XMLHttpRequest İle GET-POST İşlemlerini Gerçekleştirme
📚 Kaynaklar
✏️ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Elinize sağlık, eksik birkaç tane link vardı siteme ekledim şuan.
Teşekkürler
harika bir kaynak. teşekkürler
Teşekkürler