Defer Parsing of JavaScript

WPCİNWordpress Hızlandırma4 Yorum

GTmetrix üzerinden sitenizin hız testini yaptıktan sonra “Defer parsing of JavaScript” hatası almış olabilirsiniz. Bunun nedeni sayfanızın yüklü miktarda JS dosyası içermesinden kaynaklanıyor olabilir. Tarayıcı sitenizin kodlarını yüklerken fazla dosya boyutu, web sitenizin yavaş yüklenmesine neden olacaktır.

Bu sorunu çözmek için çeşitli yöntemler mevcut. Defer parsing of Javascript hatasının çözümü için yapılacak teknikleri, yazımızda anlatmaya çalışacağız.

Javascript Ayrıştırmayı Ertelemek Neden Önemli?

Google’ın sayfa hızını bir sıralama faktörü olarak kullandığını ve kullanıcıların hızlı yüklenen sayfaları sevdiğini biliyorsunuz.

Her şeyden önce önceliğimiz, içeriğin mümkün olduğunca hızlı bir şekilde ziyaretçilere gösterilmesidir. Bir kullanıcı, javascript yüklendikten sonra içeriğin yüklenmesini beklememelidir. JavaScript’in yüklenmesinin ertelenmesi web sitenizi hızlandırmaya yardımcı olur. JavaScript’in ayrıştırılmasını ertelerseniz, JS yalnızca web sitesinin içeriği yüklendikten sonra yüklenmeye başlayacaktır.

Tarayıcı bir komut dosyası bulursa, HTML’yi yüklemeye devam etmeden önce komut dosyasını yürütür. Dolayısıyla JavaScript sitenizin oluşturulmasını etkiler ve  web siteniz pagespeed testlerinden daha az puan alır. Google burada JS dosyalarının yüklenmesinin ertelenmesi gerektiğini belirtiyor.

Ayrıca oluşturmayı önleyen javascript vs css kodlarını kaldırma adlı makalemizi okuyarak web sitenizin açılış hızının artmasına yardımcı olabilirsiniz. Gelin şimdide bu hatadan kurtulmak için yapılacak çözüm yöntemlerine göz atalım.

Not: Bu yöntemler web siteniz de bozulmalara veya eklentilerin randımanlı çalışmamasına neden olabilir.

Bu yöntem ile Google Pagespeed hız testi aracında aldığınız “JavaScript yürütme süresini azaltın” hatasına çözüm bulabilirsiniz. (JavaScript Bootup Time Is Too High)

1. Yöntem: Belirli Bir JS Dosyasının Yüklenmesini Ertelemek

Tema kodlarınızda bir değişiklik yapmadan önce yedekleme yapmayı unutmayın. Bir şeyler ters giderse, geri dönmek için bu yedeklemeyi kullanabilirsiniz.

  1. Kodu kopyalayın ve </body> etiketin hemen önüne yapıştırın. Bu etiketi footer.php içerisinde bulabilirsiniz.
  2. belirli_bir_js_dosyasi.js’yi , ertelenecek olan JavaScript bağlantısıyla değiştirin. Web siteniz için Google PageSpeed ​​Insights, GTmetrix veya Pingdom gibi araç sonuçlarında hangi JS dosyasını ertelemeniz gerektiğini söylenir.
  3. Değişiklikleri kaydedin. İşlem tamamlandı.
  4. Etkiyi görmek için web sitenizi tekrar test edin.

Not1: Komut dosya yolunun /wp-content/themes/tema_adi/dosya_adi.js olduğundan emin olun.

Not2: Yukarıdaki kod yüklemeyi erteler. Eğer indirmeyi ertelemek isterseniz “parseJSAtOnload” yerlerini “downloadJSAtOnload” ile değiştirmelisiniz.

2. Yöntem: Birden Çok JS Dosyasının Yüklenmesini Erteleyin

Yukarıdaki kod da, aynı 1. yöntem gibi yüklenmesini ertelemek istediğini JS leri uygun yerlere yerleştirin ve </body> etiketin önce yapıştırın. Daha sonra işe yarayıp yaramadığını test edebilirsiniz.

3. Yöntem: Functions.php Dosyasına “Geciktirme” Kodu Eklemek (FAVORİM)

Yukarıdaki kod, tüm harici javascriptlerin yalnızca ana site yüklendikten sonra yüklenmesini sağlayacaktır. Bu kod benim favorim fakat temaya ait özelliklerden bazılarının çalışmasını engelliyor. Bu nedenle dikkat etmelisiniz.

4. Yöntem: “Defer” ve “Async” Özelliklerini Kullanmak

Bu özellikler harici komut dosyalarında kullanılır ve JS dosyalarının yüklenmelerini geciktirir. Fakat aralarında bir fark var.

