Oluşturmayı Engelleyen JavaScript'i Kaldırma

Bu kural, PageSpeed Insights, HTML'nizin sayfanızın ekranın üst kısmında bulunan üst kısmında yer alan, engelleyici bir harici JavaScript dosyasına başvurduğunu algıladığında tetiklenir.

Genel bakış

Tarayıcının bir sayfayı oluşturabilmesi için öncelikle HTML işaretlemesini ayrıştırarak DOM ağacını oluşturması gerekir. Bu işlem sırasında, ayrıştırıcı bir komut dosyasıyla karşılaştığında HTML'yi ayrıştırmaya devam edebilmek için durdurup çalıştırması gerekir. Harici bir komut dosyasında, ayrıştırıcı da kaynağın indirilmesini beklemeye zorlanır. Bu da bir veya daha fazla ağ döngüsüne neden olabilir ve sayfanın ilk kez oluşturulması için geçen süreyi geciktirebilir. JavaScript'in kritik oluşturma yolunu nasıl etkilediği hakkında daha fazla bilgi edinmek için JavaScript ile Etkileşim Ekleme bölümüne bakın.

Öneriler

Engelleyen JavaScript'i, özellikle de yürütülmeden önce getirilmesi gereken harici komut dosyalarını kullanmaktan kaçınmalı ve bu kullanımı en aza indirmelisiniz. Sayfa içeriğini oluşturmak için gereken komut dosyaları, fazladan ağ isteklerinden kaçınmak için satır içine alınabilir. Ancak satır içi içeriğin küçük olması ve iyi bir performans sağlamak için hızlı bir şekilde yürütülmesi gerekir. İlk oluşturma için kritik olmayan komut dosyaları, ilk oluşturma işleminden sonra eşzamansız hale getirilmeli veya ertelenmelidir. Bunun yükleme sürenizi iyileştirebilmesi için CSS yayınını optimize etmeniz gerektiğini de lütfen unutmayın.

Satır içi JavaScript

Harici engelleme komut dosyaları, tarayıcıyı JavaScript'in getirilmesini beklemeye zorlar. Bu da sayfa oluşturulmadan önce bir veya daha fazla ağ döngüsü ekleyebilir. Harici komut dosyaları küçükse içeriklerini doğrudan HTML belgesine satır içine alarak ağ isteği gecikmesini önleyebilirsiniz. Örneğin, HTML dokümanı aşağıdaki gibiyse: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
small.js kaynağı da aşağıdaki gibiyse: 
  /* contents of a small JavaScript file */
Ardından, komut dosyasını aşağıdaki gibi satır içine alabilirsiniz: 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Komut dosyası içeriğini satır içine almak, small.js için harici isteği ortadan kaldırır ve tarayıcının ilk oluşturma işlemini daha kısa sürede gerçekleştirmesini sağlar. Ancak, satır içine alma işleminin aynı zamanda HTML dokümanının boyutunu büyüteceğini ve aynı komut dosyası içeriğinin birden fazla sayfada satır içine yerleştirilmesi gerekebileceğini unutmayın. Sonuç olarak, en iyi performansı sağlamak için yalnızca küçük komut dosyalarını satır içine almanız gerekir.

JavaScript'i Zaman Uyumsuz Hale Getir

JavaScript, varsayılan olarak DOM oluşturma işlemini engellediğinden ilk oluşturma süresini geciktirir. JavaScript'in ayrıştırıcıyı engellemesini önlemek için harici komut dosyalarında HTML async özelliğinin kullanılmasını öneririz. Örneğin: 
<script async src="my.js">
Zaman uyumsuz komut dosyaları hakkında daha fazla bilgi edinmek için Ayrıştırıcı Engelleme ve Eşzamansız JavaScript bölümünü inceleyin. Eşzamansız komut dosyalarının belirtilen sırada yürütülmesinin garanti edilmediğini ve document.write kullanmaması gerektiğini unutmayın. Yürütme sırasına bağlı olan veya sayfanın DOM'una ya da CSSOM'sine erişmesi veya bunları değiştirmesi gereken komut dosyalarının, bu kısıtlamaları dikkate alarak yeniden yazılması gerekebilir.

JavaScript yüklemesini erteleme

Sayfanın ilk oluşturma işlemi için gerekli olmayan komut dosyalarının yüklenmesi ve çalıştırılması, ilk oluşturma işlemi veya sayfanın diğer önemli bölümlerinin yüklenmesi bitene kadar ertelenebilir. Bu sayede kaynak anlaşmazlığını azaltıp performansı artırabilirsiniz.

SSS

jQuery gibi bir JavaScript kitaplığı kullanıyorsam ne olur?
JQuery gibi birçok JavaScript kitaplığı, sayfayı geliştirerek ek etkileşim, animasyon ve başka efektler ekler. Ancak bu davranışların çoğu, ekranın üst kısmındaki içerik oluşturulduktan sonra güvenli bir şekilde eklenebilir. Bu tür JavaScript'leri eşzamansız hale getirmeyi araştırma veya yüklemesini erteleme.
Sayfayı oluşturmak için bir JavaScript çerçevesi kullanıyorsam ne olur?
Sayfanın içeriği istemci taraflı JavaScript ile oluşturuluyorsa fazladan ağ döngüsünü önlemek için ilgili JavaScript modüllerini satır içine almayı araştırmanız gerekir. Benzer şekilde, sunucu tarafı oluşturma işleminden yararlanmak, ilk sayfa yükleme performansını önemli ölçüde iyileştirebilir: İlk oluşturma işleminin hızlı olmasını sağlamak için JavaScript şablonlarını sunucuda oluşturun ve ardından sayfa yüklendikten sonra istemci tarafı şablon oluşturmayı kullanın. Sunucu tarafı oluşturma hakkında daha fazla bilgi için http://youtu.be/VKTWdaupft0?t=14m28s videosunu izleyin.

Geri bildirim

Bu sayfayı yararlı buldunuz mu?