WordPress eklentilerinin asenkron yüklenmesi: Web sitesi hızını ve performansını artırmak için mutlak bir rehber.

Asenkron yükleme (asynchronous loading) nedir ve önemi nedir?

Modern web sitesi geliştirme süreçlerinde, sayfa yükleme hızı, kullanıcı deneyimini ve arama motoru sıralamalarını (SEO) ölçen kritik bir göstergedir. Geleneksel betik yükleme yöntemleri “rendering-blocking” (renderlemeyi engelleyen) şekildedir; bu da tarayıcının HTML’yi analiz etmeyi durdurması ve belirli bir betik dosyasının indirilip çalıştırılmasını beklemesi gerektiği anlamına gelir. WordPress siteniz birden fazla eklenti içerdiğinde, her eklenti kendi JavaScript (JS) ve CSS dosyalarını getirebilir ve bu dosyalar sayfanın baş kısmında veya gövdesinde eş zamanlı olarak yüklenir. Bu durum, sitenin “ilk içerik çizimi” (First Content Paint – FCP) ve “maksimum içerik çizimi” (Last Content Paint – LCP) sürelerini önemli ölçüde yavaşlatabilir.

Asenkron yükleme (Asynchronous Loading), engelleyici olmayan bir betik yükleme tekniğidir. Tarayıcı, içinde asenkron yükleme özelliklerinin bulunduğu bir sayfayla karşılaştığında…async或deferÖzniteliklerin betik etiketleri kullanıldığında, HTML belgesi işlenmeye devam eder ve aynı zamanda betik dosyası da paralel olarak indirilir. İkisi arasındaki temel fark, yürütme zamanlamasındadır:
* asyncScript indirildikten hemen sonra çalıştırılır ve HTML işleme sürecini kesintiye uğratabilir.
* deferSkript, tüm HTML belgesinin analizinin tamamlanmasını (DOM’nin hazır hale gelmesini) bekler ve ardından belgede belirtilen sıraya göre çalıştırılır.

CSS için de, “asenkron yükleme” veya “renderlemeyi engelleyen kaynakların kaldırılması” gibi teknikler kullanılarak, önemli olmayan stil şemalarının (örneğin, ilk ekranın altındaki içerik için kullanılan stil şemalarının) yükleme önceliğini düşürebilirsiniz.

Tavsiye edilen okuma WordPress Web Sitelerinin Hız Optimizasyonu İçin Nihai Kılavuz: Temel Ayarlamalardan Gelişmiş Önbellekleme Stratejilerine。

Asenkron yükleme stratejisi kullanılarak, sosyal medya paylaşım butonları, yorum kutuları, istatistik analiz kodları gibi kritik olmayan eklenti kaynakları ana render yolundan çıkarılabilir. Bu durum iki temel fayda sağlar: Web sitesinin performansını artırarak kullanıcıların sayfa içeriğini daha hızlı görmesini ve etkileşime girmesini sağlar; ayrıca sayfa hızının Google gibi arama motorlarının önemli sıralama faktörlerinden biri olması nedeniyle SEO performansını iyileştirir.

Bir eklentinin kaynaklarının nasıl asenkron olarak yüklenmesi gerektiğini nasıl belirleyebilirsiniz?

Optimizasyona başlamadan önce, hangi eklenti kaynaklarının “renderlamayı engellediğini” doğru bir şekilde belirlemeniz ve hangilerinin asenkron veya gecikmeli yükleme için uygun olduğuna karar vermeniz gerekmektedir.

Performans analiz araçlarını kullanmak

Öncelikle, profesyonel performans test araçlarını kullanarak bir rapor oluşturun. Google PageSpeed Insights, GTmetrix ve WebPageTest harika seçeneklerdir. Bu araçlar, “renderlemeyi engelleyen kaynakların” listesini açıkça belirtir ve her JS ve CSS dosyasının URL’sini, boyutunu ve tahmini zaman tasarrufunu ayrıntılı bir şekilde gösterir. Genellikle, eklenti kataloglarından (örneğin…) gelen dosyalar…/wp-content/plugins/Büyük boyutlu ve ana ekran için gerekli olmayan kaynaklar, öncelikli optimizasyon hedefleridir.

Bir kaynağın önemini belirleme

