knowledge

モバイルファーストインデックス向けのページスピード対策―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)。
  • まとめS
    ページスピードはユーザー体験向上の一環として、ますます重要になってきます。
    今後も、SEOの目的だけではなく、
    サイト全体の最適化において優先的に改善する必要があります。

この記事のライター

CroJa 編集部

おすすめの記事

WEB担当者必見!!

実務に役立つ情報をメルマガで無料配信しています。

メルマガ登録はこちらから
メルマガ登録はこちらから

関連する記事