Web サイトの高速化テクニック第4弾は、JavaScript・CSS についてです。
JS・CSS ファイルの見直しや削減、圧縮による高速化を解説します。
第1弾～第3弾については、以下の記事をご確認ください。
⇒ 速度改善テクニック(1) – 圧縮編
⇒ 速度改善テクニック(2) – 設定編
⇒ 速度改善テクニック(3) – CDN編
外部から読み込む JavaScript/CSS を見直す
Web サイトに埋め込まれた「JavaScript」や「CSS」の削減が一番効果的です。
サイト構成によっては、アクセス解析・ABテスト・Webフォントの埋め込みなど、
さまざまな外部サービスからファイルを読み込む場合があります。
ページを表示する度に全てのファイルが必要となる点に注意しましょう。
ファイル数が増えるほど、ページ読み込みに掛かる時間も長くなってしまうのです。
URL を埋め込むだけで使える便利なサービスも数多く存在しますが、
提供元のサーバーが遅い場合は、ページ全体の表示速度にも悪影響を与えてしまいます。
必要のない JavaScript や Web フォントが残っていないか定期的に見直しましょう。
提供元サーバーがあまりに遅い場合は、自前サーバーからの配信も検討の余地ありです。
JavaScript や CSS のファイル数を減らす
JavaScript や CSS の外部ファイルは、1ファイルごとに通信が発生します。
ファイル取得→解析→ページ反映、といった内部処理も毎回行われています。
つまり、JS や CSS のファイル数を減らすだけでも、高速化が期待できます。
Web サイトを高速化したい場合、ファイル数は少ないほうが望ましいです。
様々な対象法がありますが、一番シンプルに使えるのは、
サイトで使用する JavaScript, CSS を結合して、1ファイルとしてまとめる 手法です。
メンテナンス頻度の低いファイルはまとめて管理してみましょう。
JS/CSS の minify を利用する
JavaScript や CSS には、minify(ミニファイ) と呼ばれる縮小方法があります。
コメントや改行・インデントなどを削減し、サイズを縮めるテクニックです。
コメント・改行・インデントなどは、ブラウザの処理には必要ありません。
余分なデータを削除することで、ブラウザの解析処理の高速化も期待できます。
しかし、コメントや改行を取り除いてしまうとメンテナンス性が悪化するため、
サーバーにアップロードする直前で minify を実施することがベストです。
実際に導入する際は、minify 用のライブラリや自動化ツール等を活用しましょう。
まとめ
今回は、JavaScript・CSS に着目した高速化テクニックを解説しました。
サーバーサイドやインフラ以外に、フロントエンドでも高速化の余地が存在します。
近年の Web サイトには欠かせない JavaScript と CSS ですが、
サイト表示速度への悪影響を最小限に抑えて利用するように心がけましょう。
【関連記事】