DNS-Prefetch, Prefetch, Preconnect ve Prerender Kullanımı

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 edilen¹ Lighthouse analiz motoru² ile de geliştiricilerin performans değerlendirmelerine ve önerilere web, komut satırı ve Chrome DevTools üzerinden erişebilmeleri³ mümkün hale gelmiş oldu. Hatta Chrome Dev Summit 2018‘de ilgili daha pek çok konu aktarıldı⁴. 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ştirilmekte⁵.

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ır⁶: “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.