【保存版】ウェブサイトを高速化して表示速度を改善する10の方法。

一覧へ戻る

今すぐやりたい！サイトの表示速度を改善して利益を増やす10の方法。

Facebook

Twitter

あなたのウェブサイトのスピードには問題がないか、もう一度考えてみよう。

表示速度が1秒遅くなると起こること

ページビューが11%下がる

カスタマー満足度が16%下がる

コンバージョン率が7%下がる

（Aberdeen Groupの調査による）

Amazonの報告により、これは本当だとわかった。サイトの表示速度を100ミリ秒改善すると、収益が1％増加したのだ。Walmartも同じことを行った。サイトの表示速度を1秒改善したところ、コンバージョン率が2％上昇した。 walmart それだけではない。Akamai社の調査で以下のことが明らかになった。

47％のユーザーが、ウェブサイトの1ページは2秒以下で表示されることを期待している。

1つのウェブページの表示に3秒以上かかった場合、40％のユーザーがそのページを見るのをやめてしまう。

オンラインショッピングユーザーの52％が、よく使うサイトを選ぶ際、サイトの表示速度は重要だと考えている。

しかしRadwareのレポートによると、2013年はウェブサイトの平均表示速度は22％遅くなったそうだ。今は1ページを表示するのに7.72秒かかっている。平均的なユーザーが望む2秒のリミットを遥かに超えているのだ。ウェブサイトのスピードアップが決定的な方法であるのは明らかだ。しかしそれは、Googleでの検索結果ランキングを上げるためだけではない。純利益を高く保ち続けるためでもある。今回の記事ではより詳細に、サイトの表示速度を少しでも速くしてより多くの利益を上げることができる10の方法をシェアしよう。

この記事はCrazy Egg Blogに掲載されている記事を和訳したものです。

Contents

1 サイトをスピードアップする10の方法
2 終わりに

サイトをスピードアップする10の方法

1. HTTPリクエストの回数を最小限にする

Yahooによれば、ウェブページの表示時間の80％は、ページの様々なパーツをダウンロードするのに使われている。画像、スタイルシート、スクリプト、Flashなどのパーツだ。これらの要素のそれぞれに対して1回ずつHTTPリクエストが送信される。よって、ページの要素が多ければそれだけページが表示されるのに時間がかかる。このような場合は、サイトをスピードアップする最も手っ取り早い方法は、サイトデザインをシンプルにすることだ。

ページの要素数を減らす。
可能な場合は必ず、画像の代わりにCSSを使う。
複数のスタイルシートは1つにまとめる。
スクリプトを減らし、ページの最下部に記述する。

ウェブサイトに関して言えば、ムダがない方がいいということを覚えておいてほしい。【プロが教えるコツ】各ページの要素数を減らすことを始めよう。そうすれば、ページが表示されるのに必要なHTTPリクエストの回数を減らすことができる。サイトのパフォーマンスはかなり改善されるだろう。

2. サーバー応答時間を短くする

サーバー応答時間の目標は200ミリ秒だ。この記事に書かれたコツを実行すれば、目標は簡単に達成できる。Googleは、ウェブアプリケーションモニタリングソリューションを利用して、サーバーのパフォーマンスを悪化させている原因をチェックすることを勧めている。【プロが教えるコツ】Singlehopによる調査結果「eコマースのインフラの決定的必要性」を読んでもらいたい。サイトのパフォーマンスを高く保つために注目すべき9つのことが学べる。それから、以下のツールを利用して改善に取り組もう。

Yslow – サイトの表示速度を評価し、パフォーマンスを改善する方法
Googleページスピードツール – パフォーマンスのベストプラクティスとそのプロセスの自動化

3. 可能な限りのデータ圧縮

大規模なページ（あなたが高品質なコンテンツを作成しているならば運営しているかもしれない）のデータ量は、100キロバイト以上になることも多い。その結果ページは重くなり、ダウンロードに時間がかかる。表示時間を短くするいちばんいい方法は、「圧縮」と呼ばれる方法を使うことだ。データを圧縮することでページのバンド幅を減らすことができる。それにより、HTTPレスポンスを減らすことができる。Gzipというツールを利用すれば可能だ。多くのウェブサーバーはダウンロードするデータを送る前に、Gzipのフォーマットでデータを圧縮する。サードパーティー製のモジュールを使うこともあれば、ビルトインのルーチンを使うこともある。Yahooによれば、圧縮によりダウンロードにかかる時間を70%削減することができるそうだ。近年のインターネットトラフィックの90%は、Gzipをサポートしているブラウザを経由している。よってGzipはサイトをスピードアップするとても良い機能と言える。【プロが教えるコツ】Gzipを使った圧縮に関する詳細な情報について、リンク先の記事を読んでほしい。それからサーバーが圧縮機能を使えるようにセットアップしよう。（主なWebサーバソフトと設定方法）