Her kaynak asenkron işleme uygun değildir. Karar verirken kaynağın işlevine göre hareket etmeniz gerekir:
**Kritik Kaynaklar:** Ana ekranın görselliğini ve işlevselliğini doğrudan etkileyen kaynaklardır. Örneğin, navigasyon menüsü etkileşimleri için kullanılan JS dosyaları veya ana ekran içeriğinin stil şablonları. Bu kaynaklar genellikle eş zamanlı olarak yüklenmeli veya sayfaya doğrudan (inline) eklenmelidir.
Kritik olmayan kaynaklar: Sayfanın alt kısmında bulunan veya kullanıcı etkileşiminden sonra ihtiyaç duyulan işlevler. Tipik örnekler arasında şunlar bulunur:
Sosyal medya paylaşım eklentileri (AddToAny, ShareThis gibi)
Yorum bölümünde JS (örneğin Disqus, varsayılan yorum geliştirme)
Web sitesi istatistiksel analiz kodu (örneğin Google Analytics), resmi olarak asenkron komut dosyalarını tavsiye etse de.
İletişim formu eklentisindeki ilk ekran dışındaki formlar.
Çarpan reklam eklentisindeki ilk ekran olmayan slaytlar.

Basit bir kural şudur: Eğer bir eklentinin özelliği, kullanıcının sayfayı açtığı ilk saniyede tamamen hazır olmasını gerektirmiyorsa, o eklentinin kaynakları asenkron olarak yüklenmelidir.

Tavsiye edilen okuma CDN Teknolojisinin Derinlemesine Analizi: Başlangıçtan Uzmanlığa, Web Sitelerinin Performansı ve Güvenliği İçin Çift Koruma Kalkanı Oluşturma。

Asenkron yükleme işlemlerini gerçekleştirmenin pratik yöntemleri

WordPress eklenti kaynaklarını asenkron yükleme için çeşitli yöntemler bulunmaktadır. Kendi teknik yeteneklerinize göre uygun yöntemi seçebilirsiniz.

Optimize edilmiş eklentiler kullanın (kod gerektirmeyen çözümler).

Çoğu kullanıcı için, özel optimizasyon eklentilerini kullanmak en güvenli ve uygun yoldur. Bu eklentiler, kaynakların yüklenme şeklini kolayca yönetebileceğiniz grafiksel arayüzler sunar.

Önerilen eklentiler: WP Rocket ve Async JavaScript

WP Rocket, güçlü bir önbellekleme eklentisidir ve “Dosya Optimizasyonu” sekmesinde JavaScript’ın gecikmeli olarak yüklenmesini sağlayan seçenekler bulunmaktadır; ayrıca bazı betikleri de devre dışı bırakmanıza olanak tanır. Async JavaScript eklentisi ise bu konuya daha fazla odaklanmaktadır ve neredeyse her betiğe bu özelliği eklemenize imkan verir.async或deferÖzellikleri içerir ve ayrıntılı bir dışlama listesi sunar.

Bu tür eklentileri kullanmanın genel adımları şunlardır: Eklentiyi yükleyip etkinleştirdikten sonra, ayarlar bölümünde JS/CSS optimizasyonu ile ilgili seçenekleri bulun. “JavaScript’in gecikmeli yüklenmesi” veya benzeri özellikleri etkinleştirin. Daha sonra, aracın önceki raporlarına göre, kritik betikleri (örneğin jQuery çekirdek kütüphanesi,DOMContentLoaded olayıyla yakından ilgili betikler) hariç tutma listesine ekleyin; böylece işlevlerin bozulmasını önleyebilirsiniz.

Konu dosyasını manuel olarak düzenleme (kod çözümü)

Eğer daha ayrıntılı bir kontrol istiyorsanız, temayı düzenleyerek bunu yapabilirsiniz.functions.phpBu işlev, bir dosya aracılığıyla gerçekleştirilir. WordPress bunun için gerekli araçları sağlar. script_loader_tag 和 style_loader_tag Filtreler, betiklerin ve stil şemalarının HTML çıktısını değiştirmek için kullanılır.

Tavsiye edilen okuma WordPress Web Sitelerinin Hız Optimizasyonu Kılavuzu: Core Web Vitals’ı Artırmanın Temel Stratejileri。

Aşağıda, hedef betiğe eklenen örnek bir kod bulunmaktadır:deferÖzellikler. Koddaki bu kısmı değiştirmeniz gerekiyor.plugin-script-handleGerçekte işlenecek olan betik işlemcisi (Handle) ile değiştirin.

