PageSpeed Insightsでスマホの読み込み速度を改善する

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. PageSpeed Insightsでスマホの読み込み速度を改善する

PageSpeed Insightsでスマホの読み込み速度を改善する

PageSpeed Insightsでスマホの読み込み速度を改善する

読み込み速度がモバイル検索のランキング要素になる

2018年1月18日、Googleは、「ページの読み込み速度をモバイル検索のランキング要素に使用する」と発表しました。

ページの読み込み速度は、これまでもデスクトップ検索を対象としたランキング要素として使用されていましたが、2018年7月からは、モバイル検索のランキング要素として使用されるということです。
ユーザーの利便性を高めるために、重要な問題と考えているのですね。

また、Googleは、ページ読み込み速度と離脱率の関係について、「モバイルサイトの読み込みに3秒以上かかる場合は、訪問の53%が離脱される」という見解も発表しています。
私個人に置き換えてみても、確かにいくら興味があるサイトでも、3秒表示されなければ他を探すことが多いです。

読み込み速度が遅いことは、検索ランキングへの影響だけにとどまらず、アクセス数低下→売上の減少とつながりかねないので、これを放置してしまうのは避けたいところです。

PageSpeed Insightsで現状を把握し、改善する

GoogleのPageSpeed Insightsでページ表示速度を測定し、解析することができます。アカウントの取得などは不要で、どなたでも簡単に測定することができます。

PageSpeed Insightsにアクセスします。

PageSpeed Insights01
URLを入力し、「分析」ボタンを押すと、分析結果が表示されます。

速度

画面の左上に表示される「速度」は、Chromeのブラウザを利用している、情報提供した人の実際のデータを元に算出されています。
PageSpeed Insights02

FCPとは、「ページ内の文字・画像などが最初に表示された時間」です。
DCLとは、「HTMLドキュメントの読み込みが完了するまでの時間」です。

この数値が全てのページの読み込みの中で、

  • 上位の1/3=速い(緑色の文字)
  • 中間の 1/3=平均(オレンジ色の文字)
  • 下位の1/3=遅い(赤の文字)

に分類されます。今回測定したサンプルページでは、どちらも緑色の文字なので、「速い」ということがわかります。

ページの読み込み分布

PageSpeed Insights03

全体的なページの読み込み分布が表示されます。
サンプルページの全体の結果としては、「速い」に分類されているということになります。

最適化スコア

「速度」の右側に表示されている「最適化」では、次の2つの項目において、最適化の状態を0~100のスコアで評価しています。

  • スクロールせずに見える範囲のコンテンツの読み込み時間
  • ページ全体が表示されるまでの時間

PageSpeed Insights04

スコアは「Good」、「Medium」、「Low」のいずれかに分類されます。

  • Good: ページのスコア 80 以上 ⇒最適化の余地がほとんどありません。
  • Medium: ページのスコア 60~79 ⇒パフォーマンスに関する一般的なおすすめの方法の一部が実装されておらず、ある程度最適化の余地があります。
  • Low: ページのスコア 0~59 ⇒ページは最適化されておらず、最適化すべき点がかなり多くあります。

サンプルページは、「Good」と評価されました。

「最適化についての提案」を確認する

次に、「最適化についての提案」に表示されている改善案を確認します。
下の画像のように、どのファイルに最適化が必要なのか、表示されています。

PageSpeed Insights05

最適化されるべき項目は下記の10項目です。

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  2. サーバの応答時間を短縮する
  3. ブラウザのキャッシュを活用する
  4. 画像を最適化する
  5. 圧縮を有効にする
  6. JavaScriptを縮小する
  7. CSSを縮小する
  8. HTMLを縮小する
  9. リンク先ページのリダイレクトを使用しない
  10. 表示可能コンテンツの優先順位を決定する

最適化できている項目は、その下の「適用済みの最適化」に表示されます。改善内容に対する説明ページが用意されていますので、わからない場合は確認してください。

最適化されたファイルをダウンロードできる

ページの一番下部にある、「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードすることができます。」から、最適化されたファイルをダウンロードすることもできます。

画像の圧縮ツールを使う

無駄に画像が大きいと、表示速度を遅くしている可能性があります。無料で画像圧縮ができるサイトもありますので、新たにファイルを作る時には、あらかじめ画像のサイズが大きくならないように気をつけます。

SEOのためだけでなく、せっかく訪問してくれたユーザーが快適に使えるように、ホームページのパフォーマンスを高める改善をしていきましょう。

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!