Oluşturmayı Engelleyen JavaScript'i Kaldırma

ziyaret edin. Bu kural, PageSpeed Insights, HTML'nizin bir engellemeye başvurduğunu algıladığında tetiklenir harici JavaScript dosyası ekleyebilirsiniz.

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 onu durdurması ve yürütmesi gerekir. . Harici bir komut dosyasında ayrıştırıcı kaynağın indirilmesini beklemek zorunda kalırsınız. Bu işlem, bir ya da daha fazla ağ döngüsüne yol açabilir sayfanın ilk oluşturulma süresini geciktirir. Bkz. JavaScript'in kritik öneme sahip verileri nasıl etkilediği hakkında daha fazla bilgi edinmek için oluşturma yolunu izleyin.

Öneriler

JavaScript'i, özellikle de aynı içeriğe sahip harici komut dosyalarını engellememeli ve getirilebilmesi gerekir. Sayfa içeriğini oluşturmak için gereken komut dosyaları ekstra ağ isteklerini önlemek için satır içi yapılabilir, ancak satır içi içeriğin küçük olması gerekir ve iyi bir performans sunmak için hızla faaliyet göstermelidir. Başlangıç için kritik olmayan komut dosyaları oluşturma işlemi eşzamansız yapılmalı veya ilk oluşturma sonrasına kadar ertelenmelidir. Lütfen unutmayın: Bunun yükleme sürenizi iyileştirmesi için ayrıca CSS yayınını optimize edebilirsiniz.

Satır içi JavaScript

Harici engelleme komut dosyaları, tarayıcıyı JavaScript'in getirilmesini beklemeye zorlar. Bu değer, sayfa oluşturulmadan önce bir veya daha fazla ağ döngüsü ekleyebilir. Harici komut dosyaları küçükse, içeriklerini doğrudan HTML dokümanına satır içi olarak ekleyebilir ve ağ isteği gecikmesi. Ö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 şöyle: 
  /* 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>
Komut dosyası içeriklerini satır içine almak, small.js için harici isteği ortadan kaldırır ve ilk oluşturma süresini kısaltacak şekilde tarayıcı. Bununla birlikte, satır içi eklemenin de ve aynı komut dosyası içeriklerinin satır içine alınması gerekebileceğini ve birden fazla sayfaya gidersiniz. Sonuç olarak, en iyi performansı sunmak için yalnızca küçük komut dosyalarını satır içine almalısınız.

JavaScript'i Eşzamansız Yap

JavaScript, varsayılan olarak DOM oluşturma işlemini engellediğinden ilk oluşturma süresini geciktirir. Alıcı: JavaScript'in ayrıştırıcıyı engellemesini önlemek için HTML async kullanmanızı öneririz. özelliğini gönderin. Örnek: 
<script async src="my.js">
. Bkz. Ayrıştırıcı Engelleme ve Eşzamansız JavaScript başlıklı makaleyi inceleyerek eşzamansız komut dosyaları hakkında daha fazla bilgi edinebilirsiniz. Eşzamansız komut dosyalarının belirtilen sırada yürütülmesinin garanti edilmediğini ve document.write Yürütme sırasına bağlı olan veya erişmesi ya da değiştirilmesi gereken komut dosyaları Sayfanın DOM veya CSSOM'sinin, bu kısıtlamaları hesaba katacak şekilde yeniden yazılması gerekebilir.

JavaScript yüklemesini erteleme

İlk sayfa oluşturma işlemi için gerekli olmayan komut dosyalarının yüklenmesi ve yürütülmesi, ilk oluşturma işlemi veya sayfanın diğer önemli bölümleri bitene kadar ertelendi yükleniyor. Böylece kaynak çekişmesini azaltıp performansı iyileştirebilirsiniz.

SSS

jQuery gibi bir JavaScript kitaplığı kullanıyorsam ne olur?
JQuery gibi birçok JavaScript kitaplığı, eklenecek sayfayı iyileştirmek için kullanılır ek etkileşim, animasyon ve diğer efektler. Ancak bunların birçoğu davranışları, ekranın üst kısmındaki içerik oluşturulduktan sonra güvenli bir şekilde eklenebilir. Bu tür JavaScript'in eşzamansız olup olmadığını araştırın veya yüklenmesini erteleyin.
Sayfayı oluşturmak için JavaScript çerçevesi kullanıyorsam ne olur?
Sayfanın içeriği istemci taraflı JavaScript ile oluşturuluyorsa fazladan kod almamak için ilgili JavaScript modüllerini satır içi ağ gidiş dönüşleri var. Benzer şekilde, sunucu tarafı oluşturma işleminden yararlanmak önemli ölçüde ilk sayfa yükleme performansını iyileştirme: web sitesi oluşturmak için JavaScript şablonlarını sunucuda önce oluşturma işlemini hızlandırıp ardından sayfa yüklendikten sonra istemci taraflı şablon oluşturmayı kullanın. Daha fazla için bkz. http://youtu.be/VKTWdaupft0?t=14m28s.

Geri bildirim

Bu sayfayı yararlı buldunuz mu?

'nı inceleyin.