function add_async_defer_attribute($tag, $handle) {
    // 将要延迟加载的脚本句柄添加到这个数组
    $scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');

foreach($scripts_to_defer as $defer_script) {
        if ($defer_script === $handle) {
            // 使用 defer， 如需 async 则替换为 async='async'
            return str_replace(' src', ' defer="defer" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);

Eklentinin betik işleme mekanizmasını bulmak için, eklentinin ürettiği HTML kaynağını inceleyebilirsiniz veya eklentinin kaynak koduna bakabilirsiniz.wp_enqueue_script()Fonksiyon çağrısının ilk parametresi.

CSS dosyalarının eşzamansız (asynchronous) yüklenmesini işleme

CSS için “önceden yükleme” (preloading) yöntemini kullanabilir ve bunu diğer tekniklerle birleştirebilirsiniz.onloadOlay, bunu engelsiz (non-blocking) bir işlem haline getirir. İşte belirli bir stil şemasının asenkron olarak yüklenmesine dair örnek kod:

function async_load_stylesheets() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
    <?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);

Bu yöntem, şu şekilde çalışır:rel=”preload”Tarayıcıya kaynakları mümkün olan en kısa sürede almalarını söyleyin, ancak bu kaynakları hemen uygulamalarını istemeyin. Kaynaklar yüklendikten sonra, bunları JavaScript aracılığıyla uygulayın.relÖznitelik değiştirildi.stylesheetBöylece stil uygulanır.“JS’yi devre dışı bırakan kullanıcılar için bir geri dönüş planı sağlanmıştır.”

Asenkron yüklemeden sonra yapılan testler ve arıza giderme işlemleri

Asenkron yükleme işlemi uygulandıktan sonra, web sitesinin hızının artırılmasının yanı sıra tüm işlevlerinin de korunduğundan emin olmak için kapsamlı testler yapmak çok önemlidir.

Fonksiyonellik ve Uyumluluk Testleri

Web sitenizin farklı sayfalarında (ana sayfa, makale sayfası, tekil sayfa vb.) manuel testler yapmanız gerekiyor; özellikle de asenkron olarak yüklenen eklentilerin işlevlerine dikkat etmelisiniz. Örneğin:
Asenkron olarak yüklenen sosyal medya düğmelerinin paylaşma penceresini düzgün şekilde açıp açmadığını test edin.
Gecikmeli yüklenen yorum bölümünün, sayfa ilgili konuma kaydırıldığında doğru şekilde oluşturulup oluşturmadığını kontrol edin.
*Tüm etkileşim elemanlarının (örneğin form gönderimi, buton tıklamaları, açılır menüler) düzgün çalıştığını doğrulayın.*

Özellikle şunlara dikkat etmelisiniz:DOMContentLoadedBu, jQuery’nin başlık bölümünde hazır olduğu varsayılan olaylar veya betiklerdir. Eğer bunlar ertelenirse, DOM elemanları bulunamadığı için hatalar oluşabilir. İşte bu yüzden eklentileri optimize ederken “dışlama listeleri”nin ayarlanması çok önemlidir; muhtemelen jQuery’yi (genellikle) bu listelerden hariç tutmanız gerekecektir.jquery-coreBu öğe ve doğrudan bağımlılıkları, asenkron yüklemeden hariç tutulmuştur.

Performans Öncesi ve Sonrası Karşılaştırması

Daha önce bahsedilen performans analiz araçlarını (PageSpeed Insights, GTmetrix) kullanarak web sitenizi yeniden test edin. Optimizasyon öncesi ve sonrası raporları karşılaştırın ve aşağıdaki temel göstergelerdeki değişikliklere dikkat edin:
İlk içerik hazırlaması (FCP): Bariz bir şekilde erken miydi?
Maksimum içerik çizimi (LCP): Maksimum içerik elemanları daha hızlı mı görüntüleniyor?
Hız Endeksi: Sayfa içeriğinin görsel olarak doldurulma hızı artıyor mu?
Toplam engelleme süresi (TBT): Ana iş parçacığı engellendiğinde geçen süre azaldı mı?
“İşlemi engelleyen kaynakları kaldırma” önerisi: Raporda belirtilen sorunlar azaldı mı veya ortadan kalktı mı?

Başarılı bir optimizasyon sonucunda bu göstergelerde belirgin iyileşmeler görülmelidir; aynı zamanda “Fırsatlar” veya “Teşhis” bölümünde renderlama engelleriyle ilgili uyarıların sayısında da azalma olmalıdır.

Eğer bazı özelliklerin bozulduğunu fark ederseniz, lütfen optimizasyon eklentisinin ayarlarına veya kendi kodunuza geri dönün ve soruna neden olan belirli betik işlemlerini asenkron/ertelenmiş yükleme listesinden çıkarın. Arıza giderme işlemi iteratif bir süreçtir ve özellikler ile performans arasında en iyi dengeyi bulmak için birden fazla ayarlama yapmanız gerekebilir.

Özetle.

WordPress eklenti kaynaklarının asenkron olarak yüklenmesi, kanıtlanmış ve etkili bir ön uç performans optimizasyon tekniğidir. Bu teknik, önemli olmayan JavaScript ve CSS dosyalarını sayfanın temel içeriğinin renderlanması için gerekli yoldan çıkararak, tarayıcının sayfanın çekirdek içeriğini öncelikli olarak işlemesine ve görüntülemesine olanak tanır; bu da web sitesinin yükleme hızını ve kullanıcı deneyimini önemli ölçüde artırır. Uygulaması oldukça basittir; WP Rocket gibi eklentiler aracılığıyla hızlı bir şekilde başlatılabilir veya kod yazılarak son derece özelleştirilmiş kontroller sağlanabilir. Önemli olan, önemli olmayan kaynakları doğru bir şekilde belirlemek, işlemleri dikkatli bir şekilde gerçekleştirmek ve optimizasyon sonrasında kapsamlı ve ayrıntılı işlevsellik ve performans testleri yapmaktır. Asenkron yükleme stratejisini WordPress bakım sürecinize dahil etmek, modern ağ performansı zorluklarıyla başa çıkmak ve SEO sıralamalarınızı yükseltmek için etkili bir yöntemdir.

Sıkça Sorulan Sorular.

Asenkron yükleme (async) mi yoksa ertelenmiş yükleme (defer) mi seçilmeli?

Eklenti betikleri için genellikle daha iyi bir seçenek kullanılmaktadır.deferÇünküdeferSenaryoların HTML’de belirtildikleri sıraya göre çalıştırılmasını garanti etmek, birbirine bağımlı olan senaryolar (örneğin, bir eklenti senaryosunun jQuery’ye bağımlı olması) için son derece önemlidir. Bu, yanlış yürütme sırası nedeniyle oluşabilecek hataları önler.asyncDaha çok, tamamen bağımsız olan ve hiçbir başka betiğe bağlı olmayan veya hiçbir betiğin tarafından bağımlı tutulmayan kod parçaları için uygundur; örneğin bazı bağımsız istatistiksel analiz modülleri gibi.

Eşzamansız olarak yüklenen eklenti kaynakları, işlevlerin çalışmamasına neden olur mu?

Mümkün. Eğer eklenti betiğinin çalışması, belirli bir zamanda DOM’un kullanılabilir durumuna ciddi ölçüde bağlıysa (örneğin, bir elementin var olup olmadığına veya özelliklerine bağlıysa)...DOMContentLoadedBir olay tetiklendiğinde DOM üzerinde hemen işlemler yapılır; ancak bu işlemler başka senkronize betikler tarafından da kullanılıyorsa, asenkron yükleme nedeniyle bu işlemlerin erken veya geç gerçekleşmesi hatalara yol açabilir. İşte bu yüzden optimizasyon sonrasında kapsamlı testler yapılması ve sorunlu betiklerin dışlanma listesine eklenmesi gerekmektedir.

Tüm eklentiler asenkron yükleme için uygun mu?

Hayır. Ana ekranın renderlanmasını ve temel etkileşimleri doğrudan etkileyen eklenti kaynakları asenkron olarak yüklenmemelidir. Örneğin, ana ekranın görsel efektlerini oluşturmak için kullanılan bir animasyon kütüphanesi, navigasyon menüsünün tepkisini sağlayan bir betik veya web sayfasındaki yazı tiplerinin görünümünü optimize eden kritik CSS dosyaları, kullanıcı deneyiminin tutarlılığını ve anlıklığını sağlamak için senkronize bir şekilde yüklenmeli veya sayfaya doğrudan eklenmelidir. Optimizasyonlar her zaman temel işlevleri etkilemeyecek şekilde yapılmalıdır.

Eşzamansız yüklemenin yanı sıra, eklentilerin performansını optimize etmek için başka yöntemler de var mı?

Asenkron yükleme önemli bir unsurdur, ancak diğer birleştirme stratejilerini de kullanabilirsiniz: 1. Dosyaları birleştirin ve minimize edin: Eklentileri kullanarak birçok küçük JS/CSS dosyasını birleştirin ve boşluk yorumlarını çıkarın. 2. Gerektiğinde yükleme: Karmaşık eklentiler (örneğin sayfa oluşturucuları) için, kaynakların yalnızca ihtiyaç duyulan sayfalarda yüklenmesini sağlayın. 3. Hafif eklentileri seçin: Yeni eklentiler seçerken, iyi performans puanına ve kodun basitliğine sahip alternatifleri tercih edin. 4. Önbellek kullanın: Tüm statik kaynaklar için uzun bir önbellek son kullanma tarihi ayarlayın ve bunları CDN üzerinden dağıtın. Bu yöntemler asenkron yüklemeyle birlikte, en iyi bileşik performans geliştirme sonuçlarını üretebilir.