JavaScript Kaynakların Yüklenmesinde Async ve Defer

Kaynak kod içerisinde doğru kurgulanmadığı ve konumlanmadığı takdirde SEO uzmanları için tam bir baş belası olan JavaScript’ler, render-blocking kaynaklardır ve bu yönüyle page speed optimizasyonu kapsamında ilk akla gelen geliştirme alanlarından olmalıdır.

En basit şekliyle, web sayfası yüklenirken JavaScript dosyaları tarayıcı tarafından indirilir ve çalıştırılır, bu süreç de HTML’in render sürecini (render-blocking) durdurur.

Burada JavaScript’lerin page speed üzerindeki etki düzeyini belirleyen iki noktaya değinerek başlayalım.

Kaynak kod içerisinde çok fazla JavaScript yer alıyorsa bu durum çoğu zaman bir sorundur. Request sayısını optimize etmek adına anlamlı bir şekilde JS’lerin birleştirilmesi gerekebilir. Tabi bu da her zaman çözüm değildir çünkü yüksek boyutlu JS’ler de problemdir. Ya da JS’lerin işlevine bağlı olarak page bazlı ayrıştırmak da çoğu zaman çok zor olsa da bir seçenektir.

JavaScript dosya boyutlarının büyük olması (kaynağın işlevine bağlı elbette değişir fakat 100 kb altında kalmak, ideal senaryoda 300 kb üzerine çıkmamak önemlidir) da page speed açısından ciddi sorundur. Bu tip durumda JS’leri minification ve compression ederek boyutları küçültmemiz gerekir.

En makul yaklaşım, mevcut durumu analiz ederek ihtiyaçlara bağlı bir strateji ortaya koymak, JS’lerin split ya da concatenation kararını ihtiyaç üzerinden vermektir. SEO’nun her alanında olduğu gibi burada da ezbere ya da standart bir yaklaşımla hareket etmek bence hatalıdır.

JS’lerin optimize ederken doğru kullandığımız takdirde efektif sonuçlar almamıza yardımcı olacak iki güzel attribute’den bahsedeceğim bugün; async ve defer.

Konuyu detaylandırmaya başlamadan önce https://flaviocopes.com/javascript-async-defer/ kaynağında yer alan ve async ve defer kullanımını özetleyen üç güzel görsel ile genel bir görünüm sunmak istiyorum.

head İçerisinde Defer ve Async Kullanılmadığı Durum

Browser, defer ya da async tanımlaması yapılmadığında script’leri getirmek ve çalıştırmak için HTML’in parse edilmesini durdurur.

head İçerisinde Async Kullanıldığı Durum

Script, HTML parse edilirken getirilir, script’in çalıştırılması için parse süreci durur ve script çalıştırıldıktan sonra HTML’in parse edilmesi devam eder.

head İçerisinde Defer Kullanıldığı Durum

HTML parse edilirken script getirilir ve parse süreci bittiğinde script çalıştırılır. Script, HTML parse edilirken indirildiği için çalıştırılması çok daha hızlı olur.

Script’in indirilmesi ve çalıştırılması süreçleri ile HTML parsing süreci arasındaki ilişkiyi göstermesi açısından bu örnekler müthiş olmuş bence. Aynı kaynakta ilgili attribute’lerin body içerisindeki kullanımlarına ilişkin örnekler de yer alıyor. İncelemenizi tavsiye ederim.

Async Nedir?

JavaScript’ler, aksi belirtilmediği senaryoda senkronize çalışır yani bir js dosyasının render’ı bitmeden diğer JS dosyası oluşturulmaz. Tam bu noktada async attribute devreye girer.

Async, web sayfasının içeriği yüklenirken belirli kaynakları (burada JS’lerden bahsediyoruz) eş zamanlı yükleme tekniği olarak tanımlanır.

Peki JavaScript’leri async yüklemenin SEO açısından etkileri nelerdir?

1. Page load time’ı iyileştirir ve bu yönüyle yalnızca kullanımı deneyimi değil googlebot açısından deneyime de temas ederek crawl budget’ın gelişimini destekler.
2. Kısaca HTML ve CSS’in tam olarak yüklenip görüntülenmesini engelleyen render-blocking durumunu minize etmek adına async kullanılır. Tabi garanti bir çözüm olmadığını, etki düzeyinin kaynak koda bağlı olduğunu ifade etmek gerekir.
3. Async ile beraber JS’ler arka planda yüklendiği ve çalıştırıldığı için kullanıcının sayfayı daha hızlı görüntüleme ve etkileşime geçme olasılığı artar.

JavaScript’lerde async yükleme için;

“<script src=”example.js” async></script>”

formatının kullanılması yeterlidir. Altını çizmemiz gereken nokta, inline JS’lerde async attribute kullanımının söz konusu olmadığıdır.

Sync ve async yükleme teknikleri arasındaki farkı aşağıdaki görsel çok net bir şekilde gösterir;

Tabi bu demek değildir ki tüm JavaScript dosyalarını async bir şekilde yükleyelim ve CRP’yi (Critical Rendering Path) optimize edelim. Burada elbette dikkat edilmesi gereken bazı noktalar ve potansiyel dezavantajlar mevcuttur.

Şimdi bu dezavantajlara bakalım ve olası dezavantajları ortadan kaldırmak adına alabileceğimiz önlemlerden bahsedelim.

Async Yüklemenin Potansiyel Dezavantajları

