WordPress Defer Parsing of JavaScript Hatası Çözümü

WordPress site hızı testlerindeki JavaScript ayrıştırma erteleme (Defer parsing of JavaScript) sorununun çözümü için WordPress’te JavaScript ve CSS stil dosyaları en düzgün şekilde nasıl eklenir, bunu göstereceğim bu makalede. WordPress geliştiriciler, tema hazırlayanlar veya kendi sitesi için temada düzenleme yapmak isteyenler JS ve CSS ile bazı ihtiyaçlarına çözüm ararlar.

Birçok geliştirici tema hazırlarken CSS ve JavaScript eklentilerini doğrudan tema dosyalarına, header.php ve footer.php‘ye ekliyor. Ben de uzun bir süre yapığım temalarda bu şekilde düzenleme yapıyordum. Ancak bu şekilde yapılan JavaScript ve CSS eklemelerinde şöyle bir sorunla karşılaştım. GTMetrix veya PageSpeed gibi, web sitelerinin hızlarını ölçen hız testi siteleri tarafından bu durum negatif olarak algılanıyor ve sitenin değerini düşürüyordu. Sitenin değerini artırmak, sorgu sayısında azaltma yapmak ve sitenin açılış hızını sorgu sayısı azaldığından artmasını sağlamak için bu düzenlemeleri functions.php’de yapmak gerekiyor.

Defer Parsing of JavaScript Hatası

Hız ölçen siteler, Defer Parsing of JavaScript hatası altında, sitenizde düzeltmenizi istediği bazı sonuçlarla çıkıyor karşımıza. Bu hatayı gidermek mümkün. Defer Parsing of JavaScript sorunu çözümü için okumaya devam.

Scriptleri ve CSS Dosyalarını WordPress’e Engueue ile Ekleme

WordPress’in wp_enquene_script ve wp_enqueue_style fonksiyonlarını kullanarak hangi script veya CSS dosyasının nereye yükleneceğini belirleyebiliyoruz. Öncelikle bu kodları functions.php’de çalıştıracağımızı tekrar hatırlatayım.

function wp_add_scripts() {
	wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/lib/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '', true );
	wp_enqueue_script('bootstrap');
}
add_action( 'wp_enqueue_scripts', 'wp_add_scripts' );

Bu noktada bootstrap script dosyasını functions.php dosyasını kullanarak WordPress’e ekledim. wp-_register_script() fonksiyonunu açıklayalım.

#handle: Burada, eklediğiniz script ile ilgili başka bir yerde kullanmadığınız bir isim girmeniz istenir. Örneğin; jquery scripti ekliyorsanız jquery ya da jqueryscript şeklinde herhangi bir isim olabilir.

$src: Dosyanın yolunu bu komut yerine belirliyoruz. WordPress’in tema ya da pluginlerin klasör dizinini göstermesi için olan komutunu kullanabiliriz.

$deps: Scriptler genellikle jQuery ile çalışıyor, bağlılık için buraya da jQuery yazıyoruz.

$ver: JS dosyasının versiyonunu buraya yazıyoruz. Yazmanız gerekli değil, boş da bırakabilirsiniz. Ama bazı durumlarda dosyanın versiyonunu da eklemeniz gerektiği zaman burayı kullanıyoruz.

[postlink id=”2276″ title=”PageSpeed Puanını Yükseltmek”]

$in_footer: Bu değeri false olarak belirtirseniz sayfanızın footer alanına ekler, eğer true olarak belirtirseniz sayfanın üst kısmına ekler dosyayı. Web sitelerinin daha hızlı yüklenebilmesi için site içi optimizasyon yapılması gerekir. Bu şekilde sayfada öncelik kullanıcının site içeriğini görmesidir. JavaScript dosyaları ise kullanıcı tarafından önemsiz dereceye sahiptir. Bu nedenle bir web sitesinde jQuery, Bootstrap gibi script dosyalarını en son yükletiriz.

WordPress’e Enqueue ile Stil Dosyaları Ekleme

Aşağıdaki örneği de stil dosyalarını eklemek için kullanıyorum. Madem bootstrap örneğini verdik yukarıda, bu sefer de bootstrap’in CSS’ini eklemeyi göstereyim.

function wp_add_styles() {
	wp_register_style('bootstrapcss',  get_stylesheet_directory_uri() . '/lib/bootstrap/css/bootstrap.min.css');
	wp_enqueue_style('bootstrapcss');
}
add_action( 'wp_enqueue_scripts', 'wp_add_styles' );

Bu sefer wp_enqueue_script yerine wp_enqueue_style kullanıyorum. Dosyanın çağrılmasına WordPress fonksiyonlarını kullanabileceğimizden bahsetmiştim. plugins_url ile plugin klasörünü, get_template_directory_uri() ile tema klasörünü ve get_stylesheet_directory_uri() ile de temanın stil klasörüne erişim sağlayabilirsiniz.

WordPress eklentileri ile JavaScript ayrıştırmasını ertelemek de mümkün. WP Deferred JavaScript veya Speed Booster Pack adlı eklentileri deneyebilirsiniz.

Popular Eğitimler

WordPress Multisite Ağında Tek Bir Ortam Kütüphanesi

WordPress Multisite ağında birden fazla site kurduysanız, mesela daha önceki derslerimde anlattığım…

WordPress Araç Çubuğundaki Öğeler Nasıl Kaldırılır?

WordPress araç çubuğu veya diğer bir tabirle admin bar üzerindeki öğeler, eklediğimiz…

WordPress Admin Paneli Giriş Sayfası Yönlendirme

WordPress’te admin giriş sayfasına wp-admin’den ulaşabiliyorsunuz. Sizden kullanıcı adı ve parola istiyor…

WordPress Optimizasyon ve PageSpeed Puanını Yükseltmek

WordPress web siteleri nasıl hızlandırılır? WordPress sayfalarının Google Pagespeed Insights ve GTmetrix…

WordPress Ping Servisleri 2018 Güncel

WordPress Ping servisleri yeni eklediğiniz içeriklerinizin hızlı bir şekilde arama motorları tarafından…

Fontello ile Sadece İhtiyacınız Olan İkon Fontları Kullanın

Önceki derslerimizde Web Sitelerinde Font Awesome Kullanımı ile ilgili bir makale hazırlamıştım….