Webページの読み込みを高速化するJavaScript最適化

Googleのエンジニアであり、ウェブのパフォーマンスと最適化に関する3冊の本を執筆しているSteve Soudersは、スクリプトを使用してページの読み込みを遅くする方法についてJavaScriptパフォーマンスのプレゼンテーションを公開しています。



WebPagetestの統計によると、Alexa Top 100からのサイトへの.jsファイルの読み込みをブロックすると、平均ページ読み込み時間の中央値が3.65秒から2.487秒に短縮されます。つまり、31％ 短縮されます。 Webページの読み込みに時間がかかり、このインジケーターを改善したい場合、Steve Soders氏によると、最初にJavaScriptを調べる必要があります。



Steve Sodersは、最適化の例としてGoogle Analyticsスニペットを挙げています 。

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

彼はラインに特別な注意を払っています

 ga.async = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このパラメーターは、 ga.js



スクリプトが他の非同期スクリプトの実行をブロックしないことを意味します。



もう1つのポイントはinsertBefore



です。 insertBefore



ステートメントをinsertBefore



スクリプトがまだロードされていない場合、一部のブラウザーはスクリプトの実行をブロックすることがinsertBefore



ます。 当然、これによりページのロードが遅くなります。 つまり、このようなブラウザは、Googleアナリティクスモジュールがページに読み込まれるまで、そしてその瞬間に他のすべてのスクリプトがブロックされるまで待機します。 ga.async = trueパラメーターは、多くの最新ブラウザーの状況を修正します。 しかし、まったくそうではありません。



Steve Sodersは、 insertBefore



場合にinsertBefore



= true insertBefore



を無視するブラウザーバージョンを識別するための特別なページを作成しました。 彼は60以上のさまざまなブラウザーから統計を収集しました。表のリンクを見るとわかるように、主な「違反者」はOperaブラウザーです。 テストを実行し、 ここで確認してください 。



JavaScriptのパフォーマンスに関するプレゼンテーションで 、Steve Sodersが、 ControlJSスクリプトの読み込みを高速化するモジュール、およびlocalStorageをキャッシュとして使用することについて語っています。