fatih toprak Full stack developer & WordPress Master

Javascript Optimizasyonu – Oluşturma Engelleyici Javascript (Javascript Render Blocking)

Bir kaç gündür keyiflenmeme en güzel sebeplerden olan eski takipçilerin gerek ise, dostlarımın yorumları ve sosyal medya üzerinden gelen tatlı feedback’ler sonrasında, yazıların yenilenme aralığını da kısaltmak herkes için daha faydalı oluyor kanısındayım. Yorumları ile şimdiden beni daha çok mutlu eden herkese sonsuz teşekkürler.. Sıradaki konumuz; Javascript Render Blocking.

Bu makalede, WordPress optimizasyonu ile alakalı olarak aslında daha Türkçesi, “WordPress Seo & Hız Optimizasyonu ” ile alakalı ipucu ve yönergeleri işleyeceğiz. Görünen o ki, hız optimizasyonu ile alakalı en çok karşılaşılan diğer durumlardan bir tanesi de, tam da bu, javascript optimizasyonu.

Önceki yazılardan olan CSS yayını optimizasyonu (*) ile alakalı kullandığımız mental ve tool’lara bakacak olursak, Javascript kaynaklarının da normalin üstünde değerler ile kullanılıyor olması sayfanızın öncelikli içeriğinin geç veya daha sonra yüklenmesine sebep olabilir. Dolayısı ile, Javascript dosyalarınızda da hem sıkıştırma hem de birleştirme aksiyonları gerçekleştirmeniz gerekiyor.

Tam manası ile durumu tanımlayacak olursak, Javascript Render Blocking ; sayfanızın görünür içeriğinin oluşmasını geciktiren ya da engelleyen javascript tabanlı optimizasyon değerleridir diyebiliriz.

  1. JavaScript; DOM ve CSSOM’yi sorgulayip degistirebilir.
  2. JavaScript yürütmesi CSSOM’de engelleme yapar.
  3. JavaScript, açik bir sekilde zaman uyumsuz oldugu açiklanmazsa DOM yapisini engeller. (*)

Google, dökümanlarındaki temel maddeler üsttekiler gibi. Peki izlenecek yol ?

Javascript Kaynaklarınızı eş zamansız olarak yükleyin (Javascript Render Blocking)

Bunun için en güzel çözümlerden biri javascript kaynaklarınıza eş zamansız yükleme yönergeleri eklemektir.

<script src="dosya.js" defer="defer"></script>

şeklinde defer değeri sayfa içeriğinin yüklenmesinden sonra tarayıcınız tarafından javascript kaynağınızın kullanılacağını tetikleyeceği gibi,

<script src="dosya.js" async></script>

şeklindeki kullanım da kaynak dosyanızın eşzamansız olarak sayfanıza yüklenmesi yönergesini  tetikleyecektir.

Sayfanızda, jquery kullanımı var ise, ufak bir detayı atlamamanızı öneririm, şudur ki, jquery dosyanızı Google CDN ya da diğer CDN servislerinden sayfanıza dahil edebilirsiniz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Javascript dosyalarınızı ekranın üst kısmından kaldırın

Oldukça açık zaten başlıktaki gibi, sayfanızın muhtemelen en üstünde olan javascript çağrımlarından kurtulun. body kapanış etiketinden hemen öncesine javascript kaynaklarınızı çağırabilirsiniz.Örnek ;

<script src="jquery.js"></script>
</body>

Javascript dosyalarınızı optimize edin

Üstte de bahsi geçtiği gibi, hepsini tek dosyada toplayıp, kombine edip, akabinde tüm yapınızı sıkıştırdıktan sonra istediğimiz 75.Kb altındaki verilerle skor oranımızı tamamen değiştirmiş olabiliriz.

Gerekli Tool(Araçlar);

  • http://gtmetrix.com
  • http://refresh-sf.com

Mutlu WordPress’ler.


, , , ,

“Javascript Optimizasyonu – Oluşturma Engelleyici Javascript (Javascript Render Blocking)” için 6 yorum

Berat dedi ki:

@Fatih ben teşekkür ederim böyle güzel yazıları paylaştığın için. “defer” ile “async” komutunu aynı anda mı kullanacağım. Yoksa birisini kullanmamız yeterli midir? Javascript dosyalarını footer taşımak için şu eklentiyi kullanıyorum “Scripts-To-Footer”.

Fatih Toprak dedi ki:

@berat, async tek başına kullanılması yeterli olabilir. Mümkün oluduğunca eklenti kullanmak yerine kendin wp_footer içinde add_action ile eklesen ? ya da kodları alıp kendin koysan footer’a daha sağlıklı olurlar 😉

Berat dedi ki:

Eklenti kullanmayı bende senin gibi sevmiyorum ama hatırladığım kadarıyla plugins’lerin js dosyalarını taşıyamadığım için bu eklentiyi kullanmıştım. Bildiğin gibi mesleğim doğrultusunda edindiğim bilgileri paylaşmak adına bir çevre sitesi kurdum. Yoksa web tasarımı ve kodundan pek anlamıyorum. Bu nedenle çok basit sorular soruyor olabilirim şimdiden kusura bakmayın 🙂

Fatih Toprak dedi ki:

haha @berat estağfurullah bu eklenti yerine şu hook işini görecektir.

function remove_head_scripts() {
   remove_action('wp_head', 'wp_print_scripts');
   remove_action('wp_head', 'wp_print_head_scripts', 9);
   remove_action('wp_head', 'wp_enqueue_scripts', 1);

   add_action('wp_footer', 'wp_print_scripts', 5);
   add_action('wp_footer', 'wp_enqueue_scripts', 5);
   add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
Berat dedi ki:

@Fatih sayende bir eklentiden daha kurtulmuş olduk. Teşekkürler. Hazır javascript optimizasyonu konusunu işlerken “Defer parsing of JavaScript” hatasını ne demek onu da sorayım. Temada var olan Javascript kodları için “async” kullandım. “3.0KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.” şeklinde açıklama var.

Fatih Toprak dedi ki:

@berat defer işte bu sebeple lazım olan ;

http://stackoverflow.com/a/21031184/1137492

şu linkte güzel bir açıklama yapmışlar.

* Yorumunuza, kod eklemek için; [code lang="php"] kodunuz [/code] şeklinde tanımlama kullanabilirsiniz. , lang kısmına, php js css html gibi farklı syntax'ler kullanabilirsiniz.

Bir Cevap Yazın

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