Async yüklemede risk oluşturan temel iki nokta vardır. Bu noktalardan ilki; tüm JS’leri aynı anda çalıştırmanın SSR’de çalışan siteler için sunucuda yaratacağı yüktür. İkincisi ise JS’lerin işlevleri itibariyle kullanıcı deneyimini negatif etkileme ihtimalidir.

Aynı anda birçok JS’in yüklemesi sunucuya yük bindirebilir. Özellikle yüksek trafik ve zayıf sunucu konfigürasyonu durumlarında async tekniği hassas kullanılmalıdır. Tabi burada modern sunucuların bu kullanımı sorunsuz bir şekilde handle ettiğinin altını çizmek gerekir. Yani kısaca amatör bir sunucu konfigürasyonunuz yoksa async yükleme sorun olmayacaktır.

Aynı anda birçok request’in geldiği noktada sunucu tarafında sorun yaşamamak adına;

• http/2 ya da http/3 gibi aynı anda birden fazla request’i yönetmeyi sağlayan ve browser ile sunucu arasındaki iletişimi hızlandıran yapılar kullanmak.
• Sunucuya anlamsız bir yük binmesini engellemek adına content’i lokasyon bazlı serve etmeyi sağlayan CDN yapısına geçmek.
• Request’lerin birden fazla sunucuya dağıtılmasını sağlayan load balancer (yük dengeleyici) kullanmak.
• Daha yüksek bant genişliği olan bir sunucuya geçiş yapmak.

alternatiflerini değerlendirebiliriz.

Async yüklenen JS’lerin yürütme sırası garanti değildir. Browser, JS’leri yüklediği anda çalıştırır. Dolayısıyla dosyaların yanlış sırayla çalışması muhtemeldir. Burada sorun yaşamamak adına JS’lerin işlevlerini bilmek gerekir. Sunucu üzerindeki olası negatif etkisinden çok daha kritik bir nokta burası. Async kullanımı durumunda sayfanın bazı bölümlerinin işlevsel olmaması ya da çalışmaması gibi durumlarla sıklıkla karşılaşılır. Bu da tabi ki kullanıcı açısından kötü bir deneyimdir.

Kısaca, farklı herhangi bir dosya formatına bağımlı dosyalar için async kullanmak mantıklı değildir çünkü bu durumlarda JS’lerin yanlış sırayla çalışma ihtimalinin kullanıcı deneyimini negatif etkileme olasılığı hayli yüksektir.

Defer Nedir?

Web sayfalarının yüklenmesi esnasında JavaScript kaynakları optimize etmemize yardımcı olacak tanımlamalardan biri de defer’dir.

Defer, web sayfası oluşturulurken kaynak kod içerisindeki JavaScript’lerin es geçilmesini ve bu JS’lerin tüm sayfa oluşturulduktan sonra çalışmasını sağlar.

Örnek Tanımlama: “<script src=”ornek.js” defer></script>”

Burada temel amacımız, web sayfası yüklenirken ilk anda gerekli olmayan JavaScript’ler ile zaman kaybedilmesini engellemek yani kullanıcıları işlevsel sayfa formatına en hızlı sürede ulaştırmaktır.

Site hızı ve kullanıcı deneyimi arasındaki ilişkiyi göz önünde bulundurduğumuzda, doğru kurguda (özellikle async ile entegre şekilde) kullanıldığı takdirde defer tanımlamasının belirgin gelişim fırsatı sunduğunu net bir şekilde ifade edebiliriz.

Hangisini Tercih Etmeliyiz? Defer ve Async Arasındaki Fark

Yukarıda defer ve async tanımlarını yaparken farkı da net bir şekilde ortaya koyduk aslında.

• Async yüklemede script arka planda indirilir ve hemen sonrasında çalıştırılır.
• Defer tanımlamasında ise script arka planda indirilir fakat DOM’un tamamı yüklendikten sonra DOMContentLoaded öncesinde sıralı bir şekilde çalıştırılır.

Tekniklerin kullanımıyla ilgili kesin kurallar elbette mevcut değildir. Burada belirleyici olan, JS’lerin işlevidir.

Örneğin; web sitenizindeki chatbot’a işlev veren JavaScript dosyasının async bir şekilde çalışmasının mantığı yoktur çünkü bu işlevin ilk anda var olması kullanıcı için kritik değildir. Dolayısıyla bu JavaScript dosyasına defer tanımlayabilirsiniz.

Async kullanımında ise script’in bağımsız olması yani diğer script’lere ya da HTML’e bağlı olmaması belirleyicidir. Bu tip durumlarda async kullanımı doğru bir tercih olacaktır.

Örneğin; analitik araçlar (google tag manager ve google analytics gibi. Amacımız kullanıcı verilerine hızlı bir şekilde erişmek.) ve reklam (tabolaa ve visilab gibi) script’leri için async tercih etmek mantıklıdır çünkü bu script’ler tanım itibariyle bağıl olmayan yapılardır.

Sözün özü; mutlaka defer ya da async kullanmalıyız noktasından uzaklaşmalı, bu attribute’lerin mantığını anlamalı ve ihtiyaçları dikkate alarak kaynak koddaki JavaScript kurgusunu bu bakış açısıyla oluştmalıyız.

Yazıyı sonlandırmadan önce, defer’in yarattığı etki ve anlam düzeyi itibariyle async attribute’e kıyasla bir adım daha önde ve daha yoğun kullanım alanına sahip olduğunu söylemeliyim.