JavaScript kodları sayfa hızı ile ilgili her zaman problem yaratan bir konu olmuştur. Fakat; JavaScript kodunun içine “defer” etiketi konularak bu sorun giderilebilir. “Defer” etiketi ile JavaScript dosyları sayfada en son açılacaktır ve bu sayede sitenin çalışma hızı artacaktır. JavaScript kodlarına “defer” etiketi eklenmesi işleminin genellikle internet sitesinin yapısına göre uygulanması gerekir.

Genel Açıklama

Bir internet sayfasını yüklemek için, tarayıcının sayfanın yüklenme süresine ek süre bindiren, tüm <script> etiketlerinin içeriğini ayrıştırması gerekir. Fakat; elbette, İnternet sayfasının ilk yükleme süresi azaltılabilir. Bunun için internet sayfasını oluşturmak için gereken JavaScript miktarı en aza indirilmelidir. Ayrıca, yürütülmesi gereken zamana kadar, gereksiz olan JavaScript ler ayrıştırılarak ertelenebilir.

Google’dan Detaylar

JavaScript’in ayrıştırılmasını ertelemek için kullanılabilecek çeşitli yöntemler bulunuyor. En basit ve en çok tercih edilen teknik, ihtiyaç duyulana kadar JavaScript yüklemesini erteleme tekniğidir. İkinci bir yöntem olarak, uygun bulunduğunda <script async> niteliğini kullanma yöntemidir. Bu yöntem ile internet sitesinin ilk sayfasının oluşturduğu yükü erteleyerek, tarayıcının UI iş parçacığı başka bir şey yapmakla meşgul olmayana kadar erteleme işlemini engeller. Bu yöntemlerden hiçbiri sizing için uygun değilse, aşağıda açıklanan mobil uygulamalarda yaygın olarak kullanılan bazı ek yöntemleri denemeniz tavsiye edilir.

Mobil uygulama oluştururken, uygulama için ihtiyaç olacak tüm JavaScript’i daha önceden yüklemek gerekir, Bu sayede, uygulama kullanıcısı çevrimdışı olduğu zaman uygulama çalışmaya devam eder. Bu tür durumlarda, mobil Gmail gibi bazı applikasyonlar yorumlara JavaScript’i yüklemeyi ve daha sonra gerek duyulduğunda JavaScript’i değerlendirmeyi (eval()) yararlı buluyorlar. Bu yaklaşım biçimi, tüm JavaScript’lerin ilk sayfanın yüklenmesi esnasında yüklenmesini sağlar, fakat; JavaScript’in ayrıştırılmasını gerektirmez.

JavaScript dizgesindeki değişmezlere kod depolamak, yorumlarda kod depolamanın başka bir alternatif yoludur. Bu yöntemi kullanırken, JavaScript yalnızca gerektiği taktirde, yine de hazır bilgi dizgesinde eval () çağrılarak ayrıştırılır. Bu yöntem ile aynı zamanda uygulamanın JavaScript’i erken yüklemesine imkan sağlar, fakat gereken zamana kadar ayrıştırmayı erteler.

Tarayıcı, sayfa JavaScript’i ayrıştırma işlemine kadar meşgul bir gösterge göstermeye devam edeceği için, <script> etiketlerinin sayfa sonuna taşıma işleminin en düşük seviyede olduğuna dikkat etmelisiniz. Uygulama kullanıcıları, sayfa yükleme göstergesinin sayfa ile etkileşime geçmeden hemen önce sayfa yükleme işleminin tamamlandığını göstermesini isteyebilir. Bu sebeple, tarayıcının sayfa yükleme işleminin tamamlandığını göstermesi için geçen süreyi en azami seviyeye indirecek biçimde JavaScript’i yüklemesi oldukça önemlidir.

2011 yılının başlarında yapılan testlerde, modern mobil cihazlarda, her bir JavaScript kilobaytının JavaScript’in toplam sayfa yükleme süresine yaklaşık olarak 1ms ayrıştırma süresi eklediği görüldü. Bundan dolayı, ilk sayfa yüklemesinin kapsadığı 100kB JavaScript, uygulama kullanıcıları için 100ms ek yükleme süresi oluşturur. Bir sayfaya yapılan her ziyaret için JavaScript’in ayrıştırılması gerektiği için, eklenen bu ekstra yükleme süresi, ağdan yüklendiği zaman, tarayıcı önbelleği aracılığı ile ya da HTML5 çevrimdışı modunda, her bir sayfa yüklenmesinin bir parçası olacaktır.

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.

$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.