Defer Parsing of JavaScript

WPCİNWordpress Hızlandırma0 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.

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.

İlginizi Çekecek Benzer Yazılar

WordPress Optimizasyonu ve Bakımı Nasıl Yapılır? Bir blog oluşturduktan sonra, kullanıcılar aradığı herhangi bir şey olmadıkça çoğu kez optimize etmezler. Düzenli olarak Wordpress bakımı yaparak, sit...
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...
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....
Oluşturmayı Önleyen JavaScript ve CSS Kodlarını Kaldırma Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın. Sanırım bu uyarıyı hemen hemen herkes biliyordur. Wordpress...

Bir Cevap Yazın

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