表示速度改善！SEOに効果的な必ずやるべきサイト高速化手法40選（3/3ページ）

29．CDNを活用する

CDNとはコンテンツの配信を最適化するために、複数のプロキシサーバーにファイルをキャッシュさせておいて、リクエストの際はそこからファイルを送り出す仕組みを提供しているサービスです。

簡単に言うと、大規模なプロキシサーバーを提供するサービスです。

メリットは多数のサーバーを使用しているので負荷分散ができ、しかも地理的要因でより近いサーバーからファイルを取得することができ、通信時間の短縮ができます。

このサービスは大規模なサーバー環境が必要なため、普通は有料で提供されているサービスですが、「Cloud Flare」というサービスは無料で使用できます。

有料に比べて性能は劣りますが、負荷分散などのメリットがありますので、高速化のために使用するべきです。簡単に登録でき、ネームサーバーを変更するだけで利用できます。

上級編

30．DNS Lookupを減らす

DNS Lookupはhost名とIPアドレスを関連付けるための処理です。

host名が多ければ多いほどこの処理が増え、ファイルのリクエストに時間がかかってしまいます。

なので、host名を多くするのは避け、DNS Lookupを減らすようにしましょう。

推奨されているhost名の数は2～4の範囲なので、その範囲に収めるようにしましょう。

31．ETagを適切に利用する

ETagはキャッシュされたファイルが最新のものかどうかチェックするためのデータです。ETagにはリクエストされたファイルの更新日時が明記されており、それがキャッシュファイルのものと同じであればキャッシュを活用します。違うのであれば、その新しいファイルを送り付けます。

複数のサーバーを使用している場合は、サーバーごとでETagが異なることがあります。もし、別のサーバーにリクエストを送ったら、キャッシュがあるにもかかわらず、ファイルをいちいちダウンロードすることになります。

これは、キャッシュが意味をなさず、ダウンロード時間がかかってしまうので対策をするべきです。

ETagの値の基準となるものを指定したり、ETagそのものを削除することも有効な手段になります。詳しくは、以下の記事をご覧ください。

32．マニフェストキャッシュを活用する

マニフェストキャッシュとはHTML5で新しく導入されたキャッシュ方法です。これは、ダウンロードしたファイルを端末のローカルにキャッシュしておき、次にそのサイトを訪問するときはそのキャッシュを活用するというものです。

HTML、CSS、JS、画像などのファイルをキャッシュすることができ、これを活用するとかなり高速化されます。

一切変更を加えないコンテンツなどにやるといいでしょう。また、動的コンテンツでも、静的な部分だけマニフェストキャッシュを活用し、動的な部分は後からAjaxで取得するというのも効果的だと思います。

マニフェストキャッシュについては以下のサイトを参考にしてください。

注意として、このキャッシュはかなり強力なので、頻繁に更新されるコンテンツには使用しない方が良いでしょう。

33．BigPipeを取り入れる

BigPipeとはFacebookに導入されているページ高速化の手法です。

普通のwebページではすべてのプログラムが処理されるまでファイルは送信されません。しかし、バッファを都度フラッシュすることで、そのフラッシュされた前の内容は処理が完了したらすぐに送信されて、画面上に表示することができ、それを利用した手法です。

わかりやすく説明すると以下のようになります。表示するのにA・B・Cの3つの処理が必要なページだとします。

普通の場合
  • Aの処理 → 3秒かかる → 3秒経過 → Bの処理へ　（B・Cの処理があるのでまだ表示されない）
  • Bの処理 → 5秒かかる → 5秒経過 → Cの処理へ　（Cの処理があるのでまだ表示されない）
  • Cの処理 → 2秒かかる → 2秒経過 → 全ての処理完了　（計10秒かかってやっと表示される）
バッファをフラッシュする場合
  • Aの処理 → 3秒かかる → 3秒経過 → バッファをフラッシュ → Aで処理された部分だけ表示される → Bの処理へ
  • Bの処理 → 5秒かかる → 5秒経過 → バッファをフラッシュ → Bで処理された部分が追加で表示される → Cの処理へ
  • Cの処理 → 2秒かかる → 2秒経過 → バッファをフラッシュ → Cで処理された部分が追加で表示される → 全ての処理完了

このような感じで、普通の場合はすべてのプログラムの処理にかかる10秒後に表示されますが、バッファをフラッシュする場合は、その都度表示されるので、最初の3秒でAがまず表示され、BもCも処理が完了次第表示されます。

Facebookのページを見てもらえばわかるように、コンテンツは徐々に上から順番に表示されていくのが確認できると思います。

