Oluşturmayı Engelleyen JavaScript'leri Kaldırma

Bu kural, PageSpeed Insights, HTML'nizin, sayfanızın ekranın üst kısmında görünen bölümünde yüklemeyi engelleyen harici bir JavaScript dosyasına başvuruda bulunduğunu algıladığında tetiklenir.

Genel Bakış

Bir tarayıcının bir sayfayı kullanıcıya görüntülemek amacıyla oluşturabilmesi için öncelikle sayfayı ayrıştırması gerekir. Ayrıştırma sırasında engelleme yapan bir harici komut dosyası ile karşılaşırsa, durması ve o JavaScript'i indirmesi gerekir. Bunu her yaptığında bir ağ gidiş-dönüşü ekler ve bu da sayfanın ilk oluşturulma zamanını geciktirir.

Öneriler

Ekranın üst kısmını oluşturmak için gereken JavaScript, satır içine yerleştirilmiş olmalıdır. Sayfaya yeni işlevsellik eklemek için gereken JavaScript ise ekranın üst kısmının içeriği yayınlanana kadar 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 Küçük JavaScript

Harici komut dosyaları küçükse, onları doğrudan HTML dokümanına ekleyebilirsiniz. Küçük boyutlu dosyaları bu şekilde satır içine almak, tarayıcının sayfayı oluşturmaya devam etmesine olanak verir. Ö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>

Ve kaynak small.js şuna benziyorsa:

  /* contents of a small JavaScript file */

Bu durumda komut dosyasını aşağıdaki şekilde 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>

Bu, small.js öğesini HTML dokümanında satır içine yerleştirerek ona ilişkin harici isteği ortadan kaldırır.

JavaScript yüklemesini erteleme

JavaScript'in sayfanın yüklenmesini engellemesi için JavaScript'i yüklerken HTML async özelliğini kullanmanızı öneririz. Örneğin:

<script async src="my.js">

JavaScript kaynaklarınızda document.write kullanılıyorsa eşzamanlı olmayan yüklemeyi kullanmak güvenli olmaz. document.write kullanan komut dosyalarının farklı bir teknikle yeniden yazılmasını öneririz.

Ayrıca, eşzamansız şekilde JavaScript yüklerken, sayfanız birbirine bağımlı komut dosyaları yüklüyorsa, uygulamanızın komut dosyalarını uygun bağımlılık sırasına göre yüklediğinden emin olmak için dikkat etmeniz gerekir.

SSS

jQuery gibi bir JavaScript kitaplığı kullanıyorsam ne olur?
İlave etkileşim, animasyonlar ve diğer efektler eklemek üzere sayfayı geliştirmek için JQuery gibi pek çok JavaScript kitaplığı kullanılır. Ancak bu çalışma biçimlerinin çoğu, üst kısımdaki içerik oluşturulduktan sonra güvenli şekilde eklenebilir. Bu tür JavaScript'lerin yürütme ve yüklenmesini sayfa yüklendikten sonrasına taşıma konusunu araştırın.
Sayfayı oluşturmak için bir JavaScript çerçevesi kullanıyorsam ne olur?
Sayfanın içeriği istemci tarafı JavaScript ile oluşturuluyorsa, fazladan ağ döngüsünü önlemek için ilgili JavaScript modüllerinin satır içine eklenmesini araştırmalısınız. Benzer şekilde, sunucu tarafı oluşturma işleminden yararlanmak, ilk sayfa yükleme performansını önemli ölçüde iyileştirebilir: JS şablonlarını sunucuda oluşturun, sonuçları HTML'ye satır içi olarak ekleyin ve uygulama 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.