Konu
- #Tarayıcı Optimizasyonu
- #Kaynak Yükleme
- #Sayfa Yükleme
Tarayıcılar genellikle aşağıdaki sırayla render işlemini gerçekleştirir.
- html ayrıştırma (yukarıdan aşağıya head -> body):
1. HTML ayrıştırma ve DOM oluşturma
2. CSS dosyalarının yüklenmesi ve uygulanması (render işlemini engeller)
3. Scriptlerin yüklenmesi ve çalıştırılması (render işlemini engeller)
4. <body> bölümünün içeriğinin render edilmesi (resim, metin vb.)
Tarayıcının kaynak önceliklerini kontrol ederek sayfa yükleme hızını optimize edebilirsiniz.
Aşağıdaki render sırasını iyileştirmek için kullanılabilecek önemli öznitelikleri kaydetmek istiyorum.
- JavaScript: async, defer, module
- CSS: preload, media
- Görüntüler: loading="lazy", srcset, sizes
- Diğerleri: prefetch, preconnect, dns-prefetch
JavaScript
async : html ayrıştırma ile paralel olarak indirilir ve indirildikten hemen sonra çalıştırılır. Sayfanın herhangi bir kaynağı bu js ile ilgiliyse async etiketi kaldırılması daha iyi olur.
defer : html ayrıştırma ile paralel olarak indirilir ve html ayrıştırma tamamen bittikten sonra çalıştırılır. = Sıra garanti edilir. Html'nin tamamen render edildikten sonra çalıştırılması gerekiyorsa defer etiketi eklemek daha iyi olur.
Tarayıcı varsayılan olarak önce html'yi yükler, ancak head etiketi içinde script kaynağı varsa render işlemi engellenir. Yukarıdaki iki etiketi ekleyerek html render işleminin engellenmesini önleyebilirsiniz.
CSS
styleshee : Varsayılan değerdir. Render işlemini engelleyen bir unsurdur ve css'nin mutlaka yüklenmesi gerekiyorsa kullanılır.
preload : Render işlemini engellemeden önceden indirilir. onload olayı oluştuğunda stylesheet olarak değiştirilir ve stil uygulanır.
media: Ekran boyutu koşuluna uyduğunda render edilir.
Görüntüler
loading="lazy" : Görüntü ekranda göründüğünde yüklenir. (Kaydırmanın konumu görüntünün bulunduğu öğenin yakını olduğunda)
srcset : Ekran boyutuna uygun en iyi görüntüyü seçer. (Görüntü boyutu optimizasyonu)
sizes : Tarayıcının viewport boyutuna göre uygun görüntüyü seçmesi için ipucu sağlar.
Son img etiketinde, width'i 480px ve 1024px olan görüntüler varsa, size özniteliği sayesinde max-width 600px ise 480px'lik görüntü, aksi takdirde 1024px'lik görüntü gösterilir.
* E-ticaret sitelerinde bir sayfada onlarca görüntü olduğundan, görüntü boyutlarını küçültmenin etkisi büyüktür.
Örneğin, arama sonuçları sayfasında en az 20 görüntü bulunur ve arama işlemi günde 100.000 kez gerçekleştirilirse...
Diğerleri
rel="prefetch": Sayfaya geçmeden önce kaynakları önceden indirerek sonraki sayfadaki yükleme hızını iyileştirir.
rel="preconnect": Belirli bir bağlantı için ağ bağlantısı önceden kurulur. (Büyük boyutlu video, yazı tipi vb.)
rel="dns-prefetch": Harici kaynakların dns'sini sorgulayarak kaynakları daha hızlı yükler. (Genellikle harici CDN)
* preconnect vs dns-prefetch
preconnect, tcp bağlantısı (dns - tcp handshake - tls handshake) olduğundan, tarayıcı kaynağını kullanan ağır bir işlemdir. Harici kaynakların hızlı yüklenmesi gerektiğinde kullanılır. (Çok önemli bir kaynaktır ve bu kaynağın hızlı render edilmesi önemlidir)
dns-prefetch yalnızca dns'yi sorguladığı için daha hafif bir işlemdir. Önemsiz bir kaynaktır ve daha sonra çağrıldığında uygundur.
Yorumlar0