Ön yüz (frontend) geliştiricilerin ve site hızlandırma uzmanlarının geceler boyu PageSpeed raporlarında “Main Thread Blocking” (Ana İş Parçacığı Engelleniyor) uyarısıyla savaşırken sığındığı o efsane performans hamlesine geldik.

Tarayıcılar aptaldır. HTML kodunu yukarıdan aşağıya doğru okurken karşılarına bir JavaScript dosyası çıktığında dururlar, o kodun inmesini ve çalışmasını beklerler. Sitenin tasarımı arkada bomboş beklerken kullanıcının parmağı ekranda kalır. İşte bugün, tarayıcıya “Sen işine bak, sayfayı çiz; JavaScript’leri arkadan yavaşça erteleyerek getir” demenin en temiz yolunu, yani Defer ve Async mekanizmalarını masaya yatırıyoruz.

Kolları sıva, tarayıcıların render motorlarını ateşlemeye gidiyoruz!

JavaScript Dosyalarını Ertelemek (Defer) Site Hızını Nasıl Artırır?

Lighthouse veya GTmetrix performans raporunu açtın, sitenin adresini yazdın ve karşına o kocaman, kırmızı ve sinir bozucu uyarı çıktı: “Eliminate render-blocking resources” yani “Oluşturmayı engelleyen kaynakları eleyin”. Altındaki listeye bakıyorsun; eklentilerin, temaların veya harici araçların yüzlerce kilobaytlık .js uzantılı JavaScript dosyaları alt alta dizilmiş, sana bakıyor.

Sitenin HTML ve CSS kodları arkada hazır beklerken, tarayıcının o ağır JavaScript dosyalarını indirip çalıştırmak için tüm sayfa yükleme sürecini durdurması tam bir performans faciasıdır. Kullanıcı ekrana bakar, site yükleniyor gibi görünür ama hiçbir şeye tıklayamaz. 2026 yılı Core Web Vitals dünyasında bu durum, doğrudan düşük PageSpeed skoru ve Google sıralamalarında amansız bir düşüş demektir.

Peki bu düğümü nasıl çözeceğiz? Çözüm, HTML5 ile hayatımıza giren ve tarayıcının çalışma mantığını tamamen değiştiren küçük ama ölümcül derecede etkili iki nitelikte saklı: defer ve async. Bu rehberde, JavaScript dosyalarını ertelemenin sitenin hız damarlarını nasıl açtığını ve kod mimarisine bunu nasıl entegre edeceğini tüm çıplaklığıyla inceliyoruz.

Tarayıcılar JavaScript Kodlarını Görünce Neden Kilitlenir?

Olayın derinine, tarayıcının (Chrome, Safari, Edge) render motorunun anatomisine inelim. Tarayıcı sitenin kaynak kodlarını yukarıdan aşağıya doğru satır satır okur (buna Parsing denir).

<!-- Standart Çalışma Modu (Bloke Edici) -->
<script src="agir-kodlar.js"></script>

<!-- Standart Çalışma Modu (Bloke Edici) -->
<script src="agir-kodlar.js"></script>

Okuma esnasında yukarıdaki gibi standart bir script etiketine rastladığı an, tarayıcı tüm HTML okuma işlemini askıya alır. Ağ üzerinden agir-kodlar.js dosyasını indirmeye başlar. Dosya indikten sonra JavaScript motoru (V8 vb.) bu kodları satır satır çalıştırır (execute). Tüm bu süreç bitene kadar HTML ağacı (DOM) inşa edilemez. Kullanıcı sitenin alt kısmındaki bir görseli veya metni göremez. İşte biz buna Render Blocking (Oluşturmayı Engelleyen) Kaynak diyoruz.

Defer ve Async: Siber Kapıcılara Yeni Emirler Vermek

HTML5 mimarisi, tarayıcının bu hantal yapısını çözmek için bize iki harika asistan verdi. Script etiketinin içine ekleyeceğin tek bir kelime, tarayıcının tüm indirme ve çalıştırma hiyerarşisini baştan aşağı değiştirir.

1. Defer Niteliği Nedir ve Nasıl Çalışır?

defer, kelime anlamıyla “ertelemek” demektir. Tarayıcıya şu emri verir: “Bu JavaScript dosyasını görüyorsun ya, HTML’i okumayı sakın bırakma. Sen sayfayı çizmeye devam et, bu dosyayı da arka planda çaktırmadan indir. Sayfanın tüm HTML yapısı (DOM) tamamen kurulup bittiğinde, bu dosyayı çalıştırırsın.”

<!-- Optimize Edilmiş Defer Modu -->
<script src="tema-fonksiyonlari.js" defer></script>

<!-- Optimize Edilmiş Defer Modu -->
<script src="tema-fonksiyonlari.js" defer></script>

• Sıralama Garantisi: Sitede birden fazla defer içeren script varsa, bunlar kodda yazılış sırasına göre (script1.js önce, script2.js sonra) sırayla çalıştırılır. Bu sayede kodlar arasındaki bağımlılıklar (dependency) asla kırılmaz.

2. Async Niteliği Nedir ve Nasıl Çalışır?

async, yani “asenkron/eşzamanlı” mod, tam bir bencil canavardır. Tarayıcıya der ki: “HTML’i okumaya devam et ama bu dosyayı da arka planda indirmeye başla. Dosyanın indirilmesi bittiği milisaniyede, HTML okumayı hemen durdur, benim kodlarımı çalıştır, işim bittikten sonra HTML’i okumaya devam edersin.”

<!-- Agresif Async Modu -->
<script src="google-analytics.js" async></script>

<!-- Agresif Async Modu -->
<script src="google-analytics.js" async></script>

