Web Sitenizi Güçlendirmek İçin JavaScript Ayrıştırmasını Erteleme Nasıl Kullanılır?

Sayfa Hızı, web sitenizin en önemli yönlerinden biridir. Web siteniz ne kadar sunacak olursa olsun, hiç kimse web siteniz yüklenmeden önce dakikalarca beklemek istemez. Aynı zamanda, web siteniz daha hızlı yüklenirse, ziyaretçileri tutma olasılığı daha yüksektir.

Ayrıca Sayfa Hızı, web sitenizin Arama Motorlarındaki sıralamasını da hesaba katar. Tarayıcıların web sitenizin ne kadar etkili ve bakımlı olduğunu anlamasına yardımcı olur. Bu eğitimde, WordPress'te JavaScript Ayrıştırmasının Nasıl Erteleneceğini göreceğiz.

JavaScript Ayrıştırmasını Erteleme Neden Önemlidir?

JavaScript'in Ayrıştırmayı Ertele kavramını tam olarak kavramak için, bir tarayıcının bir web sayfasını nasıl oluşturduğunu anlamanız gerekir. Tarayıcınız bir sayfa istediğinde, web sunucunuz onu HTML belgesi biçiminde indirilen geri gönderir.

HTML belgesi, ek kaynaklar indirilirken tarayıcının öğeleri okuduğu birkaç öğe ve kaynak içerir. Son olarak, sayfa yalnızca tüm kaynaklar indirildiğinde oluşturulur.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Boyut olarak daha büyük olan kaynakların indirilmesi çok daha fazla zaman alır. Resimler bu kaynakların çoğunu oluşturur, bu nedenle resimlerinizi optimize etmek önemlidir. Ayrıca gereksiz scriptleri tanımlayarak indirmeyi erteleyebilir ve web sayfanızı hızlandırabilirsiniz.

Hangi Komut Dosyalarının Erteleneceği Nasıl Belirlenir?

Çok fazla JavaScript kullanmayan minimal bir web sitesi için, sayfayı yüklemek için hayati önem taşıyan hiçbir komut dosyası olmayabilir. Aksine, oldukça karmaşık bir web sitesinin, sayfanın yüklenmesi için hangilerinin gerekli olduğunu anlamak için tüm komut dosyalarının ayrıntılı bir analizine sahip olması önemlidir.

Gereksiz komut dosyalarını ortadan kaldırmanın ilk yöntemi, komut dosyalarını birer birer kaldırmak ve aynı anda JavaScript konsolundaki hataları kontrol etmektir. Aynı zamanda, bu yöntem JavaScript hakkında önemli ölçüde çaba ve bilgi gerektirir.

Diğer yöntem, sayfa yüklemesi için hangi komut dosyalarının gerekli olduğunu değerlendirmek için hız testi aracını kullanmaktır. Bu araçlardan biri, tek yapmanız gereken web sitenizin URL'sini girerek sonuçları göstermek olan GTmetrix'i içerir. Sayfa Hızı sekmesinde, genişletildikten sonra sayfanızın oluşturulması sırasında yüklenen gereksiz komut dosyalarının listesini gösterecek olan JavaScript İçin Ayrıştırmayı Ertele bölümünü bulacaksınız.

Bilgileri kullanarak, sayfanızın oluşturulmasını hesaba katmayan komut dosyalarını kaldırabilirsiniz.

Erteleme veya Zaman Uyumsuz Nitelikler

Sayfalar oluşturulurken komut dosyalarının indirilmesini ortadan kaldırmanın iki yolu vardır.

İlk olarak, script etiketine Defer niteliğini ekleyerek, sayfanın ayrıştırılması yapılmadan tarayıcının kaynakları indirmemesini sağlayabilirsiniz. Sayfanın oluşturulması ve ayrıştırılması tamamlandıktan sonra, tarayıcı ertelenen tüm komut dosyalarını indirebilir. Aşağıda, bir HTML sayfasına erteleme niteliğinin nasıl ekleneceğini gösteren örnek bir komut dosyası etiketi verilmiştir.

