ページスピードインサイトのモバイルページが遅い場合の影響と対策
ページスピードインサイトのモバイルページが遅いとユーザーが離脱しやすくなり、SEO対策にも悪影響があります。Googleの調査によると、モバイルページが完全に表示されるまでに3秒以上かかると53％のユーザーは離脱するというデータがあります。改善する方法としては画像の最適化やリソースの圧縮、サーバーの応答時間の短縮、ブラウザのキャッシュの”活用などの方法があります。参考：モバイル表示速度が影響するユーザーの離脱率
1.ページスピードインサイトのモバイルページが遅い場合の影響
モバイルサイトの表示速度が遅いと、ユーザーがページから離れやすくなり、SEO対策にも悪影響があります。
現代において半分以上のユーザーはモバイルでサイトを見ています。それで、ユーザー離れを防ぐためにモバイルページの表示速度を上げる事が必須です。ですから、ユーザーの滞在時間を増やしてサイトを楽しんでもらうために、また検索順位を上げて多くのビジターにサイトに訪れてもらうためにも、モバイルページの表示速度を上げる改善をしましょう。
1-1.ユーザーが離脱する
モバイルサイトの表示速度が遅いと、ユーザーがサイトから離れやすくなります。ネットサーフィンをしている時、サイトのパフォーマンスが悪くイライラして、別のサイトに移ったという経験ありますよね？せっかくサイトに来てくれても、それが原因でユーザーが離れてしまうのは残念です。グーグルの調査は「モバイルサイトの表示速度が1−10秒の場合、サイトのビジターは123％増える」と述べています。
時間をかけて有益な情報をサイトに投稿したとしても、表示速度が原因でユーザーが離れてしまうなら、本末転倒です。ストレスなくサイトの情報を楽しんで滞在時間を増やしてもらい、さらには、また訪れたいと思ってもらうサイト作りのためにも表示速度を早くしなければなりません。
(引用｜“Find out how you stack up to new industry benchmarks for mobile page speed”|Google HP)
1-2.SEO対策に悪影響がある
モバイルページの表示速度はSEOの検索順位を決める要素の一つです。ですから、ユーザーフレンドリーな表示速度が早いサイトを構築し、SEOの順位を上げる工夫をしましょう。表示速度が遅いとSEOで上位表示を狙うのが難しくなります。そうなればビジターは増えませんし、もちろん収益にも繋がりません。
SEO流入のユーザーは疑問の答えを知りたいと思っています。しかも、出来るだけ早くそうしたいと思っています。2018年7月から導入された”Speed Update（スピードアップデート）”で
Googleはモバイルページの読み込み速度をモバイル検索のランキング要素に組み入れることを発表しました。Googleはサイト制作者にサイトのパフォーマンスがユーザーに与える影響を考え、モバイルサイトの表示速度が遅いなら対応するよう勧めています。
金谷武昭 Twitter
2.ページスピードインサイトのモバイルページが遅い場合の対策
対策をすれば、モバイルページの表示速度を速くすることが可能です。最初に、ページスピードインサイトで自分のサイトのモバイルページの表示速度を計測し、原因を探りましょう。
PageSpeed Insights（ページスピードインサイト）
サイトを分析方法は簡単です。「ウェブページのURLを入力」に自分のサイトのURLを入力し、分析をクリックするだけ。以下の6つの項目のラボデータが分かります。
- First Contentful Paint First Contentful Paint は、テキストまたは画像が初めてペイントされるまでにかかった時間です。
- 速度インデックス 速度インデックスは、ページのコンテンツが取り込まれて表示される速さを表します。
- インタラクティブになるまでの時間 操作可能になるまでの時間とは、ページが完全に操作可能になるのに要する時間です。
- First Meaningful Paint First Meaningful Paint は、ページの主要なコンテンツが可視化されるまでにかかった時間です。
- CPU の初回アイドル First CPU Idle marks the first time at which the page’s main thread is quiet enough to handle input.
- 初回入力遅延の最大推定時間 ユーザーに発生する可能性がある初回入力遅延の最大推定時間とは、最も長いタスクの時間（ミリ秒単位）です。
原因がわかれば、必要に合わせて7つの対策をすれば、サイトを軽くすることが可能です。
2-1.画像を最適化する
画像の容量が大きくて表示速度が遅くなっているなら、画像を圧縮して容量を小さくしなければなりません。なぜなら画像の容量が原因でサイトのパフォーマンスが下がることが多いからです。
見やすいサイトを作るために画像をたくさん使うと、画像が表示スペースのほとんどを占めていることがあります。それで、画像を圧縮し、ウェブサイトの容量を圧縮しなければなりません。
Web上で画像を圧縮できるSquooshやTinypngを使ったり、プラグインにEWWW Imaga OptimizerやCompress JPEG & PNG imagesを導入して、画像サイズを軽くしましょう。
2-2.HTMLやCSS、JavaScriptを圧縮する
リソース（HTML、CSS、Javascript) のサイズを圧縮すると、表示速度を速くできます。不要なデータや重複データ、使用されていないコードを発見したなら、それを削除してサイトの容量を軽くしましょう。サイトを分析し、圧縮できる箇所を見つけたならその部分を最適化していきましょう。不要なコメントや改行を見つけたら削除します。そうするなら、不要なリソースがなくなり、サイト全体の容量を減らせます。
2-3.サーバーの応答時間を短縮する
サーバーの応答時間が遅く表示時間が遅れている場合、それを短縮しなければなりません。サーバーの応答時間は200ミリ秒以下に抑えなければ、ユーザーは別のサイトへ行ってしまいます。そうならないためには原因を見極めなければなりません。
サイトのデータを計測し調査しましょう。問題が見つかったら改善し、周期的にこの作業を繰り返します。サーバーの容量が足りないならグレードアップしたり、PHPをバージョンアップして改善しましょう。
2-4.キャッシュを活用する
キャッシュの最適化は、サイトの表示速度を速めるのに効果的です。キャッシュとは、一度アクセスしたサイトのデータをブラウザで一時的に保管しておく仕組みのことです。閲覧したサイトをもう一度表示する時、そのサイトをもう一度インターネット上から開くのではなく、キャッシュに保存されたページから開くため早く表示できます。どのリソースを、どれくらいの期間キャッシュを有効にするかを正しく設定すれば、サイトを高速化できます。
2-5.最初のコンテンツを優先表示させる
ユーザーが最初に目にする、スクロールしなくても表示されるエリアのコンテンツを少しでも早く提供することを重視しなければなりません。なぜなら、モバイルページの読み込みに 1 秒以上かかった場合、ユーザーの集中力は途切れてしまうからです。それで、最初に見えるコンテンツを表示するのに必要な JavaScript や CSS は外部参照ではなく、インライン化しましょう。
2-6.リンク先でリダイレクトを使用しない
サイトのパフォーマンスを向上させるために、リダイレクトの使用は最低限に留めておきましょう。なぜなら、リンク先でリダイレクトを使用しているので、表示速度が遅くなっている場合があるからです。リダイレクトとは、ページを訪れたユーザを別のURLに自動的に誘導し、転送させるシステムのことです。パソコンとスマートフォンで同じURLを使うなら、この問題を回避できます。
2-7.静的コンテンツファイルを圧縮する
静的コンテンツは、動的コンテンツに比べるとレスポンスは早いですが、圧縮するならさらにサイトの表示速度を速めることができます。コンテンツを圧縮したいなら、gzip圧縮がおすすめです。似たような文字列があるなら、それらの文字列を置換することにより、全体のコンテンツサイズを縮小してくれます。
3.ページスピードインサイトのモバイルが遅い場合は対策が必要
ページスピードインサイトのモバイルサイトの表示速度が遅いと、ユーザーが離れてしまいますし、SEO対策にも悪影響があります。すぐに対策しましょう。
対策方法は以下の7つです。
- 画像を最適化する
- HTMLやCSS、JavaScriptを圧縮する
- サーバーの応答時間を短縮する
- キャッシュを活用する
- 最初のコンテンツを優先表示させる
- リンク先でリダイレクトを使用しない
- 静的コンテンツファイルを圧縮する
上記の対策をとれば、サイトの容量が減り表示速度が上がります。有益な情報を投稿しても、表示速度が遅いのが原因でユーザーが離れてしまっては残念です。そうならないために、ページスピードインサイトで自分のサイトのスピードを計測し、原因にあった対策をとるようにしましょう。そうすれば、サクサク見れるユーザーフレンドリーなサイトになるでしょう。
モバイルサイトではなく、Webサイトを軽くしたい方は次の記事をご覧ください。