Apache – mod_deflateモジュールを使う
Nginx – HttpGzipモジュールを使う
IIS – HTTP圧縮のセットアップをする

4. ブラウザキャッシュを使用可能にする

ウェブサイトを訪問したとき、そのページの要素はキャッシュもしくは一時ファイルとしてハードディスクに保存される。次に同じサイトを訪問したときには、ブラウザはサーバーに再度HTTPリクエストを送信せずにページを表示することができる。かつてYahooに勤務していたTenni Theurerの説明は以下のとおりだ。最初にサイトを訪問したときには、ページを閲覧する前に、ブラウザはHTMLドキュメント、スタイルシート、JavaScriptファイル、画像をダウンロードしなければならない。ページを構成する要素は30個ほどであり、ダウンロードには2.4秒かかるだろう。 load-time-1 ページが一旦表示され、様々な構成要素がユーザーのキャッシュに保存されると、次回にサイトを訪問したときにはほんの数個のファイルをダウンロードするだけでよい。Theurerが行ったテストでは、2回めの訪問時にダウンロードする構成要素はたった3つで、ダウンロード時間は0.9秒だった。サイト初回訪問時より表示にかかる時間が2秒近く減少した。 load-time-2 Theurerによると、1日のサイト訪問者のうち40～60％はキャッシュを保存していない状態で訪問する。こういったユーザーに対しては、ページの表示速度を速くすることはとても大切だ。しかし、次回以降のページ表示速度を速くするために、キャッシュを有効にする必要もある。【プロが教えるコツ】キャッシュを有効にする4つの方法についてはリンク先の記事を読んでほしい。キャッシュの有効期限は、静的なサイトのリソースは少なくとも1週間、広告やウィジェットのような外部のリソースには少なくとも1日設けるべきだ。全てのキャッシュ可能なリソース（JavaScriptやCSSファイル、画像、その他メディア、PDFなど）には、最低1週間の有効期限を設けよう。将来的には1年以上が望ましい。しかし1年以上に設定してはならない。RFC（Request for Comment）のガイドラインに違反してしまうからだ。

5. リソースを縮小する

WYSIWYG（What You See Is What You Get：見たまま出力できるリソース）を使えば、ウェブページを作成するのが簡単になる。だがそういったリソースのコードはややこしくなってしまう可能性もあり、ウェブサイトのスピードをかなり落としてしまう。不必要なコードはウェブページのサイズを増加させるため、コード内の余分なスペースや改行、インデントを削除するのは重要だ。そうすれば、ページはムダがないものになる。そうすることでコードも縮小できる。以下はGoogleの推奨する方法だ。

HTMLのサイズを縮小するには、最適化されたHTMLコードを作成するChromeの拡張機能「Page Speed Insights」を使うとよい。サイトのHTMLを分析し、「HTML最小化」ルールに照らし合わせてくれる。最適化されたHTMLコードを作成するには、「See optimized content」ボタンをクリックすればよい。
CSSを縮小するには、YUI Compressorやcssmin.js（YUI CompressorのJavaScript版）を使ってみるとよい。
JavaScriptを縮小するには、Closure CompilerやJSMin、YUI Compressorを使うとよい。このツールを使えば、開発用ファイルを縮小・リネームしてフォルダに保存する、コンパイル済のプロセスを作成することができる。

6. 画像の最適化

画像に関しては、3つのことにフォーカスする必要がある。サイズ、フォーマット、Src属性だ。

a. 画像サイズ

必要以上にサイズの大きい画像は、表示するのに時間がかかる。できる限り画像のサイズを小さくすることは重要だ。画像編集ツールを使って、以下の3つを実行してほしい。

画像を最適なサイズにトリミングしよう。例えばウェブページの幅が570ピクセルの場合、画像は同じ幅にリサイズすべきだ。幅2000ピクセルの画像をそのままアップロードして、そのwidthパラメータを「width=“570”」のように設定してはならない。ページの表示速度が落ち、ユーザーエクスペリエンスを悪くするからだ。
最低限のレベルまで、色深度を下げよう。
画像のコメントを削除しよう。

b. 画像フォーマット

画像フォーマットについては以下に注意しよう。

JPEGが最適なフォーマットである。
PNGも良いが、古いブラウザは完全にはサポートしていない可能性がある。
小さくてシンプルなグラフィック（10×10ピクセルより小さいか、3色かそれ以下の色数しか使っていないもの）やアニメーション画像にのみGIFを使うべきだ。
BMPやTIFFは使ってはならない。

