Web Geliştirmede JavaScript'te `async` ve `defer` ile Sayfa Hızını Artırma Rehberi 
Selam dostlar!
Uzun zamandır forumda takılıyorum ve performans konusunda en sık gözden kaçan, ama etkisi devasa olan bir konuyu ele almak istedim: JavaScript dosyalarını sayfaya nasıl eklediğimiz. 
Hepimiz "sayfam yavaş açılıyor" derdine düşmüşüzdür. Tonla optimizasyon yaparız, resimleri sıkıştırırız, CSS'leri birleştiririz ama bazen en basit çözüm, `<script>` etiketimize ekleyeceğimiz iki küçük kelimede gizlidir: `async` ve `defer`.
Neden önemli? Çünkü tarayıcı, HTML'nizi satır satır işlerken (DOM oluştururken) bir `<script>` etiketiyle karşılaştığında durur, o scripti indirir, çalıştırır ve ancak ondan sonra HTML işlemeye devam eder. Bu, kullanıcının boş bir ekran görmesine neden olabilir. İşte bu iki attribute, bu engeli kaldırmak için var.
1. Klasik Yöntem: Engelleme (Blocking)
En yaygın kullanım budur, ama genellikle en kötüsüdür.
Ne olur? Tarayıcı bu satıra gelir, scripti indirip çalıştırana kadar bekler. Sayfanın geri kalanı bloke olur. Script büyükse veya ağ yavaşsa, felaket.
2. Sihirli Kelime: `async` (Asenkron)
Ne olur? Script asenkron olarak indirilir. Tarayıcı HTML işlemeye devam eder, script arka planda indirilir. İndirilir indirilmez, HTML işlemesi durdurulur ve script hemen çalıştırılır.
3. Akıllı Çözüm: `defer` (Ertelenmiş)
Ne olur? Script asenkron olarak indirilir, ancak çalıştırılması tüm HTML belgesi tamamen ayrıştırıldıktan sonraya ertelenir (DOMContentLoaded olayından hemen önce).
Hangisini Ne Zaman Kullanmalı?
İşte günlük hayattan pratik önerilerim:
Örnek Bir Sayfa Yapısı
İşte tipik bir projemde `<head>` içinde kullandığım sıralama:
Son Söz
Küçük bir değişiklikle (sadece bir kelime ekleyerek!) sayfa yükleme performansınızda gözle görülür bir iyileşme sağlayabilirsiniz. Yeni projelerinizde `defer`'i alışkanlık haline getirin, eski projelerinizi de bu açıdan gözden geçirin. Unutmayın, hızlı bir site, mutlu kullanıcılar ve daha iyi SEO demektir.
Umarım bu rehber işinize yarar. Aklınıza takılan bir şey olursa yorumlarda konuşalım! Kodla kalın.
Selam dostlar!
Uzun zamandır forumda takılıyorum ve performans konusunda en sık gözden kaçan, ama etkisi devasa olan bir konuyu ele almak istedim: JavaScript dosyalarını sayfaya nasıl eklediğimiz. Hepimiz "sayfam yavaş açılıyor" derdine düşmüşüzdür. Tonla optimizasyon yaparız, resimleri sıkıştırırız, CSS'leri birleştiririz ama bazen en basit çözüm, `<script>` etiketimize ekleyeceğimiz iki küçük kelimede gizlidir: `async` ve `defer`.
Neden önemli? Çünkü tarayıcı, HTML'nizi satır satır işlerken (DOM oluştururken) bir `<script>` etiketiyle karşılaştığında durur, o scripti indirir, çalıştırır ve ancak ondan sonra HTML işlemeye devam eder. Bu, kullanıcının boş bir ekran görmesine neden olabilir. İşte bu iki attribute, bu engeli kaldırmak için var.
1. Klasik Yöntem: Engelleme (Blocking)
En yaygın kullanım budur, ama genellikle en kötüsüdür.
Kod:
<script src="analytics.js"></script>2. Sihirli Kelime: `async` (Asenkron)
Kod:
<script async src="analytics.js"></script>
Artısı: İndirme sırasında sayfa render'ı bloke olmaz. Harici bir analiz scripti (Google Analytics, Facebook Pixel) için idealdir.
Eksisi: Scriptlerin yüklenme sırası garanti edilmez. Hangisi önce inerse o çalışır. Birbiri bağımlı scriptlerde (jQuery ve onu kullanan bir plugin gibi) sorun çıkarabilir.
3. Akıllı Çözüm: `defer` (Ertelenmiş)
Kod:
<script defer src="main-app.js"></script>- Artısı: HTML işlemesi asla bloke olmaz. Scriptler, sayfaya yazıldıkları sırayla çalıştırılır. Bağımlılıkları yönetmek çok kolaydır.
- Eksisi: Sayfanın tamamen yüklenmesini beklemek zorundadır. Çok erken çalışması gereken (DOM manipülasyonu yapmayan) scriptler için uygun olmayabilir.
Hangisini Ne Zaman Kullanmalı?
İşte günlük hayattan pratik önerilerim:
- `defer` kullan: Sayfanızın işlevselliği için gerekli tüm ana scriptlerinizde. Özellikle kendi yazdığınız `app.js`, `main.js` gibi dosyalar ve birbirine bağımlı kütüphaneler (jQuery + Bootstrap + özel scriptler) için mükemmeldir. Modern web geliştirmede varsayılan tercihiniz bu olmalı.
- `async` kullan: Sayfanın çalışması için kritik olmayan, bağımsız üçüncü parti scriptlerde. Analytics, reklam scriptleri, sosyal medya widget'ları gibi. Sırası önemli değilse, `async` mükemmel.
- Hiçbirini kullanma (standart): Scriptin hemen çalışması gerekiyorsa ve DOM'u henüz oluşturmadan manipüle ediyorsa (çok nadir bir durum) veya `document.write()` kullanıyorsa.
Örnek Bir Sayfa Yapısı
İşte tipik bir projemde `<head>` içinde kullandığım sıralama:
Kod:
<!DOCTYPE html>
<html>
<head>
<!-- CSS her zaman önce, render'ı bloke etmez -->
<link rel="stylesheet" href="styles.css">
<!-- Kritik OLMAYAN, bağımsız harici script: ASYNC -->
<script async src="https://www.google-analytics.com/analytics.js"></script>
<!-- Ana uygulama script'lerimiz: DEFER -->
<script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script defer src="plugins.js"></script> <!-- jQuery'e bağımlı -->
<script defer src="main-app.js"></script> <!-- Hepsinin üzerinde çalışsın -->
</head>
<body>
<!-- Sayfa içeriği -->
</body>
</html>Son Söz
Küçük bir değişiklikle (sadece bir kelime ekleyerek!) sayfa yükleme performansınızda gözle görülür bir iyileşme sağlayabilirsiniz. Yeni projelerinizde `defer`'i alışkanlık haline getirin, eski projelerinizi de bu açıdan gözden geçirin. Unutmayın, hızlı bir site, mutlu kullanıcılar ve daha iyi SEO demektir.
Umarım bu rehber işinize yarar. Aklınıza takılan bir şey olursa yorumlarda konuşalım! Kodla kalın.