Merhaba arkadaşlar, bugün başımı çok ağrıtan bir konudan bahsedeceğim. Sayfa yükleme hızı optimizasyonu yaparken, dış script'leri nasıl eklediğimizin ne kadar kritik olduğunu biliyorsunuz. Ben de "defer" ve "async" özelliklerini kullanırken, hangisinin ne zaman doğru olduğunu karıştırıyordum. Öyle ki, analytics script'im bazen çalışmıyor, bazen de jQuery'ye bağımlı bir plugin DOM'a erişemiyordu. İşte bu kafa karışıklığını gidermek için kendi kendime bir yükleme sırası diyagramı ve basit bir karar ağacı oluşturdum. Sizinle de paylaşmak istiyorum.
Karşılaştığım Sorun ve Kafa Karışıklığı
Projemde birkaç tane üçüncü parti script (analytics, sosyal medya widget'ı, bir chat uygulaması) vardı. Hepsi de `<head>` içine eklenmişti ve sayfa yüklenene kadar bekliyordu, bu da ilk anlamlı çizimi (FCP) geciktiriyordu. "Hadi bunları `async` yapayım, hızlansın" dedim. Ama bu sefer de, sıraya ihtiyaç duyan script'ler (önce jQuery, sonra slider plugin'i gibi) bozuldu. İşte o zaman `defer` ve `async`'in sadece "sayfayı bloklamama" değil, aynı zamanda "yürütme sırası" garantisi verip vermediği konusundaki kritik farkı iyice anlamam gerekti.
Yükleme Sırası Diyagramım
Aklımda canlanması için basit bir diyagram çizdim. Diyelim ki HTML belgemizde şu üç script var:
Normal (Özelliksiz) Script: İndirilirken HTML ayrıştırmayı DURDURUR. İndirilir, çalıştırılır, ancak ondan sonra ayrıştırma devam eder. Sıra garantisi vardır.
Async Script: HTML ayrıştırmayı DURDURMAZ. İndirilme sırasında ayrıştırma devam eder. Script indirilir indirilmez, ayrıştırma DURUR[/COLOR] ve script hemen çalıştırılır. Sıra garantisi YOKTUR. Hangi script önce indirilirse o önce çalışır.
Defer Script: HTML ayrıştırmayı DURDURMAZ. İndirilme işlemi arka planda olur, ancak çalıştırılması için tüm HTML belgesinin ayrıştırılmasının bitmesi BEKLENİR. Çalıştırma sırasında, belgede yazıldıkları sıra garantisi VARDIR.
Hangi Durumda Hangisini Seçmeliyim? (Karar Ağacım)
İşte benim artık her yeni script eklerken sorduğum soruların oluşturduğu basit karar ağacı:
1. Script'in DOM'a veya diğer script'lere bağımlılığı var mı? (Örn: jQuery ve onun eklentileri)
Evet ise -> `defer` kullan. Sıra garantisi sağlar ve DOM hazır olur.
Hayır ise -> 2. soruya geç.
2. Script'in mümkün olan en kısa sürede, sıra gözetmeden çalışması kritik mi? (Örn: Bir reklam pixel'i veya gerçek zamanlı bir sayaç)
Evet ise -> `async` kullan. En hızlı şekilde yüklenip çalışacaktır.
Hayır ise -> Yine `defer` kullanmak genelde daha güvenli ve optimize bir seçenektir.
Bu karar ağacına göre, benim projemdeki çözüm şöyle oldu:
Özet ve Sonuç
Kısacası, `async` "acelesi olan, bağımsız" script'ler içindir. `defer` ise "sabırlı, sırasını bekleyen veya DOM'a ihtiyaç duyan" script'ler için biçilmiş kaftan. İkisi de sayfa oluşturmayı bloklamaz, ama yürütme davranışları çok farklıdır.
Artık bu diyagram ve karar ağacı sayesinde script'lerimi eklerken kafam rahat. Siz hangi senaryolarda `async` veya `defer` kullanıyorsunuz? Hiç sıra garantisi olmaması yüzünden `async` kullandığınız bir script beklenmedik bir hataya neden oldu mu? Yorumlarda deneyimlerinizi paylaşın!
Karşılaştığım Sorun ve Kafa KarışıklığıProjemde birkaç tane üçüncü parti script (analytics, sosyal medya widget'ı, bir chat uygulaması) vardı. Hepsi de `<head>` içine eklenmişti ve sayfa yüklenene kadar bekliyordu, bu da ilk anlamlı çizimi (FCP) geciktiriyordu. "Hadi bunları `async` yapayım, hızlansın" dedim. Ama bu sefer de, sıraya ihtiyaç duyan script'ler (önce jQuery, sonra slider plugin'i gibi) bozuldu. İşte o zaman `defer` ve `async`'in sadece "sayfayı bloklamama" değil, aynı zamanda "yürütme sırası" garantisi verip vermediği konusundaki kritik farkı iyice anlamam gerekti.
Yükleme Sırası DiyagramımAklımda canlanması için basit bir diyagram çizdim. Diyelim ki HTML belgemizde şu üç script var:
HTML:
<script src="analytics.js"></script>
<script src="ui-library.js"></script>
<script src="page-specific.js"></script>Normal (Özelliksiz) Script: İndirilirken HTML ayrıştırmayı DURDURUR. İndirilir, çalıştırılır, ancak ondan sonra ayrıştırma devam eder. Sıra garantisi vardır.
Async Script: HTML ayrıştırmayı DURDURMAZ. İndirilme sırasında ayrıştırma devam eder. Script indirilir indirilmez, ayrıştırma DURUR[/COLOR] ve script hemen çalıştırılır. Sıra garantisi YOKTUR. Hangi script önce indirilirse o önce çalışır.
Defer Script: HTML ayrıştırmayı DURDURMAZ. İndirilme işlemi arka planda olur, ancak çalıştırılması için tüm HTML belgesinin ayrıştırılmasının bitmesi BEKLENİR. Çalıştırma sırasında, belgede yazıldıkları sıra garantisi VARDIR.
Hangi Durumda Hangisini Seçmeliyim? (Karar Ağacım)İşte benim artık her yeni script eklerken sorduğum soruların oluşturduğu basit karar ağacı:
1. Script'in DOM'a veya diğer script'lere bağımlılığı var mı? (Örn: jQuery ve onun eklentileri)
Evet ise -> `defer` kullan. Sıra garantisi sağlar ve DOM hazır olur.
Hayır ise -> 2. soruya geç.
2. Script'in mümkün olan en kısa sürede, sıra gözetmeden çalışması kritik mi? (Örn: Bir reklam pixel'i veya gerçek zamanlı bir sayaç)
Evet ise -> `async` kullan. En hızlı şekilde yüklenip çalışacaktır.
Hayır ise -> Yine `defer` kullanmak genelde daha güvenli ve optimize bir seçenektir.
Bu karar ağacına göre, benim projemdeki çözüm şöyle oldu:
HTML:
<!-- Sıra önemli: Önce kütüphane, sonra onu kullanan kod -->
<script src="jquery.min.js" defer></script>
<script src="slider-plugin.js" defer></script>
<!-- Sıra önemsiz, hemen çalışsın: Analytics -->
<script src="analytics.js" async></script>
<!-- DOM'a bağımlı ama sıra önemsiz: Sayfa hazır olduğunda çalışsın yeter -->
<script src="lazy-load-images.js" defer></script>Kısacası, `async` "acelesi olan, bağımsız" script'ler içindir. `defer` ise "sabırlı, sırasını bekleyen veya DOM'a ihtiyaç duyan" script'ler için biçilmiş kaftan. İkisi de sayfa oluşturmayı bloklamaz, ama yürütme davranışları çok farklıdır.
Artık bu diyagram ve karar ağacı sayesinde script'lerimi eklerken kafam rahat. Siz hangi senaryolarda `async` veya `defer` kullanıyorsunuz? Hiç sıra garantisi olmaması yüzünden `async` kullandığınız bir script beklenmedik bir hataya neden oldu mu? Yorumlarda deneyimlerinizi paylaşın!