WordPress’te Defer Parsing of JavaScript Hatasını Gidermek
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.
Bu içerik ilginizi çekebilir.
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.