Normalde, HTML yüklenirken JS ile karşılaşırsa JS’nin indirmesi ve yürütmesi esnasında çözümleme işlemi durur.

“async” JS indirmesi ve yürütmesi esnasında sayfa çözümleme işlemi durmaz.

“defer” tüm belgelerin yüklenmesi tamamlandıktan sonra JS ler uygulanmaya başlar.

“defer” niteliğini kullanmak mantıklı gelse de, bu sitenizin tam yüklenme süresini artıracaktır. “async” niteliğinde JS dosyaları indirildiği esnada site yüklenmesi durmayacağı için bu bir avantajdır. Google analytics kullanıyorsanız async kullanmanızı tavsiye ederim. Umarım mantığı anlamışsınızdır.

Not: Bu özellikler her tarayıcı için uyumlu değildir.

Örnek kullanımlar:

Temanızın dosyalarında dışarıdan çağırılan komut dosyalarını yukarıdaki gibi düzenleyebilirsiniz.

5. Yöntem: Eklenti Kullanmak

Bazı eklentiler yukarıda anlattığımız işlemleri sizin yerinize yapabilmektedir. Web sitenizi hızlandıran bu eklentiler, wp_enqueue_script() ve async gibi özellikleri kullanmaktalar. JavaScript ayrıştırmayı ertelemek için kullanabileceğiniz eklentiler:

  1. https://wordpress.org/plugins/async-javascript/
  2. https://wordpress.org/plugins/speed-booster-pack/
  3. https://wordpress.org/plugins/wp-deferred-javascripts/

Umarız anlattıklarımız “defer parsing of JavaScript” hatasına çözüm olur. İyi çalışmalar.

Benzer Yazılar

WordPress Sunucu Yanıt Süresini Kısaltın Neredeyse tüm WordPress kullanıcılarının yaşadığı en büyük endişelerden biri, web sitesinin daha hızlı çalışmasını sağlamaktır. Aslında, sunucu yanıt ...
Google Test My Site | Mobil Hız Testi Aracı Google Test My Site, web sitenizin mobil hızını ölçen bir uygulamadır. Bildiğiniz üzere kullanıcılar yavaş yüklenme süresine sahip siteleri sevmezler....
En iyi Ücretsiz CDN Hizmeti Cloudflare Kurulumu Dünyada ücretsiz CDN hizmeti veren firma sayısı çok az. Peki cdn servisi ne işe yarar? Şöyle düşünün, siz Türkiye'den Avrupa'ya bir malzeme gönderiyor...
WordPress Hızlandırma Yolları Site açılış hızını arttırma için çeşitli optimizasyon yöntemleri kullanmak gerekir. WordPress çok hafif bir sistem, ancak doğru şekilde optimize edilm...

4 Yorum: “WordPress Defer Parsing of JavaScript Çözümü”

  1. Functions.php Dosyasına erteleme kodunu yapıştırdım tema dosyamın child klasöründeki Functions.php dosyasına, doğru yaptığıma eminim ama tekrar test ettiğimde hala aynı hatayı veriyor GTmetrix’te

    Test Linki : https://gtmetrix.com/reports/www.hediyekapisi.com/Wk3pZELn

    1. Merhaba sitenizi inceledim. Ertelenmeyen javascript dosyalarından birisi temanızın düzgün çalışması için gerekli bir dosya, bir diğeri ise satır içi bulunan kodlar. Bunlara müdahele etmenize gerek yok. Web siteniz wooCommerce üzerine olduğu için size bir tavsiyem olacak. wooCommerce ayarlarında “paralo ölçer” şeklinde bir ayar olması lazım. Bu ayar sizde şuan aktif ve zxcvbn.min.js dosyasını çağırıyor. Ve bu dosya yaklaşık 400kb değerinde. Eğer bu ayarı kapatırsanız web siteniz daha fazla hızlanacaktır. Veya aşağıdaki kod yardımıyla da yapabilirsiniz.

      Bir diğer tavsiyem analytics kodunu dışardan çağırmak yerine sunucunuza eklemeniz olacaktır. Unutmayın ne kadar az eklenti kullanırsanız sizin için o kadar iyi olur.

  2. Merhaba, google analytics kodunu sunucuya ekleyin demissiniz. Bunun nasıl yapılacağı hakkında bilgi paylaşabilirmisiniz. Aynı sorunlarla bende karşı karşıyayım. Birden fazla çözüm yolu buldum ancak şu an için belli başlı sorunları çözebildim. Bu konuda da yardımcı olabilirseniz bir sorunu daha halletmiş olacağım. Şimdiden teşekkür ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir