JavaScriptを最適化してページ表示を高速化する

公開日：2020/10/7更新日：2023/1/21

CSSの最適化と同じく、JavaScriptも「圧縮」や「インライン化」などのアプローチでファイルを最適化できます。ページ表示の高速化においては事実上必須な工程です。

注意点や作業環境も、CSSのそれと基本的に同じですが、パフォーマンス以外にも目を向けるべき点がいくつかあります。

ファイルを1つにまとめて後で読み込み

<head>タグ内にインラインでコードを記述するのは有効な手段です。

<head>
 <script>
  alert('Hi there!');
 </script>
</head>

しかし、CSSのインライン化と違い、ファイルの読み込み開始直後に<head>タグ内でプログラムを実行しなければいけないケースは少なく、それよりもファイルを1つにまとめて後で読み込む方が最適化につながります。

CSSと違い、JavaScriptはファイルのどこで読み込んでも良いため、できるだけ遅いタイミング、例えば、以下のように</body>直前で読み込むのが定石です。

<html>
 <head>
  ...
 </head>
 <body>
  ...
  <script src="https://example.com/dist/bundle.js"></script>
 </body>
</html>

WordPressの場合は、wp_enqueue_script関数でCSSやJavaScriptなどのファイルを読み込みますが、以下のように5番目の引数をtrueにするだけで</body>直前で読み込んでくれます。

// functions.php

wp_enqueue_script(
 'master',
 'https://example.com/dist/bundle.js',
 [],
 '1.0.0',
 true
);

読み込むファイルが少ないと、Webサーバーとのやりとり（通信）が減るため、高速化につながります。

圧縮する

いくつか圧縮パターンがあります。

オンラインで手軽に圧縮

執筆時点で「js 圧縮」でhttps://syncer.jp/js-minifier/が検索上位です。未圧縮のコードを貼り付けるだけで圧縮済みのコードが表示されます。

コードエディターで圧縮

各コードエディターに圧縮ツールがあります。「js minify」などで検索すると見つかります。

例えば、VS CodeにはMinifyのプラグインがあります。

圧縮したいファイル上でShift + ⌘ + P をクリックし、Minifyを選択します。

VS CodeのMinifyプラグイン
Minifyを選択

これだけで、圧縮済みのJavaScriptファイルが同じフォルダ内に生成されます。

圧縮されたutils.min.jsが生成

node.jsを使う

コードエディタに圧縮ツールを導入するのも良いですが、node.jsを使うのがモダンなやり方です。

例えば、node.jsの有名なツールにWebpackがあります。

引用：https://webpack.js.org/

JavaScript、画像、CSS（SASS）など、あらゆるファイルを1つのファイルにまとめることができるツールですが、主にJavaScriptのファイルをまとめるために使われます。

例えば、①A.js、②B.js、③C.js の3つのJavaScriptファイルがある場合、それを「ABC.js」として1つのファイルに書き出せます。

さらに、Webpackはライブラリもまとめることができるため、jQueryライブラリなども含め1つのファイルに書き出せます。

もちろん、ファイルをただまとめるだけではなく、「圧縮」も同時に行うため、モダンな開発環境には必須のツールです。

軽量なライブラリを使う

JavaScriptは便利なライブラリがたくさんあり、CSSよりもライブラリに頼ることが多いです。

しかし、ライブラリは便利な反面、容量が大きいので、上手く使わないとファイルサイズが肥大してしまいます。

jQueryライブラリが良い例で、たった数行のコードを記述するだけでも、ライブラリ全体を読み込まないといけません。

ファイルを解析して不要なコードを削ぎ落としてくれるWebpackのTree Shakingのような機能を使うことがモダンなやり方ですが、軽量なライブラリを使うことが基本的な対策になります。

例えば、jQueryの一部機能に特化したライブラリはたくさんあるので、jQueryが重いと感じたら、そういったライブラリを代わりに使うべきです。

読み込む「順番」は思わぬ落とし穴

CSS最適化との決定的な違いは、読み込む順番に気をつける点です。

例えば、CSSの場合、パフォーマンス向上の目的でファイルを後から読み込むと、最初に（一瞬だけ）CSSが適用されないページが表示され、後からCSSが適用されます。

もちろん、これは避けなければいけない状況ですが、一瞬だけ見栄えが悪くなるだけなので、重大な問題ではありません。

しかし、JavaScriptの場合は、ファイルが読み込まれる順番が「致命的な問題」になります。

代表的な例はjQueryです。

例えば、以下のコードは動作しません。jQueryライブラリを読み込む前に、jQueryのスクリプトを実行しているためです。

<head>
 <script>
  var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});
 </script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

「$ってなんですか？」とエラーが表示されるでしょう。

また、asyncやdeferの属性を使った「非同期読み込み」も要注意です。

例えば、以下のコードは、jQueryライブラリをスクリプトが実行される前に読み込もうとしていますが、asyncによって非同期で読み込まれるため、スクリプト実行前にjQueryライブラリが読み込まれる保証はありません。

<head>
 <script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <script>
  var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});
 </script>
</head>

非同期読み込みは、想定した通りに実行される場合もあるため、挙動に注意してください。

上記の理由から、ライブラリなどは同期的に読み込むのが原則です。