<script src="path/to/script" defer></script>

Öte yandan, komut dosyası etiketine bir zaman uyumsuz öznitelik ekleyebilirsiniz. Bu, tarayıcıya komut dosyasını ayrı olarak yüklemesi için rehberlik edecektir. Bu, tarayıcının aynı anda HTML'yi ayrı ayrı ayrıştırırken kodla karşılaştığında kaynakları indirmeye başlayacağı anlamına gelir. Aşağıda verilen örnek komut dosyası, bir zaman uyumsuz özniteliğin nasıl ekleneceğini gösterir.

<script src="path/to/script" async></script>

Bu özelliklerin her ikisi de kaynakları indirme biçimlerine göre farklılık gösterir. Minimal bir web sitesi için, zaman uyumsuz ve erteleme nitelikleri arasındaki farkları fark etmek kolay değildir. Aynı zamanda daha karmaşık bir web uygulaması için erteleme tekniğinin kullanılması tavsiye edilir.

JavaScript ayrıştırmasını ertele

JavaScript Ayrıştırmasını Erteleme için kullanabileceğiniz iki yöntem aşağıda verilmiştir.

1. Functions.php Dosyasını özelleştirin

WordPress geliştirmeye alışıksanız, doğrudan HTML işaretlemesine dd komut dosyaları eklemenin iyi bir fikir olmadığını bilmelisiniz. Ancak kaynak istemek için Yerleşik WordPress İşlevlerini kullanabilirsiniz.

Komut dosyalarınıza bir zaman uyumsuz veya erteleme özelliği eklemek için, WordPress temanızın function.php dosyasına aşağıdaki işlevi eklemelisiniz.

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

Komut dosyası etiketlerine erteleme ve zaman uyumsuz niteliklerini eklemeden önce her komut dosyasını kuyruğa aldığınızdan emin olun.

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. JavaScript Ayrıştırmasını Erteleme Eklentileri

Anlaşılacağı gibi, herkesin yukarıdaki yöntemi takip etmek için yeterli bilgi ve beceriye sahip olmaması. Bu nedenle, yeni başlayanlar için, JavaScript Ayrıştırmasını Erteleme için bazı eklentiler kullanılabilir.

zaman uyumsuz JavaScript

Async JavaScript , görevi gerçekleştirmek için WordPress'inize yükleyebileceğiniz, kullanımı ücretsiz bir WordPress eklentisidir.

Yüklü ve eklentiyi etkinleştirdikten sonra, eklenti ayarlarına gidip zaman uyumsuz Enable JavaScript seçeneği işaretleyin.

Zaman uyumsuz veya erteleme yöntemi arasında seçim yapmak için aşağı kaydırın.

Eşzamansız ve ertelemek için ayrı ayrı komut dosyaları ekleyebileceğiniz veya kaldırabileceğiniz daha gelişmiş seçenekler için aşağı kaydırın. Ayrıca, bu eklentinin yapacağı değişikliklerden eklentileri ve temaları ortadan kaldırabilirsiniz.

Otomatik optimize et

Autoptimize , JavaScript'lerin Ayrıştırmasını Ertelemenize izin veren başka bir eklentidir.

Eklentiyi kurup etkinleştirdikten sonra, ayarlar sayfasında JavaScript Kodunu Optimize Et seçeneğini işaretleyin. Bu, tüm gereksiz komut dosyalarını erteleyecek ve bunları altbilgiye taşıyacaktır.

Eşzamansız öznitelik için komut dosyalarını Ekstra sekmesinde de ekleyebilirsiniz.

Ya function.php dosyasını düzenleyebilir ya da Autoptimize ve Async JavaScript gibi eklentileri kullanabilirsiniz. Bunlar, komut dosyası etiketlerine zaman uyumsuz ve erteleme özniteliğini eklemek için iki güvenilir yöntemdir.

Bu tekniklerin web sitenizi hızlandırmanıza yardımcı olacağını umuyoruz. Gönderilerimizden haberdar olmak için Facebook  ve Twitter'da bize katılmaktan çekinmeyin.