DNS-Prefetch, Prefetch, Preconnect ve Prerender Kullanımı
Web sayfalarıyla ilgili performans değerlendirmelerinde erişim sağlanan sayfalar genel hatlarıyla değerlendirildiğinde (concatenation, minification, caching, gzipping…) pek çok araçtan / servisten faydalanmak gerekebilmekte.
Search Console başta olmak üzere pek çok alternatif ücretli ve ücretsiz olarak kullanılabilmekte. Bu sürecin yanı sıra elbette kaynak yönetimi (Örneğin; prefetching) de göz önünde bulundurulması gereken bir konu ve yine Google tarafından sunulan PageSpeed Insights (PSI) ayrı bir önem kazanmış durumda. Yakın zamanda PSI‘ya dahil edilen1 Lighthouse analiz motoru2 ile de geliştiricilerin performans değerlendirmelerine ve önerilere web, komut satırı ve Chrome DevTools üzerinden erişebilmeleri3 mümkün hale gelmiş oldu. Hatta Chrome Dev Summit 2018‘de ilgili daha pek çok konu aktarıldı4. Aşağıda bu etkinlikten öne çıkan sunumları ayrıca iletiyorum.
İnternet tarayıcılarının daha da akıllanması ve etkileşimli bir şekilde iş birliği sağlayabilir hale gelmeleriyle birlikte -elbette bu süreçte web uygulamalarının çok büyük bir etkisi var- kullanma imkanına kavuştuğumuz pek çok özellik / teknik var. Bunlardan ilki olan prefetching özetle tarayıcıya gelecekte (işlem sıralamasında bir sonraki aşamada) kullanılması muhtemel veya kesinlikle kullanılacak olan kaynaklar hakkında bilgi vermek şeklinde ifade edilebilir. Bu sayede tarayıcı verilen ipuçları doğrultusunda geçerli sayfa ve/veya sonraki sayfa hakkında ön bir bilgiye sahip olmakta ve buna uygun olarak davranabilmektedir. Bu süreç genel tanım itibariyle prebrowsing olarak nitelendirilmektedir. Modern tarayıcıların istek yapılmadan önce sitenin hangi bağlantılara ihtiyaç duyulabileceğini tahmin etmek için en iyisini ortaya koymaya çalıştıklarını düşünürsek bu tekniklerin zamanla daha da etkin çözümler üretebileceğini düşünebiliriz. Elbette süreci sadece prefetching ile sınırlandırmamak gerekir. Farklı özellikler barındıran diğer teknikler ise şöyle:
- DNS-Prefetch
- Prefetch (standart teknik)
- Preconnect
- Prerender
- Preload
Şimdi, sırasıyla bu tekniklere bir göz atalım.
DNS-Prefetch
DNS-Prefetch, istemciye belirtilen URL üzerinden ilerleyen süreç içerisinde çeşitli varlıklar (görsel, ses dosyası, video vb.) edinebileceğimizi ve internet tarayıcısının bu işlemler öncesinde ve eğer mümkünse hızlı bir şekilde DNS çözümlemesi yapması gerektiğini bildirir. <head>...</head>
etiketleri arasına eklenecek örnek kullanım şu şekildedir:
Bu tanımlama sonrasında, belirtilen URL’den bir varlık istediğimizde artık DNS çözümlemesini beklemek durumunda kalmayız. DNS-prefetching özellikle 3. parti servislerden kaynak edindiğimiz süreçlerde etkili bir yöntem olarak değerlendirilebilir. Unutmadan, bu işleme benzer bir yöntem Google Chrome tarafından da hali hazırda gerçekleştirilmekte5.
Preconnect
Preconnect, DNS-Prefetch tekniğine ek olarak TCP anlaşmasının (handshake) ve isteğe bağlı olarak TLS anlaşmasının (negotiation) da yapılmasını sağlar. En temel kullanımı şu şekildedir:
Prefetch
Prefetching, süreç içerisinde kullanılacak kaynakların belirli olduğu durumlarda (bu kaynaklar aynı domain ya da farklı domainler altında olabilir) tarayıcıdan ilgili kaynaklar üzerinden istenecek varlıkları önceden talep etmesini ve daha sonra kullanılmak üzere önbellekte saklamasını sağlar. Örneğin, bir resim, ses dosyası ya da script önceden önbelleğe kayıt edilerek gerekli olduğu durumda buradan çağırılabilir. Örnek kullanımı şu şekildedir:
Bu teknikte, DNS-prefetching tekniğinden farklı olarak belirtilen kaynağın kesinlikle kullanılacağını bilerek hareket eder ve bilgili varlığın önbelleğe alınmasını isteriz. Unutmadan, tarayıcılar bu süreci farklı ele alabilirler. Örneğin, istemci yavaş bağlantı nedeniyle dosya isteğini göz ardı edebilir ve/veya Firefox gibi bazı tarayıcılar da süreci sadece boşta iken (“the browser is idle”) ele almak isteyebilirler.
Prerender
Prerender, diğer tekniklerden daha geniş bir kapsamda, belirtilen belgenin tüm varlıklarının önbelleğe alınmasını sağlar. Bir URL’i ayrı bir tab altında açtığımı varsayalım. Arka planda ilgili tab açılacak ve içeriği yüklenecektir. Siz ilgili tab’ı tıkladığınızda her şey hazırdır. İşte prerender aşağı yukarı bu şekilde işler; tüm kaynaklar indirilir, DOM oluşturulur, CSS ve JS içeriği uygulanır. Örnek kullanımı şu şekildedir:
İlgili sayfa içeriğinde bir sonraki muhtemel sayfadan emin iseniz prerender ile içeriğin önceden hazırlanmasını sağlayabilirsiniz. Bu sayede kullanıcı prerender edilmiş sayfaya (href
) ait bağlantıya geçiş yaptığında sayfanın yüklenmesi için ayrıca beklemeyecektir. Google Search bu özelliği Instant Pages adı altında uzun zamandır kullanmaktadır. Unutmadan, bu özellik ziyaretçiye ekstra yük getirecektir. Bu nedenle ilgili tekniği belirtilen (href) bağlantının ziyaretçi tarafından ziyaret edileceğinden emin iseniz tercih etmelisiniz.
Preload
Preload, tarayıcıya fikir vermekten öte tarayıcı tarafından bir varlığın mutlak olarak edinilmesi gerektiğini belirtir. Prefetching ise göz ardı edilebilir bir nitelik sunmaktadır. Şimdilik yaygın bir şekilde desteklenmese dahi ilerleyen zaman içerisinde oldukça ilgi çekici bir yapı sunacağı aşikar. Örnek kullanımları şu şekildedir:
Preload edilmesini istediğimiz bağlantılar CORS etkin kaynaklara sahip ise crossorigin özelliğini eklememiz gerekir. Ek olarak as
ile style ve script dosyalarını açık bir şekilde belirtmekteyiz.
Destekleyen tarayıcıların tutumlarına bakacak olursak;
- Preload kullanımında, Chrome kaynak yüklendikten 3 saniye sonra eğer kullanılmamışsa bir uyarı yazdırır6: “The resource was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate 'as' value and it is preloaded intentionally.“
- Tarayıcılar genellikle fetching sürecini orta (medium) öncelikle değerlendirir.
İlgili işlemlere dair ek okumalar için şu içeriklere göz atabilirsiniz.
- Resource Hints – What is Preload, Prefetch, and Preconnect?
- Prefetching, preloading, prebrowsing
- Front-end performance for web designers and front-end developers
- Link prefetching @wikipedia
- Using Preload and Prefetch in Your HTML to Load Assets
- Link prefetching FAQ @Mozilla
- Preloading content with rel=”preload” @Mozilla
- Preload: What Is It Good For?
- PageSpeed Insights ↩
- Rui Chen, Paul Irish, PageSpeed Insights ve Lighthouse takımları. (2018). PageSpeed Insights, now powered by Lighthouse ↩
- How To Think About Speed Tools. Web fundamentals ↩
- Chrome Dev Summit 2018 - All Sessions. Youtube ↩
- lya Grigorik. (2013). High Performance Networking in Google Chrome ↩
- Chrome Warning message regarding not using preloaded chunks. GitHub ↩