seo-cro

モバイルファーストインデックス向けのページスピード対策―2019年6月版

モバイルファーストインデックス向けのページスピード対策―2019年6月版

2019年4月にGoogleの公式ブログに、

モバイル向けページ速度対策に関連する内容が発表されました。

2018年モバイルファーストインデックス(Mobile First Index, 以下MFI)

という評価基準が公開されてから、

モバイル上のページスピードが主要なランキング要素になるため注目を集めています。

今回は、最新のページスピード対策のポイント及びその改善方法について解説します。

 

ページスピードの重要性

ページスピードの重要性を遡ると、2016年11月に、

GoogleはMFIに向けてランキングシステムを切り替えすることを発表しました(MFIへの準備)。

既存の検索順位への影響を最小限にするために、1年半の慎重な実験とテストを経て、

2018年3月にMFIに切り替えると公表しました(MFIの開始)。

 

ランキングへの影響

Googleは2010年からページスピード改善を呼びかけおり、

ランキングのコア・アルゴリズに組み込まれました。Google(※1)。

そして、2011年にモバイル対応のツール

「Page Speed Online(※現在ではサービス終了)」がリリースされ、

ページスピードのパフォーマンスに関するサポートも備えていました(※2)。

このツールは2014年5月にリリースしたPageSpeed Insightsの前身でした。

 

その後、2015年から2017年の間、慎重に実験を重ね、MFIの土台を構築させました。

遂に、2019年4月にモバイル上のスピードを評価に加えると公表しました。

ランキングの評価アルゴリズムにページスピードが

追加されたことによりその重要度は高くなっています。

 

ページスピードが遅いとどうなるの?

ページスピードが遅いと、検索順位にマイナス評価を受けるだけではなく、

サイトにとっては大きな悪影響を与えます。例えば、

  • 47%の訪問者は2秒以下のロード時間を期待しています。3秒以上掛かったらサイトを立ち去ると言われます。
  • 10秒以上かかったら、更に30%の訪問者が離脱してしまいます。
  • ロード時間が3秒毎に遅れると、訪問者のロイヤルティーが16%低減する傾向があります。

