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をキャッシュとして使用することについて語っています。