PageSpeed Insightsを使ってWEBサイト表示を高速化

「あなたのWebサイトの表示速度は早いですか？」

最新の研究では、Webサイトの表示に3秒以上かかると、訪問者のおよそ半分が表示を諦めるという結果が報告されています。

また、表示速度を改善することによってアクセス数や売上が変化するという報告もあります。

Webサイトの高速化ができていれば、獲得できたはずの訪問者を逃すことはなかったかもしれません。

PageSpeed Insightsを使えば、Webサイトの表示が遅くなっている原因を教えてくれます。原因を一つ一つ改善することでWebサイトの高速化が実現できるでしょう。

ここでは、大切な訪問者を逃さないためにWebサイトの表示を高速化する改善テクニックをご紹介します。

PageSpeed Insightsとは

PageSpeed Insightsは、モバイルやパソコン向けのページのパフォーマンスと、改善方法を確認できる、Googleが提供する無料ツールです。

サイトのURLを入力するだけで、表示スピードの評価と具体的な改善項目を表示してくれます。

PageSpeed Insightsで確認できる内容は下記のとおりです。

PageSpeed Insightsの使い方

PageSpeed Insightsの使い方を紹介します。

1. PageSpeed Insightsにアクセス後、表示速度を調べたいWebサイトのURLを入力 → 「分析」ボタンをクリックします。

2. 分析が終了すると、「モバイル」「パソコン」で表示する際のスコアが表示されます。

3. スコアが黄色、または赤で表示されている場合は、「改善できる項目」を参考にして改善を進めます。

WEBサイトを高速化する改善ポイント

WEBサイトの表示速度を改善する方法をご紹介します。

html、CSS、javascriptの軽量化

読み込むCSSファイルは可能な限り少なくすることが有効です。
例えば短いCSSはHTMLファイルに埋め込むことや外部ファイル化でもデータの圧縮となり削減が可能となります。

またjavascriptはソースの～タグ内ではなく、タグの直前に記述することで処理時間を早くすることが可能です。

編集しやすいようにと改行を挿入するなど見た目を良くするため余白を入れることがほとんどですが、余計な空白やコメントはファイルサイズが大きくなる原因です。

画像ファイルの最適化

CSSやjavascriptよりも効果が出やすいのが画像の最適化です。

画像を圧縮すると比例して画質が悪くなることも考えられますが、劣化させることなく画像ファイルを軽量化するサービスも多数あります。

それによって読み込み速度の向上につながります。サムネイル画像を使うのも効果的です。

ブラウザキャシュの活用

「.htaccess」を設定するのが一般的な方法です。
ここで注意が必要なのは「.htaccess」の設定を間違えるとサイトが表示されなくなることや、誤った記述をするとサーバー負荷が高くなる不具合が生じる可能性があります。

CSSスプライトを利用する

サイトの読み込み速度を高速化するのに最近多くのサイトで導入されています。

読み込み速度が速くなるメリットはありますが更新が大変になるデメリットもありますのでサイトの目的にそった利用をしていきましょう。

amazonやFacebook、YouTubeなどの大手サイトでは導入されていますが、Web製作者からすれば作業が増えるのでバランスを考えましょう。

CSSセレクタのパフォーマンス

ブラウザはセレクタを右から左へ読んでいきます。表示速度を早くするためには

JavaScript/CSSの排除

Googleは以下の2通りの解決方法を推奨しています。

OS/ミドルウェアの最適化

基本的にはMySQLでもPHPでもバージョンを新しくすればするほど性能は良くなっているため、最新のバージョンにするイコール高速化することができます。

クラスタ化するMySQL Clusterやフレームワークも最新のバージョンのほうが過去のバージョンよりも優れている可能性が高いので常に最新バージョンに保つことで高速化に繋がります。

WEBサイトを高速化する3つのメリット

検索結果の上位に上がりやすくなる

ユーザーの利便性は検索順位にも影響し、売上にもつながります。
ページスピードが早ければ訪問者もより多くの情報を見ることになりサイトの評価も高まります。

検索エンジン（Google）は、「ユーザーの利便性」を重視しサイトの順位を決定しているため、表示が遅いサイトは評価を下げられ、表示が速いサイトは、評価の高いサイトであると加点するようになりました。

実際にGoogleは2010年4月、正式に「ページの表示速度が正式に順位決定に関係する」と発表し、サイトの表示速度は、検索結果の上位を目指すための要素の1つとして、重要な項目になりました。

海外で行われた調査により、高速化で売り上げが向上した実例が多数あります。

閲覧のストレスをなくし、よりページを見てもらえる

逃していた25％のユーザーがよりページを閲覧し、興味を持つようになります。
400人来ていたら100人のユーザーを取り逃がしていた計算です。
購入率が1％で1人あたりの売上が10000円の場合、売上は理論上1.33倍に上がります。

WEBサイトの表示速度が遅い場合のデメリット

サイトを閉じる人が増え二度とアクセスしない

ページの表示に6秒かかった場合、離脱率（ページを消す）が25％も上昇し、61％が二度とアクセスしません。

上位表示されてクリックされても表示が遅かった場合、戻って他のサイトに移動してしまって訪問者を取り逃す可能性があります。

得られたはずの売り上げを得られない

自信のある商品・サービスでもページ表示が遅いせいでユーザーを逃している可能性があります。
せっかく商品を買おうと思って購入ページに移動してもサイトの読み込み速度が遅いので他のサイトで購入されてしまう可能性があります。

表示が遅いと似たようなライバルサイトに移動

はじめて訪れたサイトの読み込み速度が遅いとき75％の人が違うサイトへ移動します。
実際の店舗と違ってユーザーは数回クリックすれば他のサイトへ移動することができます。

遅いと感じてしまったら似たようなサービスや商品を扱っている別サイトに逃げてしまうでしょう。

顧客満足度の大きな低下

Webサイトの表示が1秒遅くなるたびに16％顧客満足度が低下します。遅くなる原因としてはプラグインや記事の写真・画像データが大きく読み込み速度の処理が関係します。

まとめ

レンタルサーバーで高速化出来ることはキャッシュのプラグインを導入したり.htaccessで参照先のパスを圧縮したり、一度訪問したユーザーにローカルに保存して再訪問のページを早く出す程度にとどまります。

VPSやクラウドサーバー（root権限付きサーバー）に移設するとなった場合は、root権限が付いているのでミドルウェアとかOSのチューニングができるため高速化出来る範囲が広がります。

ApacheやLAMP環境で運営していてもボトルネックがどこかを見つけて原因となるミドルウェアを動作に影響が起きなければ交換ができます。Nginxを採用したりmysqlのバージョンをあげたり、DBに頻繁にアクセスする場合はクエリキャッシュを使ったりとかできます。

WEBサイト高速化はどこまで望んでいるかと、何が原因かを把握していて今より早くすることは簡単です。

何が原因で（プログラムが問題か、DBが問題か、ミドルウェアの実行のプロセスが問題など）調べてわかっているけど対処方法がわからないという状態のほうがチューニングはし易いといえます。

その場合はチューニングが明確なので、もちろん全体的にチェックは行いますが具体的に閾値の変更やキャッシュをはるタイミングと開放するタイミングをどのように変更したかなど明確な設定変更が可能となります。