更に、ページのロード時間が1秒遅れると、ECサイトに16億ドルの売上損失をもたらすとCDNetworksが恐ろしい真実を発表しました。(※3

 

Google Speed Updateとは

2018年7月にGoogle Speed Updateというモバイル上のページスピートを用い、

サイトを評価する新基準を発表しました。

当時まで、PC上のページスピードを評価のアルゴリズムに用いられていたが、

2018年7月以降はモバイル上のページスピードが適応されるという新しい基準です。

 

この新基準のリリースに伴い、Chromeにもいくつの新しい機能が追加されました。

  1. Chromeにユーザーエクスペリエンス・レポートという機能を導入しました。
    それはページスピードのフィードバックを受け、
    ユーザーエクスペリエンスの主要指標として一般ユーザーに公開する仕組みです。

  2. Lighthouseという監察役目の自動ツールを提供することによって、
    ページスピードが随時に把握できます。

  3. PageSpeed Insightsはユーザーエクスペリエンス・レポートのデータを生かし、
    ページスピードの最適化をサポートします。

ページスピードの測定方法及び結果の見方

ユーザー体験及びGoogleのMFI評価基準においてページスピードはとても重要です。

その改善もSEO施策に欠かせません。(※4)。

PageSpeed Insightsにアクセスし、測定先のURLを入力したら、

該当ページのスピードが表示され、更に改善できる項目まで提示してくれます。

ただし、それは特定のページの分析内容しかなく、

端末を変えるともう一度測定しなければなりません。

従って、サイト全体のスピードを把握するために、

一ページずつチェックする必要があり、作業工数がとてもかかります。

 

seoClarityのページスピード機能とは

Googleのページスピードインサイトに対して、
seoClarityのページスピード機能は使いやすくできています。

まず、下記の図がサイト全体状況です。ページ単体のスピードではなく、

全ページの平均速度やデバイス別の速度が確認できます。そのうち、デバイス別に速・中・遅ページの割合がわかります。

更に、期間指定して比較ができるので、サイト全体の改善状況を確認できます。

例えば、下の図の2018年5月において、登録している130ページを詳しく見ていきます。

PCページの大半のページスピードは中であり、モバイルページの大半は速となっていました。

それに対して、2019年5月に2152のページが登録され、

PCページにおいてページスピードの速の割合が40%超であり、

モバイルページの中の割合は70%を占めています。

下の図のように、PC上に遅のページがまだ5%残っていますので、

今後はこの5%の改善をすれば良いことがわかります。

期間を指定して比較する機能は、改修結果の確認及び今後の課題発見に役立つと思います。

次に、Googleの改善項目を見てみます。

デバイス別に頻度の高い問題点を抽出し、時間軸で改善作業の推移図が表示されます。

例えば2018年5月―2019年5月の一年間の推移を確認すると、

2018年8月に13個のページでJavaScriptが最小化されていないので、改善が必要だと分かります。

そして、比較期間を6ケ月と変えると、2019年3月と同年5月の問題はレンダリングであり、

2ケ月間で3ページが改修されたことが確認できました。

 

最後に、改修作業の際、サイトを改善点別・ページ別・ディレクトリ別に

データを切り替えてより詳細な内容を確認することが可能です。

例えば、改善点をまとめたい場合に、フィルターをかけ、

問題のあるURLを絞る事ができ、それぞれの平均インパクトも表示されるため、

作業の優先順位を決めることにも役立ちます。

 

ページスピードの改善方法とは

Googleは2019年5月にPageSpeed Insightsを更新しました。

主な改善点は以下の通りです、(※5)。

  1. 画像のサイズを圧縮する。
     重い画像が使われているページまたは高画質の画像はロード時間が長くなります。
    圧縮ツールを使えば手早くロード時間を短くすることができます。
     画像サイズの最適化は優先的に実施しましょう。 
  2. ブラウザのキャッシュを活用する(※6)。
     キャッシュを有効に設定すると、
     ブラウザは重複のコンテンツを読み込むプロセスを省けるので、
     ロード時間を短くできます。 
  3. サーバーの応答時間を削減する。
     トラフィックの混雑度、キャッシュの設定状況及びプラットフォームの性能により、
     サーバーの応答時間が左右されます。
     したがってプラットフォームの性能向上及び
    キャッシュの活用は応答時間の改善に役立ちます。 
  4. CND(Content Delivery Network)を活用する。
     気づかないかもしれませんが、
     実はサーバーの応答時間の80%がフロントエンドに使われています。
     例えば、アメリカにいるユーザーは日本にあるサーバー上のデータを呼び出す際に、

     物理的な距離の影響で応答時間は本土にあるサーバーとのやり取りより長いわけです。
     従って、海外でサービスを提供する場合に、
     積極的にCDNのネットワークを生かすことがおすすめです。

  5. HTML、CSS及びJSを最小化する。
     コンテンツを表示するまで、ブラウザは外部スタイルの情報の解析に時間が掛かります。
     したがって余計なスペース、強制改行、コメント行及びその他必要のない要素を削除し、
     FCP (First Contentful Paint)時間の削減を目指しましょう。 
  6. 上部コンテンツを優先表示する。
    SCSSファイルに関して、小さなCSSファイルをHTML ドキュメントに直接挿入できます。
    それをインライン化と言います。大きな CSSファイルの場合は、
     完全にインライン化するのではなく、
     スクロールせずに見える範囲のコンテンツの表示に必要な CSS を特定してインライン化が必要です。
     インライン化した部分はサーバーに負担がかからないため、
    より早く表示することが可能です。
     インライン化しない部分はファーストビューに入ってないコンテンツであれば、
     レンダリングの設定で、遅延表示させることがおすすめです(※7)。

 

まとめ

ページスピードはユーザー体験向上の一環として、ますます重要になってきます。
今後も、SEOの目的だけではなく、
サイト全体の最適化において優先的に改善する必要があります。

弊社では、ウェブサイトKPI達成に向け、戦略・戦術立案から施策の実行・効果検証・改善までを一気通貫でご支援可能ですので、お気軽にご相談ください。

この記事のライター

Column by Heartlass 編集部

Column by Heartlass 編集部

おすすめの記事

関連する記事