Frontend hızı dendiği zaman hepimizin aklına klasik minification, caching, gzipping, file concate gibi web uygulamamızın yükleniş hızını arttıracak çözümler gelir. Lakin hergün yeni teknikler kullanarak bir adım daha ileriye gitmemiz gerekiyor.

Başlıkta da belirttiğim gibi “pre” ile prefixlenen bu teknikler, ihtiyaçlarımıza önhazırlık yapmamızı sağlıyor. Her zaman bir adım ilerisini düşünen kazanır 🙂

“DNS prefetching”

Örneğin, kullanıcılar sayfanıza girdikten belli bir süre sonra, image, css, js vb. dosyaları uzak bir serverdan yükleyeceksiniz. Yükleme zamanı geldiğinde, tarayıcınızın hedef url’ in dns’ ini resolve etmesi belli bir zaman alacaktır. Lakin,bu resolve etme işlemini öne alsanız ve uzak serverdan dosya yükleme işlemi geldiğinde hiç vakit kaybetmeden bu dosyalar yüklenmeye başlansa nasıl olurdu ? 🙂

Yukarıdaki html satırını sayfamızın head tag’ ine ekliyoruz. Ve kullanıcımız sayfamıza girip herşey yüklendikten sonra, tarayıcı cdnjs.com’ un dns’ ini resolve etmeye başlıyor. Herhangi bir anda, cdnjs üzerinden bir dosya yüklemeye çalıştığımızda, hiç dns resolve ile uğraşmadan dosya indirilmeye başlanıyor.
Bu çözüm require.js ile js dosyaları yüklenirken çok işe yarar. Yada uzak serverdan resim, css yüklerken.

 

“Prefetching”

Kullanıcımız sayfamıza girdi, ilk yüklenmesi gereken image,css,js vb.dosyalar yüklendi. Fakat kullanıcı sayfamızda gezerken, ihtiyaç duyacağı başka dosyalar da olacaktır. Neden bunları önceden yükleyip, tarayıcının cache’ ine atmıyoruz ve, o dosya istendiği zaman cache’ ten çağırıp zaman kazanmıyoruz ?

Dikkat: Bu işlem “the browser is idle” yani Tarayıcı herhangi bir işlem (dosya yükleme) yapmazken gerçekleştirilir. Aksi taktirde kullanıcıyı boş yere bekletmekten başka bir işe yaramazdı. Örneğin kullanıcı sayfamızı açtı herşey yüklendi, sayfamızda bir yazıyı okurken, alttan da bu dosyalar yükleniyor.

 

“Subresources”

Aslında subresources, prefetch ile aynı işi yapar. Aralarındaki tek fark, tarayıcının subresource lara daha öncelik vermesidir.

Yani, bir sayfada subresource ve prefetch item lar varsa, tarayıcı önceliği subresource lara verir. Önce onları yükler, onlardan zaman kalırsa prefetch lere geçer.

 

“Prerendering pages”

Bu özelliği şöyle düşünün;

Gizli sekmede bir adres açmışsınız gibi. Tarayıcı verilen adrese girer, yüklenmesi gerek tüm asset leri yükler. CSS’ i uygular, sayfayı tamamiyle yorumlar. Ve hazırda bekletir. Kullanıcı o adrese gitmeye kalktığında, anında gizli sekmedeki içerik görünür hale gelir.

Diyelim ki birbiri ile ilişkili 2 sayfa var. İlk sayfada bu işlemi uyguladığınızda, kullanıcının 2.sayfaya geçmesi anında gerçekleşecektir.

Google bu tekniği senelerdir kullanmaktadır.

 

Sonuç olarak;

Bu teknikleri önce iyice test etmeli ve planlama yapmalısınız. Ama bu uğraşınız karşılıksız kalmayacaktır 🙂

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir