身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編

Webサイトの表示高速化対策していますか？
日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。
特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。

日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。

幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。
それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。

でも、できるだけ楽したい！と思うのが人の常。
この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。
基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試して解析していきます。

まだまだ未熟で経験不足な部分もあり間違った情報を書いてしまうことあるかもしれませんが、もしそれに気づいた時はコメントやはてブ、Twitterでご指摘いただけるととてもありがたいです（確認して記事をアップデートします）。

高速化のメリット：1秒高速化される毎に10％の売上向上

様々なECサイトで高速化により売り上げが向上した実例があります。

• Shopzilla：6秒から1.2秒に高速化することによって12.0%↑の売上向上
• Bing：2.0秒高速化される毎に5.0%↑の売上向上
• Amazon.com：0.1秒高速化される毎に、1.0%↑の売り上げ向上

手前味噌ですが、弊社のWebサイト高速化サービスもどうぞ「Webサイト高速化サービス」

参考：
The performance business pitch

高速化のデメリット

デメリットと言うほどではないのですが、まず管理/更新の際に少し手間が増えます。
また、かなり強力なキャッシュが効くので、更新や修正を行った際に、キャッシュをうまく回避するようにしなければいけません。

高速化のポイント

まずは全体像を把握します。
なんとなく4つに分けてみました。

このリストは連載中にアップデートする可能性があります。

無駄なリクエストとレスポンスを減らす

1. 読み込むCSSファイル数の削減
2. 読み込むJavaScriptファイル数の削減
3. 読み込む画像数の削減
4. ソーシャル係ボタンなどの無駄な読み込みを減らす
5. アイコンなどをWebフォント化し高解像度にも対応しながらリクエスト数を削減する（追加）
6. リクエストをまとめる
7. ファイルをローカルにキャッシュさせる

非同期で読み込む

1. JavaScriptの非同期読み込みを利用する
2. ブラウザの同時接続数制限を回避する

レンダリングの邪魔をしない

1. レイアウトに関わるCSSのパースを優先させる
2. レイアウトに関係ないJavaScriptは読み込み優先度を下げる
3. CSSセレクタの解析時間を短くする
4. HTMLの解析とレンダリング時間を短くする
5. 画像の読み込みを待たずに全体をレンダリングさせる

応答速度と負荷の軽減

1. すべての読み込みファイルサイズを小さくする
2. サーバー側のキャッシュを有効
3. 静的なファイルは高速なWebサーバーやCDNを利用する
4. DNSルックアップを高速にする（追加）
5. 低スペックな共有レンタルサーバーは極力利用を避ける（追加）

便利なツールを使う

1. Sass, Compass
2. mod_pagespeed
3. AWS

今回はアジェンダ編なので、これらのポイントに対して解決策を列挙していきます。

解決策リスト：リクエスト数の削減

読み込むCSSファイル数の削減

1. 短いCSSはHTMLファイルに直接埋め込む
2. 管理のしやすさはそのままにSass,LESSなどのプリプロセッサを使い@importを使わずCSSファイルをマージする

読み込むJavaScriptファイル数の削減

1. 短いJavaScriptはHTMLファイルに直接埋め込む
2. CoffeeScript、TypeScriptなどのプリプロセッサを使い1つのファイルにまとめる

読み込む画像数の削減

1. CSS Spriteを使って画像を1つにする
2. シャドウなどの表現を画像で行うのではなくCSS3のbox-shadowに置き換える（追加）
3. Base64エンコードを使いCSS,HTML内に直接画像を埋め込む

ソーシャル係ボタンなどの無駄な読み込みを減らす

1. 無駄なスクリプトを読み込まずにAPIを呼ぶ自作のボタンを作成する
2. 読み込まない

リクエストをまとめる

1. サーバーとクライアントの接続状態を維持しリクエストをまとめる（Keep-Alive, Pipelining）
2. mod_deflateを有効にしgzip圧縮を利用する

ファイルをローカルにキャッシュさせる

1. HTML,CSS, JavaScript, ImageなどにExpires Headerを指定する
2. appcacheを利用する

解決策リスト：非同期で読み込む

JavaScriptの非同期読み込みを利用する

1. JavaScript非同期ローダーを利用する

ブラウザの同時接続数制限を回避する

1. ファイルの読み込み元を複数のドメインに分散する

解決策リスト：レンダリングの邪魔をしない

レイアウトに関わるCSSのパースを優先させる

1. CSSをheadタグ内で読み込む

レイアウトに関係ないJavaScriptは読み込み優先度を下げる

1. JavaScriptの読み込みをレンダリングに関わるすべてのタグを除いてbody閉じタグの直前に読み込む

CSSセレクタの解析時間を短くする

1. CSSの親セレクタの指定数を少なくする

HTMLの解析とレンダリング時間を短くする

1. HTMLの無駄なdivタグなどを減らす

画像の読み込みを待たずに全体をレンダリングさせる

1. 画像のwidth,heightを指定する

応答速度と負荷の軽減

すべての読み込みファイルサイズを小さくする

1. mod_deflateを有効にしgzip圧縮を利用する
2. HTML,CSS,JavaScript等の無駄なスペース、改行、コメントを削除する
3. 画像のファイルサイズを落とす

サーバー側のキャッシュを有効

1. DBやPHPのキャッシュを利用する

静的なファイルは高速なWebサーバーやCDNを利用する

1. 静的ファイルがほとんであればApacheよりnginxを利用する
2. Amazon S3, CloudFrontを利用する

DNS Lookupを高速にする

1. Amazon Route53を利用する

低スペックな共有レンタルサーバーは極力利用を避ける

1. Amazon EC2を利用する
2. Amazon VPCを利用する

度々AWS関連のサービスが出ていますが、申し訳ありません。AWS以外のサービスをほとんど使っていないためです。

まとめ

今回は高速化手法の羅列のみになってしまいましたが、次回「リクエスト数の削減」について詳しく紹介していきたいと思います。