Lazy Load ve SEO Uyumluluğu

Sayfa performansı, yüksek trafik hedefleyen siteler için en önemli konulardan biridir. Bu tarz projelerde sayfa yüklemesini yavaşlatacak her unsurdan kaçınmak gerekiyor.

Lazy load sayfa hızını optimize etmede en çok bilinen yöntemlerden birisi. Bu şekilde sayfa performansına dikkat etmenin sitenize olan kimi faydaları şöyle:

1. Kullanıcı siteye giriş yaptığında baştan sona tüm içerikler yerine sadece görünen alanın görselleri yükleneceği için, sayfa daha hızlı açılır.

2. Kullanıcı girişi ve sadece sayfada gözükmesi gereken içeriklerin yüklenmesi, sayfadaki daha hızlı yüklenmesine yardımcı olur. Bu sayede kullanıcı deneyimini olumlu yönde etkiler.

3. Sayfa hızlı açıldığı ve trafik yoğunluğu az olduğu için, kullanıcının aradığı bilgiye erişimi daha hızlı olur. Bu da yine daha iyi bir kullanıcı deneyimi demektir.

4. Google botları kullanıcı deneyimini göz önünde bulundurarak sayfanızı aramalarda daha görünür kılar.

Aslında sayfa performansını lazy load’a başvurmadan da arttırabileceğiniz çeşitli yollar var. Bu yollar CDN kullanımından kodları daha optimize yazmaya ve çağırmaya, görsel formatından font yüklemelerine kadar birçok konuyu kapsıyor. Google’ın fast load times adıyla derlediği makalesinde bunların hepsini görebilirsiniz.

Çeşitli Kullanım Yolları

Lazy load ile birlikte SEO uyumluluğu sağlamanın birçok yolu var. Bunlardan bazılarını aşağıdaki şekilde derledim:

1- Görsellere lazy loading özelliği tanımlamak artık tüm browser’lar tarafından destekleniyor. Benzer şekilde <iframe> elementine de lazy özelliği vermek mümkün (ben bu satırları yazarken her browser desteklemiyordu). Bu şekilde ekstra bir kod gerektirmeden browser üzeriden lazy load işlemi kolaylıkla gerçekleştiriliyor.

<img width="400" height="300" src="article.jpg" 
alt="..." loading="lazy">
<iframe loading="lazy">

Görselin width ve height’ını önceden belirtmiş olmak, ufak ama önemli bir faktör olarak öne çıkıyor. Normalde browser görseli çağırana kadar boyutlarını bilmemiş oluyor. Ama inline olarak spesifik tanımlamalar yapılması halinde, browser sayfayı yüklerken boyutu da bildiği için yapıyı daha hızlı oluşturuyor. Bu da süreden kazanmak demek aslında.

2- Video’ları embed olarak dışarıdan çağırarak sayfanın ilk yükleme anındaki yükünü azaltabilirsiniz. Benzer şekilde video thumbler’ına placeholder olarak daha düşük boyutta görsel ekleyebilirsiniz.

3- Interection observer api ile sayfadaki içeriklerin ne zaman nasıl render’lanacağını belirleyebilirsiniz. Aslında bu api ile, aşağıda yine değineceğim gibi, sadece görsellerin değil section veya div gibi alanların ve menülerin dahi ne zaman ne hızda yükleneceğini belirlemek mümkün.

Örneğin aşağıdaki örnekte, ekran, lazy load özelliği vermek istediğimiz #scrollArea alanına 20px yaklaşınca yüklemeye başlasın ve 1 saniye sürsün dedik.

let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '20px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, 
options);

Benzer şekilde, alan görünür olduğunda çeşitli event’ler kullanabilir, class’lar ekleyebilirsiniz. DOMContentLoaded kullanarak sayfadaki tüm görsel, metin gibi elementleri seçerek lazy-load özelliği verebilirsiniz. Böylece her bir element ile tek tek ilgilenmek gerekmeyecek.

Aşağıdaki örnekte de kısaca, api devreye girdiğinde lazyImage’ın dosya kaynağı değişsin, ‘lazy’ class’ı kalksın dedik.

if ("IntersectionObserver" in window) {
 let lazyImageObserver = new IntersectionObserver(
function(entries, observer) {
 entries.forEach(function(entry) {
 if (entry.isIntersecting) {
 let lazyImage = entry.target;
 lazyImage.src = lazyImage.dataset.src;
 lazyImage.classList.remove("lazy");
 }
 });

4- Eğer Twitter gibi çok sayıda içeriğin veya başlığın akacağı bir sayfa tasarlıyorsanız, yine intersection observer ile continuous scroll özelliği kazandırabilirsiniz. Bunun için, ilk verdiğim örnekteki gibi, her bir yazının ne zaman yüklemeye başlayacağını belirlemek gerekiyor. Bu şekilde browser akış sırasında sadece tek bir alandaki yazı ve görseli yüklemeye çalışacak. Ancak böyle bir yapıda Google’ın aşağılarda kalan içerikleri index’lemediğini de belirtmek gerek.

5- Code splitting de denen, HTML, CSS ve JavaScript dosyalarını olabildiğince ayrı parçalara bölerek sadece gerektiği yerlerde çağırabilirsiniz. Defer özelliği çağırılarak scriptlerin yüklemesi sırasında HTML yüklemesinin beklememesini sağlayabilirsiniz. Burada dokümantasyonun karışma ihtimalini göze alarak dikkat etmekte ve aynı kodu birden fazla dokümanda tekrar kullanmamakta fayda var. Chrome ekibinin bu konuyla ilgili geliştirdiği koda ve makaleye bakmak faydalı olacaktır.

try { var scripts = [{{{scripts}}}], src, 
pendingScripts = [], firstScript = document.scripts[0]; 
//polyfil checks and loads here
 if (typeof IntersectionObserver === "undefined" || 
IntersectionObserver.toString().
indexOf("[native code]") === -1) { 
scripts.unshift(
"js/libs/polyfil/intersection-observer.js"
); 
} 
// Watch scripts load in IE 
function stateChange() {
// Execute as many scripts in order as we can 
var pendingScript; 
while (pendingScripts[0] && pendingScripts[0]
.readyState == 'loaded') { 
pendingScript = pendingScripts.shift(); 
// avoid future loading events from this script
// (eg, if src changes) 
pendingScript.onreadystatechange = null; 
// can't just appendChild
// old IE bug if element isn't closed 
firstScript.parentNode.insertBefore(pendingScript, 
firstScript); 
} 
console.log("scripts should be loaded now"); } 
// loop through our script urls 
while (src = scripts.shift()) { 
if ('async' in firstScript) { 
// modern browsers 
script = document.createElement('script'); 
script.async = true; 
script.src = src; document.body.appendChild(script); 
} else if (firstScript.readyState) { 
// IE<10 
// create a script and add it to our todo pile 
script = document.createElement('script'); 
pendingScripts.push(script); 
// listen for state changes 
script.onreadystatechange = stateChange; 
// must set src AFTER adding onreadystatechange
// else we’ll miss the loaded event for cached scripts 
script.src = src; 
} else { 
// fall back to defer 
document.write(
'<script src="' + src + '" defer></' + 'script>'
); 
} 
} 
} 
catch (error) { alert(error); 
} 

6- History api, yukarıda bahsettiğim continuous scroll özelliğine benzeyen bir başka yol. Bu api ile URL’i herhangi bir sunucu işlemi yapmadan değiştirebiliyorsunuz. Üç parametreden oluşan api’de durum, isim ve URL belirtiliyor.

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html"); 

Browser ilgili yere geldiğinde api üzerinden o alanın URL’ine ulaşarak onu adres çubuğuna çağırıyor. Aynı zamanda bu api ile AJAX kullanarak sunucu üzerinden ilgili sayfanın HTML’i çekilebiliyor.

Tüm bu yöntemlere ek olarak, CMS’lerin sunduğu çeşitli plugin’ler, görselleri sıkıştırma gibi şeyler yaparak sizin herhangi bir müdahalenize gerek kalmadan sayfa performansını arttıracak değişiklikler yapıyor. Bu plugin’ler genellikle tek bir ekranda ayarlama yapmaya yetecek kadar basit ara yüzde oluyor. Ancak ek ücretli olabilmesi ve sadece tek bir platform destekleyebildiği için, site taşırken uğraştırıcı olması gibi handikaplar da var.