WordPress'te JavaScript Ayrıştırma Nasıl Ertelenir?

Bu yazıda, WordPress'te JavaScript'in ayrıştırılmasının ertelenmesi hakkında bilgi edineceksiniz.

JavaScript Ayrıştırmayı Erteleme, JavaScript'in sayfanın ana içeriği yüklendikten sonra yüklenmesi anlamına gelir, böylece kullanıcı boş sayfaya bakmak ve beklemek zorunda kalmaz,

Bu, WordPress hız optimizasyon ipuçlarından biridir ve başarıyla uygulandığında, WordPress sitesinin yükleme hızını artıracaktır.

• JavaScript Ayrıştırmasını Erteleme Nedir?
• Kontrol Edilecek Hız Testi
• Zaman uyumsuz ve Erteleme Yöntemi
• WordPress'te JavaScript Ayrıştırma Nasıl Ertelenir?

WordPress'te JavaScript Ayrıştırmasını Erteleme Nedir?

WordPress web sitenizi GTmetrix Hız Testi veya Pingdom Hız Testi veya Google PageSpeed ​​Insights gibi bir hız testi aracılığıyla çalıştırırken, JavaScript'in ayrıştırılmasını erteleme önerisini bulabilirsiniz.

Ne olduğunu bilmiyorsanız, muhtemelen JavaScript ayrıştırmanın web sitenizin performansı üzerindeki önemini bilmiyorsunuzdur.

Bir sayfa, HTML, CSS, JavaScript ve diğer çeşitli öğeler gibi birçok öğeden oluşur. Yani birisi web sayfasını ziyaret ettiğinde, sunucu sayfayı HTTP aracılığıyla iletir.

İstemci tarafında, ziyaretçinin tarayıcısı web sayfasını yükler ve bu yükleme, web sayfasını oluştururken yukarıdan başlar ve altta biter. Bu arada, sayfanın ortasında herhangi bir JavaScript varsa, Javascript'i indirip ayrıştırana kadar oluşturma işlemi duracaktır.

Tarayıcı bunu sayfanızdaki her JavaScript kodu için yapacaktır; bu, sayfa JavaScript ayrıştırılıncaya kadar boş kalacağından sayfanın yüklenme hızına zarar verebilir.

Ancak, sitenizin işleyişi için yararlı olmayan bir JS varsa (örneğin: Facebook Sayfa Komut Dosyası), bu komut dosyasının sayfanın ana bölümünün yüklenmesini kısıtlamasını istemezsiniz.

WordPress sitesinde JavaScript Ayrıştırmasını Ertelemenin kurtarmaya geldiği yer burasıdır.

JavaScript'in ayrıştırılmasının ertelenmesi, tarayıcının komut dosyalarının yüklenmesini beklemeden tüm içeriği yükleyebilmesi için sayfayı değiştirmek anlamına gelir. Web sitesinde bazı değişiklikler yaparak tarayıcının Javascript'i ayrıştırmasına izin verebilirsiniz.

JS Ayrıştırmasını Ertelemenin Faydaları:

• Geliştirilmiş Kullanıcı Deneyimi: tarayıcı, web sayfasının ana içeriğini yükler ve ziyaretçilerin beklemesi gerekmez
• Daha İyi SEO Performansı: Google Bots tarafından hızlı tarama. Ancak, Java SEO hakkında daha fazla bilgi edinebilirsiniz.

JS Ayrıştırmasını Ertelemeniz Gerekip Gerekmediğini Kontrol Etmek İçin Test Edin

Sitenizi GTmetrix veya Pingdom üzerinden çalıştırın.

JavaScript'in ayrıştırılmasını ertelemeyi önerip önermediğini öğrenmek için GTmetrix kullanıyoruz.

Zaman uyumsuz ve Erteleme Yöntemi

JavaScript'i Ertelemenin iki yöntemi vardır.

1. zaman uyumsuz
2. erteleme

Her iki yöntem türü de tarayıcının HTML ayrıştırmasını duraklatmadan JS'yi indirmesine izin verir.

Async ve Defer arasındaki fark, Async, JS'yi indirmek için HTML ayrıştırmasını duraklatmasa da, indirildikten sonra komut dosyasını çalıştırmak için HTML ayrıştırıcısını duraklatmasıdır. Öte yandan, Defer ile tarayıcı, HTML ayrıştırması sırasında JS'yi indirecek, ancak HTML ayrıştırması yapıldığında komut dosyasını çalıştıracaktır.

Bir başka yöntem de JavaScript kodunu sayfanın altına koymaktır. Bu nedenle, sayfa içeriği yüklendikten sonra sayfa JS'yi yükleyecektir.

Ancak, JS düzgün bir şekilde yürütülene kadar sayfada yükleme işareti görüntülenecektir. Bu nedenle, bazı ziyaretçiler sayfa tamamen yüklenene kadar sayfayla etkileşime girmeyebilir.