• Sıralama Yoktur: Hangi async dosya internet hattından daha hızlı inerse, ilk o çalışır. Sıralama garantisi olmadığı için birbirine bağımlı çalışan kodları (Örn: jQuery ve ona bağlı bir eklenti) async yaparsan site patlar, konsolda “undefined” hataları uçuşur.

Defer ve Async Arasındaki Farklar (Savaş Tablosu)

Hangi kodu nereye koyacağını şaşırmaman için bu iki gücü en kritik performans parametrelerine göre karşı karşıya getirelim:

JavaScript Ertelemenin Core Web Vitals Metriklerine Etkisi

Kodlarına defer eklediğinde, Google PageSpeed Insights panellerindeki metriklerin nasıl yeşile döndüğünü göreceksin. Peki bu teknik olarak nasıl gerçekleşiyor?

1. TBT (Total Blocking Time – Toplan Bloke Süresi) Düşer: TBT, tarayıcının ana iş parçacığının (Main Thread) 50 ms’den fazla kilitli kaldığı anların toplamıdır. Ağır JavaScript’leri erteleyerek tarayıcının işlemcisini (CPU) rahatlatırsın ve TBT süresini sıfıra yakın çekersin.
2. LCP (Largest Contentful Paint) Süresi Çakılır: Tarayıcı JavaScript indirmekle uğraşmadığı için sitenin en büyük görselini veya metin bloğunu ekrana çok daha hızlı basar. Kullanıcı siteyi anında açılmış gibi hisseder.
3. FID ve INP (Etkileşim Duyarlılığı) İyileşir: Sitenin HTML yapısı erken kurulduğu için kullanıcı sitede bir menüye veya butona bastığında tarayıcı donmadan anında tepki verir (INP < 200 ms standardı yakalanır).

WordPress Sitemizde JavaScript Dosyalarını Nasıl Erteleriz?

Eğer kodları elinle yazmıyor, bir WordPress altyapısı kullanıyorsan, tüm eklentilerin script etiketlerine elinle defer eklemek tam bir işkence olabilir. Bunu otomatize etmenin profesyonel yolları var:

• Eklenti Kullanarak (En Kolayı): LiteSpeed Cache, WP Rocket veya Autoptimize eklentilerinden birini kur. Ayarlar menüsünden “JavaScript Dosyalarını Erttele” (Defer JavaScript) seçeneğini aktif et. Eklenti, sitenin kaynak kodundaki tüm <script> etiketlerini tarayıp sonlarına otomatik olarak defer niteliğini yerleştirecektir.
• Tema functions.php Dosyasına Kod Ekleyerek: Eklenti yükleyip siteyi yormak istemiyorsan, aktif temanın functions.php dosyasının en altına şu filtre kodunu ekleyerek tüm harici scriptleri otomatik olarak defer moduna alabilirsin:

function siteportal_defer_scripts( $tag, $handle, $src ) {
    // Admin panelindeyken kodları erteleme, panel bozulmasın
    if ( is_admin() ) return $tag;
    
    // Whitelist: Sadece belirli scriptleri hariç tutmak istersen burayı kullanabilirsin
    if ( strpos( $handle, 'jquery.min.js' ) !== false ) return $tag;
    
    // Standart script etiketine defer niteliği enjekte et
    return str_replace( ' src', ' defer src', $tag );
}
add_filter( 'script_loader_tag', 'siteportal_defer_scripts', 10, 3 );

function siteportal_defer_scripts( $tag, $handle, $src ) {
    // Admin panelindeyken kodları erteleme, panel bozulmasın
    if ( is_admin() ) return $tag;
    
    // Whitelist: Sadece belirli scriptleri hariç tutmak istersen burayı kullanabilirsin
    if ( strpos( $handle, 'jquery.min.js' ) !== false ) return $tag;
    
    // Standart script etiketine defer niteliği enjekte et
    return str_replace( ' src', ' defer src', $tag );
}
add_filter( 'script_loader_tag', 'siteportal_defer_scripts', 10, 3 );

💡 Teknik İpucu (Expert Box)

Bunu biliyor muydunuz? 2026 web dünyasında sadece defer kullanmak yetmiyor. Eğer harici bir sunucudan (Örn: Google Fonts veya harici bir CDN kütüphanesi) bir JavaScript dosyası çağırıyorsan, defer niteliğinin yanına mutlaka dnsprefetch veya preconnect niteliğini de eklemelisin. Tarayıcı HTML’i okurken daha o script satırına gelmeden önce, arkada sessizce o harici sunucunun DNS adresini çözer ve el sıkışır (handshake). Kod satırına sıra geldiğinde ağ bağlantısı hazır olduğu için indirme işlemi milisaniyeler kazanır!

<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.0/chart.umd.js" defer></script>

<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.0/chart.umd.js" defer></script>

Sonuç: Tarayıcının Önündeki Barikatları Kaldırın

JavaScript dosyalarını ertelemek, karmaşık kod optimizasyon süreçlerine girmeden bir web sitesinin açılış hızını dramatik bir şekilde artırmanın en akıllıca ve maliyetsiz yoludur. Tarayıcıya sayfayı çizmesi için özgürlük tanıdığında, o da seni hızlı yüklenen sayfalar, mutlu kullanıcılar ve Google sıralamalarında roketleyen organik hitlerle ödüllendirecektir. Araç kutundaki script etiketlerini hemen kontrol et ve barikatları temizle!

Sen kendi projelerinde bugüne kadar hangi erteleme metodunu kullandın? Defer ekledikten sonra sitendeki slider veya menülerin çalışmasında bir bozulma (çakışma) yaşadın mı? Yorumlara yaz, konsoldaki JavaScript hatalarını ve PageSpeed raporlarını birlikte temizleyelim!