AngularJS Çözümleri	Prefetching, preloading, prebrowsing ile Web Uygulamanızın Akışını Hızlandırın
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 🙂
Ö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 ? 🙂
<link rel="dns-prefetch" href="//cdnjs.com">
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.
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.
<link rel="prefetch" href="image.png">
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.
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.
<link rel="prerender" href="http://mysite.com/secondpage">
Google bu tekniği senelerdir kullanmaktadır.
Bu teknikleri önce iyice test etmeli ve planlama yapmalısınız. Ama bu uğraşınız karşılıksız kalmayacaktır 🙂
DNS prefetching Prefetching Prerendering pages Subresources	NEXT READING
İncelemeler	Angular 2′ de bizi neler bekliyor ?
Son YorumlarAngularJS ve yeni düzen web uygulamaları için SezginAngular 2′ de bizi neler bekliyor ? için emreFirebase Security | Firebase Güvenliğini Anlamak için ismailAngularJS Scope Giriş için MehmetAngular 2 Başlangıç için AdnanFirebase Security & Rules [Güvenlik ve Kurallar] Giriş için SertaçAngular 2′ de bizi neler bekliyor ? için AdemFirebase Security & Rules [Güvenlik ve Kurallar] Giriş için emreAngular 2′ de bizi neler bekliyor ? için emreFirebase Security & Rules [Güvenlik ve Kurallar] Giriş için SertaçSocial	Angulartr.com