Prosperity and InSPIRE

最新技術レビューから時事ネタ、ユーモラスな小話まで、
幅広いコンテンツをPro-SPIRE独自の切り口で
発信していきます!

Webサイト高速化手法について(フロントエンド編)

2016.05.18

Webサイトを運用する上で、サイトの表示速度は特に重要な要素であり、訪問者の離脱率に大きく関わっています。今回は、フロントエンドの処理で実行できるWebサイトを高速化する際に、必要なテクニックをご紹介します。

フロントエンド高速化手法

  1. フロントエンド高速化とは?
  2. 画像サイズ(メディア)の最適化
  3. CSSスプライト
  4. 外部ファイルのリクエスト数を削減する
  5. CSS、JSの読み込み位置を</body>タグの前に挿入する
  6. 補足

1. フロントエンド高速化とは?

ここでいうフロントエンドとは、「html、cssjavascript」web技術のことを指しています。フロントエンド高速化のテクニックは多々ありますが、基本的には、以下の3点を最適化するものです。

  • サーバーとの通信回数。
  • サーバーとの通信量。
  • ブラウザレンダリング。

サーバーとの通信の数は、htmlに含まれている要素(CSS、javascript、メディアファイルなど)の数により決定されます。
基本的にはサーバーとの通信回数が多ければ多いほど、パフォーマンスは下がるといった認識でOKです。
当然、通信されたファイルサイズの容量が大きいほどダウンロード時間がかかり、ページの表示速度は遅くなります。

その後、ダウンロードされたファイル(html,CSS,javascript)により、DOMツリーを生成し、
ブラウザのレンダリング(表示処理)が行われます。生成されるDOMツリーが多い場合や、javascriptなどでDOMの書き換えが
起こる場合などは、表示速度は著しく低下します。

では、上記3点を最適化するためのテクニックについて、ご紹介します。

2. 画像サイズ(メディア)の最適化

サーバーとの通信量を減らすためのテクニックです。
専用の圧縮ツールなどを使えば、画質を保った状態で、ファイルサイズを小さくすることができます。
Webサイトを軽量化する上で最も効果の出やすい箇所です。

●参考リンク
■劣化なし!画像を「圧縮、縮小」する無料ツールやフリーソフトまとめ
http://commte.net/blog/archives/2636

3. CSSスプライト

サーバーとの通信回数を減らすために、複数の画像を一つの画像として読み込ませるテクニックです。
複数あるアイコン画像などを、ひとまとめしてCSSの背景画像として設定し、CSSのpositionなどで
背景画像の位置を制御します。

最近ではアイコン画像などは、CSS3で表現するものが多くあまり使われなくなったテクニックですね。

●参考リンク
CSSスプライトについてあれこれ。
http://lopan.jp/css-sprites/

4. 外部ファイルのリクエスト数を削減する

こちらもサーバーとの通信回数を減らすためのテクニックです。
外部ファイルであるCSSやJavaScriptなどの複数ファイルをひとつのファイルとして結合し、リクエスト数を減らします。

Gruntなどのツールを使用すれば、複数ファイルの結合だけでなく無駄な改行や余白などを削除してまとめてくれるので、ファイルサイズを小さくしサーバーとの通信量を減らすことができます。

●参考リンク
Grunt: The JavaScript Task Runner(公式サイト)
http://gruntjs.com/

■GruntでCSS圧縮を行う
http://hacknote.jp/archives/7151/

5. CSS、JSの読み込み位置を</body>タグの前に挿入する

webページの表示速度を高めるためには、CSSやJSの読み込み位置が重要なポイントとなっていきます。
CSSやJavascriptなどはリソースの内容がwebページの表示に影響をあたえる可能性があるため、ロードと評価が行われている最中はレンダリングがブロックされます。
下記のリスト1をご参照ください。

リスト1

CSSやjavascriptなどは、headの中に記述されており、html中のDOM要素が読み込まれる前にロードされてしまいます。これでは、スクリプトの評価が先に発生するため、レンダリングに遅延が発生します。
大きなサイズのスクリプトをロード、また評価に時間がかかる処理などを行っていると、ブラウザのローディングが終わるまで何もないページが表示されることになります。

リスト2

リスト2の場合、javascriptの外部ファイルを</body>の前に挿入しています。※CSSなどは、FOUNC(スタイル未適用状態のチラつき)が起こるため、そのままの位置で表示しています。
この記述であれば、DOMを読み込んだあとにスクリプトのロードと評価が実行されるため、ページのロードを早くすることができます。

6. 雑感

今回は、作業コストに対してパフォーマンスの影響が高いものをご紹介しました。作業的なハードルも低いためすぐに取り掛かれるものばかりです。

ちなみに、ページの読み込み時間を計測してくれる「PageSpeed Insights」は、表示速度を採点方式で計測しているためかなりおすすめです。

●PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja