Sayfa Hızını İyileştirmek İçin WordPress'te JavaScript Nasıl Ertelenir

Gönderen

Açık Nisan 15, 2025

yorumlar kapalı

WordPress sayfalarının yavaş yüklenmesinin başlıca nedenlerinden biri, render-blocking JavaScript'tir. Bu betikler, bir tarayıcının içeriği, özellikle de katlamanın üst kısmını ne kadar hızlı görüntüleyebileceğini geciktirir. JavaScript yüklemesini erteleyerek, PageSpeed Insights gibi araçlarda sayfa hızını, kullanıcı deneyimini ve performans puanlarını iyileştirebilirsiniz.

Render-Blocking JavaScript Nedir?

Bir tarayıcı HTML'de bir JavaScript dosyasıyla karşılaştığında <head>, betiği indirmek, ayrıştırmak ve yürütmek için işlemeyi duraklatır. Bu, sayfanın kullanıcıya ne kadar çabuk görünür hale geleceğini geciktirir.

Render-blocking JS'nin yaygın kaynakları:

Tema ve eklenti betikleri (kaydırıcılar, açılır pencereler, animasyonlar gibi)
Harici scriptler (Google Analytics, Facebook Pixel, vb.)

Arasındaki Fark Nedir? `ertelemek` Ve `asenkron`?

asenkron: HTML ayrıştırmayı engellemeden betiği indirir. İndirdikten hemen sonra çalıştırır — sıra önemliyse çakışmalara neden olabilir.
ertelemek: Ayrıca engelleme olmadan indirme yapar, ancak HTML ayrıştırma tamamlanana kadar yürütmeyi geciktirir — bağımlı betikler için daha güvenli ve daha iyidir.

Sorunlu JavaScript Nasıl Belirlenir

Hangi betiklerin oluşturmayı engellediğini görmek için bu araçları kullanın:

Sayfa Hızı İçgörüleri
Chrome DevTools → Lighthouse sekmesi
Chrome DevTools → Ağ → JS'ye göre filtrele

JS dosyalarının yüklenmesine odaklanın <head> ve “render-blocking” olarak işaretlendi.

WordPress'te JavaScript Nasıl Ertelenir

Seçenek 1: Kodla Erteleme Ekle (Eklenti Yok)

Bu kodu alt temanıza ekleyin fonksiyonlar.php başvurmak ertelemek jQuery hariç tüm betiklere:

işlev add_defer_attribute($tag, $handle) {
// jQuery'yi atla
eğer ('jquery-core' === $handle || 'jquery' === $handle) {
$tag'i döndür;
}
str_replace(' src', ' src'yi ertele', $tag) döndür;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Seçenek 2: Async kullanın

Ertelemeye benzer şekilde şunu kullanabilirsiniz: asenkron bunun yerine — yukarıdaki kodda `defer`'i `async` olarak değiştirin. Ancak dikkatli olun: bazı betikler yükleme sırasına bağlıdır ve bozulabilir.

OKUMAK Your Online Store Feels Slow but PageSpeed Says 95? The Truth About Filters, Variations, and Lost Customers — and How to Fix It

Eklentileri Kullanma (Dikkatli Olun)

Eğer koda dokunmak istemiyorsanız, bu eklentiler JS'yi ertelemenize veya asenkronize etmenize olanak tanır:

**WP Rocket** – Kullanımı kolay, iyi çalışıyor, ancak ücretli.
**Varlık Temizleme** – Belirli betikleri manuel olarak ertelemenize veya devre dışı bırakmanıza olanak tanır.
**Uçan Komut Dosyaları** – Hafiftir ve gecikmeden sonra JS'yi ertelemeye odaklanır.

⚠️ Etkinleştirdikten sonra her zaman test edin; yanlış betiği ertelemek sitenizin düzenini veya işlevselliğini bozabilir.

Etkiyi Nasıl Test Edebilirsiniz

Öncesinde/sonrasında PageSpeed Insights veya GTmetrix kullanın
Görünür sorunları tespit etmek için sitenizi gizli bir pencerede açın
DevTools → Ağ sekmesini kullanın → yükleme sırasını ve zamanlamasını kontrol edin

Sonuç: Stratejik olarak erteleyin

JavaScript'i ertelemek, WordPress sitenizi hızlandırmak için en basit ama en güçlü tekniklerden biridir. Güvenli betiklerle başlayın, jQuery'i ertelemekten kaçının (satır içi yapmadığınız sürece) ve iyice test edin.

Daha ileri gitmek ister misin? SpeedWP Pro'dan ücretsiz bir performans denetimi talep edin ve maksimum sonuç için komut dosyalarınızı ve yükleme stratejinizi optimize etmenize yardımcı olacağız.

Blog