先日、Googleから「スピードアップデート（Speed Update）」を全てのユーザーに適応すると公表がありました。以前から言われていましたが、予定通り7月からの実施となりましたね。
「スピードアップデート」はPC検索だけではなく、モバイルページの読み込み速度をモバイル検索のランキング要因として使用するものですが、要約するとページの読み込み速度が遅くなればなる程、検索エンジンからの評価が下がるアルゴリズムです。（元々早いページには影響がほとんどないようです）
とは言え、モバイルページに限らず、サイトスピードが早いことはいろいろな面でメリットになるのでスピードの改善・表示速度の高速化は、出来る限り対策しておきましょう。
今回は、多様にある改善方法や高速化の中から、定番と言えるGoogle PageSpeed Insightsの使い方をご紹介します。モバイルだけでなく、PCの表示速度や最適化の方法も提案してくれる無料のツールです！
Contents
サイトスピードが遅いことによるデメリット
そもそもサイトスピード・読み込み速度を早くする理由とは何でしょう。
冒頭でも伝えましたが「スピードアップデート」はPC・モバイル検索のランキング要因・順位結果につながります。また、読み込み速度はランキング以外でも重要になってきます。
例えば、表示速度が遅くなると、以下の現象が起こると言われております。
- Googleによれば、ページの反応が0.5秒遅くなるとアクセス数が20％低下する
- Amazonによれば、ページの表示速度が0.1秒遅くなると、売り上げが1%低下する
参照:Google PageSpeed Insights Developers
実際に多くのサイトで検証結果も出ていますが、表示速度が1秒遅くなるごとにそれぞれアクセス数が5％～20％の減少が見られているようです。
また表示速度はユーザー体験やユーザービリティにも影響しますので、離脱率が上がり回遊率が下がれば、以下の点も懸念されます。
- PVやトラフィックの減少
- CV（お問い合わせや商品購入の行動）の減少
- ユーザーの満足度の減少
- 上記による売上の減少や検索順位の下降
参照:Google PageSpeed Insights Developers
私もページが開けなくてイライラしたり、ページを閉じてしまった経験は多くあります。
皆さんもそういった経験はありますよね？
つまり検索エンジンからの評価だけでなくユーザーからの評価という点で、サイトスピードの改善や表示速度の高速化は疎かに出来ない対策なのです。
ただし、注意が必要です。
「スピードアップデート」はページの読み込み速度が遅い程、検索エンジンからの評価が下がるアルゴリズムですが、逆に早いサイトの評価が上がるわけではありません。
元々早いページの場合、検索結果にほとんど影響はありません。
サイトスピードの改善は、運営を続けているうちに遅くなってしまったサイトの改善や、ユーザー体験・ユーザービリティ向上の為に行うという意識を持って取り組みましょう。
Google PageSpeed Insightsの使い方・分析
それでは本題であるGoogle PageSpeed Insightsの使い方・分析方法を見ていきましょう。
まずは下記リンクからサイトへ飛びましょう。
PageSpeed Insights
Google PageSpeed Insightsの使い方
使い方は至って簡単。
サイトにアクセスし、URLを入力し、「分析」をクリックするだけ！
面倒なインストールもログイン登録も一切不要！
サイトスピードのスコアリング
モバイルとパソコンのサイトの表示速度をそれぞれ点数と色でスコアリングしてくれます。
タブを切り替えることでそれぞれ確認出来ます。
モバイルのスコア
パソコンのスコア
スコアリングの見方
スコアは0～100の値で評価され、数字が大き程、高評価となります。
また色は緑（Good）、黄色（Medium）、赤（Low）の三段階で評価されます。
スコアが80以上の場合、高パフォーマンスなサイトとして評価されるので、80、または緑（Fast）を目安に改善を行っていきましょう。
Google PageSpeed Insightsで提案される最適化の種類
スコアの他に、提案内容も表示してくれます。
様々な制作環境やシステムの有無の考慮により、提案自体は漠然とした内容となっていますので、それぞれの環境や対応可能かどうかを考慮して対策を行っていきましょう。
Google PageSpeed Insightsで提案される最適化の種類は以下の9種類です。（2018年7月現在）
- リンク先ページでリダイレクトを使用しない
- 圧縮を有効にする
- サーバーの応答時間を改善する
- ブラウザのキャッシュを活用する
- リソースを圧縮する
- 画像を最適化する
- CSS の配信を最適化する
- スクロールせずに見える範囲のコンテンツのサイズを削減する
- レンダリングを妨げる JavaScript を削除する
それぞれの詳細はGoogle Developersが提供するPageSpeed Insights のルールをご覧ください。
なんだか漠然として、具体的に何をしてよいのか迷ってしまいますね。
その中でも比較的わかりやすく、効果的なのが「画像を最適化する」です。
多くのサイトで画像の画質がWeb用に最適化されてなかったり、CMSの投稿時にそのまま画像を使ったりしている為、画像を最適化するだけでスコアが上ることが多く、おすすめです。
画像の最適化の一番簡単な方法は下記をご覧ください。
Google PageSpeed Insightsで行える最適化（画像、JavaScript、CSSの最適化）
実はGoogle PageSpeed Insightsは、分析・提案するだけのツールではありません。
分析と同時に画像、JavaScript、CSSを最適化したリソースを用意してくれています。
もちろんダウンロード出来るので、利用することで上記の提案の多くを修正、改善することが出来ます。
見落としやすいですが、ページの下方にありますので、必要な方はダンロードして活用してください。
本来であれば画像やJavaScript、CSSの最適化は意外と時間が掛かりますが、活用すればかなりの時短になり、手間もありません。
提案の内容でダウンロードが可能です。
JavaScript、CSSの最適化は余分な改行や、コメントアウト等が削除されます。
JavaScript、CSSは一度差し替えてしまうと人によっては編集が困難になる場合もありますので、編集予定のある方はよく検討してから差し替えるようにしましょう。
まとめ
「スピードアップデート（Speed Update）」を全てのユーザーに適応するとアナウンスが有り今後、Google PageSpeed Insightsを利用する機会も増えることでしょう。
まずは使い方の基本を抑えるとともに、サイトスピードの改善や高速化する意味を改めて確認しましょう。
提案される最適化はサイトやサーバーの状況によって対応策が異なりますので、また詳しくご紹介いたします。
【Google PageSpeed Insights】に関する記事はこちら
コメント