これは確実に体感速度が向上し、特に処理が遅いページなどの体感速度の向上にかなり便利です。

このバッファをフラッシュするのは、PHPの「flush()」と「ob_flush()」の関数を使えば簡単にその都度、処理結果を送信して表示させることができます。

そして、BigPiPeはこれを改良したもので、バッファをフラッシュした後に、Javascriptによって、その都度表示されるコンテンツに必要なCSS・JS・画像を非同期で読み込ませるということをします。

そのことによって、CSSなどにおいても非同期化を図ることができ、さらに高速化ができるのです。

このBigPipeの詳細な仕組みは以下を参考にしてください。

そして、このBigPipeを再現できるJSプラグインがGitHubにありますので、それを導入すればBigPipeと同じことをでき、高速化を見込めるでしょう。

seporaitis/bigpipe · GitHub

34．nginxを利用する

nginxとはCSSや画像などの静的なファイルの取り扱いに関して高速に動作するサーバーです。

リバースプロキシにおけるキャッシュサーバーとして活用することができます。

静的ファイルを高速に取り扱うことができるので、キャッシュサーバーとして設置しておけばApacheなどより、静的なファイルを高速に通信することができます。

プロキシなので、セキュリティや、動的ファイルと静的ファイルの負荷分散に対しても使えるので導入できる人は、キャッシュサーバーとして導入することをおすすめします。

35．Varnishを利用する

Varnishは動的なコンテンツのキャッシュとして働くリバースプロキシです。

Facebookなどの大手も取り入れており、動的コンテンツをキャッシュすることで、動的プログラムの負荷を軽減することができます。

アクセスがかなり集中するサイトだと、ほんの数秒キャッシュするだけでもかなりの負荷が軽減でき、高速化することができるので、必要なサイトは導入することをおすすめします。

36．HHVMを利用する

HHVMとは、Facebookが開発した、PHPをより高速にすることの特化したサーバーです。

このHHVMを使用すると、CPUの使用率を大幅に削減できます。

これはかなりの負荷低減効果が期待でき、結果的に高速化を実現できるでしょう。

サーバーを自分で設定でき、PHPを使っている人ならば導入することをおすすめします。

37．HandlerSocketを利用する

HandlerSocketとはDeNA社が開発した、MySQLに高速にアクセスするためのプラグインです。

単純な参照クエリで数倍～10倍まで高速化できます。

様々な言語で使用できるので、MySQLを使用している人は導入することをおすすめします。

確認・計測編

38．高速化の効果を計測する

高速化の手法を取り入れたあとはしっかりと効果を計測しましょう。おすすめはそれぞれ以下の3サイトです。

GTmetrix
YahooとGoogleがそれぞれ定めている高速化手法が実施されているかランク付きで評価されます。
PageSpeed Insights
Googleが提供している確認ツールで、サイトごとに実施するべき高速化手法を確認することができます。
Pingdom
入力したURLのページでダウンロードされるファイルの順番と、それぞれのファイルの通信処理にかかった時間を詳しく計測できます。

39．ボトルネックの分析・改善

上記のサイトで速度を計測しただけでは意味がありません。しっかりとボトルネックを見つけ、それを改善するべきです。

ボトルネックを発見する際には以下のことに注意して分析と改善をしましょう。

  • どの項目が高速化できていないのか？
  • その項目は提示された対策ができるのか？
  • どのページに時間がかかっているのか？
  • その原因は何なのか？
  • 遅いプログラムはないか？
  • 無駄なファイルや記述はないか？
  • 問題を解決するためにできる高速化手法は何か？

以上のようなことを確認しながら問題を確認し、それを修正したり高速化手法を加えたりすることで、表示速度を改善するといいでしょう。

40．最終確認

最終確認として、以下の質問にすべて「YES」と答えられたら高速化対策は完璧です。

  • 最大限の高速化手法を用いたか？
  • 高速化にあたり試行錯誤を繰り返したか？
  • 改善できないところは自分の範囲外のところだけか？
  • 以前と比べ、速くなったと実感できるか？
  • ページの表示は遅いと感じないか？
  • 他のサイトと比べて高速か？
  • これ以上、高速化はできないと言い切れるか？

まとめ

以上が、サイトの表示速度を改善するための高速化手法です。

できるものはすべてやることで最大限の高速化を実現することができます。

しかし、今回示したこととは違うことをやってもサイトによっては高速化できることがあるので、高速化の対策をする際は、しっかりと試行錯誤を繰り返して、自分のサイトに一番最適な高速化手法を取り入れるようにしましょう。

そして、最終確認ですべてベストアンサーで答えられたら完璧なサイトです。その完璧をぜひ目指すようにしましょう。