WordPress'te JavaScript Ayrıştırma Nasıl Ertelenir

WordPress'te JavaScript'in ayrıştırılmasını ertelemek için kullanabileceğiniz iki yöntem vardır.

• Eklenti Yöntemi
• fonksiyon.php

WordPress'te JavaScript Ayrıştırmasını Erteleyen Eklentiler

Birçok eklenti, JS'nin ayrıştırılmasını erteleyebilir.

Görev için en iyi 3 WordPress eklentisi:

• zaman uyumsuz JavaScript
• otomatik optimize et
• Hız Yükseltici Paketi

zaman uyumsuz JavaScript

Async JavaScript, Autoptimize Plugin'i yaratan aynı kişiden ücretsiz ve harika bir WordPress eklentisidir.

Eklenti, JavaScript, Async veya Defer'in ayrıştırılmasını ertelemenin iki yolunu sunar.

Zaman uyumsuz JavaScript, WordPress.org'da ücretsiz olarak mevcuttur. Eklentiyi indirin ve etkinleştirin.

Ardından Ayarlar > Eşzamansız JavaScript'e gidin.

Async JavaScript'i kontrol edin ve eklentinin görevini yapması için etkinleştirin.

Ayrıca Async veya Erteleme'yi seçmek için bir seçenek bulacaksınız.

Async seçeneği, HTML ayrıştırılırken JavaScript'i indirecek, ardından HTML ayrıştırmasını duraklatacak ve JavaScript'i yürütecektir.

Erteleme seçeneği, HTML ayrıştırmaya devam ederken JavaScript'i indirecek ve HTML ayrıştırması bitene kadar bekleyecek, ardından JavaScript'i yürütecek.

Siteniz için uygun olan seçeneği seçin.

otomatik optimize et

Belirtildiği gibi, Autoptimize, çeşitli WordPress optimizasyonları için popüler ve kullanışlı bir eklentidir.

Bu eklentide JavaScript'i ertelemek için bir özellik var.

Eklentiyi WordPress eklenti deposundan indirin.

Eklentiyi etkinleştirdikten sonra eklenti ayarlarına gidin. Autoptimize eklentisinin ayar sayfasında, “JavaScript Kodunu Optimize Et” seçeneğini işaretleyin ve gerekli olmayan tüm komut dosyalarını erteleyecek veya altbilgiye taşıyacaktır.

Ekstra sekmesinde, Async özelliğine eklemek istediğiniz tüm komut dosyalarını listeleyebilirsiniz.

Hız Yükseltici Paketi

Bu görevi kolaylaştıran bir diğer WordPress eklentisi ise Speed ​​Booster Pack.

Speed ​​Booster çok daha fazlasını yapabilir, ancak bunu WordPress'te JavaScript'in ayrıştırılmasını ertelemek için kullanacağız.

Başlamak için, eklentiyi ücretsiz olarak bulunabileceği WordPress.org'dan indirin. Etkinleştirin ve ayarı açın.

• Hız Yükseltici ayar sayfasından gelişmiş sekmesini açın.
• JavaScript optimizasyonuna gidin
• JS'nin Ayrıştırmayı Ertelemesini Kontrol Edin
• Tamamlandığında değişiklikleri kaydet

JavaScript'i function.php Dosyası aracılığıyla erteleyin

Sonraki yöntem, functions.php dosyasını düzenlemektir.

Aşağıdaki kodu function.php dosyanıza ekleyerek JavaScript dosyalarınıza defer öznitelik kodunu eklemelisiniz.

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Bu basit kod, Async veya Autoptimize eklentisinin yaptığı görevi görür. Ancak function.php dosyalarını düzenlemede çok daha az kontrol ve daha fazla risk vardır.

Bu yöntemi kullanacaksanız, dosyayı güvenli bir şekilde düzenleyin.

1. Düzenlemeden önce sitenin yedeğini alın
2. WordPress Kontrol Paneli'ne gidin
3. Görünüm > Tema Düzenleyici
4. Tema Dosyalarında functions.php'ye tıklayın
5. Kodu dosyanın altına yapıştırın
6. Güncelleme Dosyasına tıklayın

Sarmak

WordPress'te JavaScript'in ayrıştırılmasını ertelemek için gönderide belirtilen yöntemleri kullanın. Ancak bir hız testi yaparak sitenizin performansını kontrol edin.

WordPress için çok önemli bir hız optimizasyon seçeneğidir. Ancak web sitesi düzgün çalışmalıdır.

Bazen optimizasyon doğru yapılmadığında sayfayı bozar. Bu yüzden sitenizin kritik sayfalarını kontrol etmelisiniz.

Herhangi bir sorunuz veya sorununuz varsa, bunları yorum kutusuna bırakın.