c. Src属性

正しいサイズとフォーマットを選んだら、コードが正しいかを確認しよう。特に画像のSrc属性を空にするのはやめよう。HTMLでは、画像ファイルのコードは以下のように記述する。<img src=” “>引用符内のソース名が空の場合、ブラウザはページのディレクトリやページのファイルそのものにリクエストを送信する。そうするとサーバーへの不要なトラフィックが増加し、ユーザーデータを破壊することさえあり得る。【プロが教えるコツ】画像をアップロードする前にリサイズしよう。そして必ず、有効なURLを記述したSrc属性を付加しよう。画像を確実に速く表示するためには、ウェブサイトにWP Smush.itプラグインを導入することを考えてみよう。

7. CSS提供方法の最適化

CSSはページのスタイルを決めるのに必要だ。一般的に、ウェブサイトは次の2つの方法のどちらかでCSSにアクセスする。：「外部ファイル形式」- ページが表示される前に実行される。「インライン形式」- HTMLドキュメント内に記述する。外部CSSファイルはHTMLの先頭に実行される。コードは以下のような形式だ。

<!–サイトのスタイル –><link rel=”stylesheet” type=”text/css” media=”all” href=http://サイトのURL/style.css />

インライン形式のCSSはHTMLの中に次のような形で記述する。 inline-css-example

（画像内コメント）インラインCSSの例：フォントファミリーとフォントサイズがHTMLコードの中で設定されている。コードが不必要に繰り返されている。

一般的には外部スタイルシートの方が望ましい。コードのサイズを小さくし、重複も減らすからだ。【プロが教えるコツ】スタイルを設定する場合、外部スタイルシートは1つだけにしよう。スタイルシートを複数にすると、HTTPリクエストの回数が増加するからだ。以下の2つの記事が役立つかもしれない。

CSS Delivery Tool – ウェブサイトが外部スタイルシートをいくつ使っているかがわかる。
外部CSSファイルを統合する方法

（上の図のインラインCSSのように）divタグやヘディングタグを使ってHTMLコードのなかにCSSを記述するのはやめよう。全てのCSSを外部スタイルシートに記述すれば、よりきれいなコーディングができる。

8. Above-the-fold（スクロールしなくても見える範囲）のコンテンツを優先しよう

スタイルシートは1つにし、インラインCSSは記述しないことを勧めたばかりだが、注意してほしいことが1つある。Abobe-the-fold（ページの一番上、スクロールしなくても見える範囲）の表示速度を上げれば、たとえ残りの部分の表示に数秒かかっても、ユーザーエクスペリエンスは改善できる。【プロが教えるコツ】CSSを2つに分けることも考えてみよう。Above-the-foldの部分のスタイルはインラインで短く記述する。表示に数秒かかってもよい部分のスタイルは外部スタイルシートに記述するのだ。

9. サイトのプラグインの数を減らそう

プラグインが多すぎるとサイトのスピードは落ちる。セキュリティ上の問題も出てくるし、時にはクラッシュを引き起こしたり、技術的に難しい問題を起こしたりもする。【プロが教えるコツ】不要なプラグインは無効にするか削除しよう。その上で、サイトのスピードを落とす原因になっているプラグインを取り除いていこう。プラグインを1つずつ選んで無効化し、サーバーのパフォーマンスを測定してみよう。こうすることで、サイトのスピードを落とす原因となっているプラグインを特定できるはずだ。

10. リダイレクトを減らそう

リダイレクトは余計なHTTPリクエストの原因になり、表示にかかる時間は多くなる。リダイレクトは最小限にしたい。レスポンシブウェブサイトを作成しているのなら、メインのウェブサイトからレスポンシブサイトへモバイルユーザーを移動させるのにリダイレクトを使っているだろう。【プロが教えるコツ】レスポンシブウェブサイトへのリダイレクトがサイトのスピードを落とさないよう、Googleは、以下の2つのアクションを推奨している。

モバイルユーザーエージェントを使っているユーザーには、中間のリダイレクトは使わず、HTTPリダイレクションで直接モバイル対応のURLへリダイレクトする。
対応するモバイル版のページを明確にするため、<link rel=”alternate”> タグをデスクトップ版のページに記述する。そうすれば、Googlebotがモバイル版のページを見つけることができる。

テクニカルすぎるように思えるだろうか？心配はいらない。VerveSearchによるリンク先の記事は、ウェブサイトのスピードを落とすことなくモバイルフレンドリーなサイトに切り替えるのに役立つだろう。