27社レンタルサーバー徹底比較 →

コンマ1秒縮める為のPageSpeed Insightsの使い方

pagespeed-insights
ひーちゃん@ライター

14社のサーバー利用経験があるブロガー・ライター。WordPress開設1年2ヶ月で月50,000円達成。

ひーちゃん@ライターをフォローする

PageSpeed Insightsページスピード インサイトを使いこなし、サイトの最適化をすればブログの表示速度を改善できる可能性があります。最適化すると、検索ユーザーが読みやすいページになり直帰率を下げられるかもしれません。

直帰率

直帰率は”直ぐに検索結果に帰る”こと。特定のキーワードで検索しブログ記事をクリックしたものの、同じブログの他記事を読まずに検索結果へ戻ってしまう。ブログが表示されない、記事がおもしろくない、など様々な要因が関係する。

ひーちゃん
ひーちゃん

ひいてはSEOや検索順位にも影響しかねないサイトの最適化は、ブログ運営者の取り組むべき重要な課題です。

ただし、専門用語が多いPageSpeed Insightsの使い方を熟知し実践するのは難しいものです。とりわけブログ未経験者にとってはそう言えるでしょう。この記事ではPageSpeed Insightsの使い方用語解説と改善方法を徹底解説しました。

PageSpeed Insightsによる当サイトの計測結果

PageSpeed Insightsによる当サイトの検索結果を公開します。モバイルスコアとパソコンスコアがあるので、両方とも確認なさってください。

pagespeed-insights_toppage_mobile-score
モバイルスコア
pagespeed-insights_toppage_pc-score
パソコンスコア
モバイルスコア71点
パソコンスコア98点
PageSpeed Insightsのスコア
ひーちゃん
ひーちゃん

モバイルスコアはそれなりの点数であるものの、改善の余地があると言えます。

PageSpeed Insightsの使い方

PageSeed Insightsの使い方を解説します。登録不要かつ無料で利用できるので、ぜひお試しください。

PageSpeed Insightsの計測方法
  • STEP.1
    PageSeed Insightsにアクセス
    pagespeed-insights

    まず PageSeed Insights にアクセスしてください。

  • STEP.2
    サイトURLをコピー&ペーストする
    pagespeed-insights_frame

    分析したいサイトのURLをコピーします。「ウェブページのURLを入力」にペーストしてください。

    pagespeed-insights_url
  • STEP.3
    分析が完了するまでしばらく待つ
    pagespeed-insights_test

    分析が完了するまで15秒ほど待ちましょう。計測時間はステータスバーの動きに示されます。

  • STEP.4
    モバイルスコアとパソコンスコアをチェックする

    分析が終わると、モバイルスコアとパソコンスコアが表示されます。

    はじめに表示されるのはモバイルスコアです。

    pagespeed-insights_toppage_mobile-score

    左上のタブがあります。

    pagespeed-insights_tab

    「パソコン」タブをクリックし、パソコンスコアもチェックしてください。

    pagespeed-insights_toppage_pc-score

計測結果は多少の誤差があります。

pagespeed-insights_mobile-score2

また、誤差があるので小さなスコアアップは本当の意味で改善していないかもしれません。1度だけでなく時間を空け2,3回計測します。

PageSpeed Insightsでサイトを詳細に分析する

PageSpeed Insightsでサイトを詳細に分析しましょう。

ひーちゃん
ひーちゃん

それぞれの用語解説を見ながら分析をすすめ、改善に役立てます。

モバイルスコアとパソコンスコア

pagespeed-insights_toppage_mobile-score

PageSpeed Insightsはモバイルスコアとパソコンスコアがあります。両方確認するようにしましょう。

一般的に重要とみなされるのはモバイルスコアです。ほとんどのブログはスマホでアクセスされるからです。パソコンスコアが100点となってもモバイルスコアが低いならページ最適化の余地があります。

スコアの違いから明白ですが、モバイルとパソコンで詳細な分析結果が異なります。

Lighthouse

Lighthouseとは、アプリやページを評価するGoogle拡張機能の1つ。PageSpeed Insightsより高機能であり、パフォーマンスの計測以外にSEOや他の要素の評価を確認できる。

詳細な分析結果は改善したいデバイスに合わせ選びましょう。ブログのアクセスや広告成約の大多数がパソコンであるならモバイルスコアを軽視してはいけないものの、それほど気にする必要はありません。

ひーちゃん
ひーちゃん

GoogleアナリティクスやASPのリファラなどで、アクセスデバイスの比率を確認できます。

スコアは3色で評価されます。

  • 速い:90~100
  • 平均:50~89
  • 遅い:0~49

遅いスコアであれば、さっそく改善に取り組まねばなりません。

ひーちゃん
ひーちゃん

この後に開設される各数値を含め、PageSpeed Insights全体の数値の良し悪しはこれら3色で示されます。

モバイルサイトのアクセスが多いサイト運営者など、モバイルサイトに特化したアドバイスが欲しいなら Test My Site の利用もおすすめです。全17ページの最適化案をGET!Test My Siteの使い方 をお読みください。

フィールドデータとOrigin Summary

pagespeed-insights_fielddate

フィールドデータとOrigin Summaryは実際のchormeユーザーから取得したデータです。フィールドデータは分析した特定ページのデータであるのに対し、Origin Summaryはサイト全体から取得したデータを扱っています。

ユーザーが利用するサイト全体の最適化を望むなら、Origin Summaryの数値を重視しましょう。LP(ランディぐページ)など特定ページを重点的に改善したいならフィールドデータを使えます。

ひーちゃん
ひーちゃん

どちらも取得データ不足の場合は表示されません。

フィールドデータとOrigin Summaryの各評価項目を解説しました。

評価項目
  • FCP:最初のコンテンツを読み込んだ時間
  • SI:速度インデックス
  • LCP:最大コンテンツを読み込んだ時間
  • TTI:クリックなどユーザー操作が可能になった時間
  • TBT:読み込みがブロックされた時間
  • CLS:レイアウトのずれ幅
ひーちゃん
ひーちゃん

上記画像によれば、FCPの時間が1.9Sとなっています。これは最適化の余地があり 改善できる項目 の対象です。

ラボデータ

pagespeed-insights_labodate

ラボデータとはLighthouseで測定したデータです。

Lighthouse

Lighthouseとは、アプリやページを評価するGoogle拡張機能の1つ。PageSpeed Insightsより高機能であり、パフォーマンスの計測以外にSEOや他の要素の評価を確認できる。

ラボデータは、フィールドデータとorigin Summaryと違って自分のパソコンやサーバーで1回のみ測定された結果です。平均的なデータではなく、計測時の通信速度、サーバーの込み具合、利用するデバイスなどさまざま要素で数値が変動しやすいです。

ひーちゃん
ひーちゃん

当然、自分とは違う通信環境だったり混雑しやすい時間帯だったりすると数値が悪化することもあります。

ラボデータの評価項目は、フィールドデータとorigin Summaryと同じです。

評価項目
  • FCP:最初のコンテンツを読み込んだ時間
  • SI:速度インデックス
  • LCP:最大コンテンツを読み込んだ時間
  • TTI:クリックなどユーザー操作が可能になった時間
  • TBT:読み込みがブロックされた時間
  • CLS:レイアウトのずれ幅

改善できる項目

pagespeed-insights_improvement

改善できる項目はページ最適化のための改善方法を提案したものです。具体的に何をすればよいのか明確に指摘されます。

ただし、専門用語も多いうえ、改善に多大の時間を要する項目もあげられるので注意してください。改善の効果が大きな3項目にしぼり解説します。

ひーちゃん
ひーちゃん

まずは費用対効果の高い3項目から取り組むのがおすすめです。

最初のサーバー応答時間を速くしてください

最初のサーバー応答速度を速くしてください、と表示されればサーバーが遅いです。ページを表示させるために必要なデータを返すサーバーの速度が遅く、この速度がこの後の全動作に影響します。

スタートダッシュで遅れているため、その他の項目で頑張っても速い速度を取り返せない可能性が高いです。そのため、数ある 改善できる項目 のうち非常に重要度が高い項目と言えます。

とはいえ、サーバーの速度や処理を変えることはブログ運営者にできません。今のサーバーで改善することは難しいため、表示速度で定評のあるサーバーに乗り換えるのがおすすめです。

表示速度の速いおすすめサーバーは関連記事にまとめました。

ひーちゃん
ひーちゃん

当サイトは表示速度の速い エックスサーバー で運営しています。

効果的な画像フォーマット

効果的な画像フォーマット、が挙げられたら画像を圧縮しましょう。必要以上に高画質な画像を使っている可能性が高いです。ウェブページで必要とされる画質まで圧縮することで表示速度を改善できます。

ひーちゃん
ひーちゃん

圧縮するとは、画質を落とすと考えてください。もちろん、画像の美しさを損なうほど落としてはなりません。

画像を圧縮したいなら、専用のwebサービスやWordPressプラグインを活用してください。

おすすめの画像圧縮ツール

すでにたくさんの画像をブログで使っているなら、すべての画像を最適化できるEWWW image optimizerがおすすめです。

適切なサイズの画像

適切なサイズの画像が挙げられているなら、画像サイズを小さくしましょう。レスポンシブ画像を作る方法もありますが、 効果的な画像フォーマット 同様に画像圧縮ツールを使うのが便利です。

おすすめの画像圧縮ツール

これらのツールを使うと、画像サイズつまりデータ量が小さくなるので、より短時間で読み込めるようになります。

PageSpeed Insights分析結果が悪ければ高速サーバーを使おう

server1

PageSpeed Insightsの分析結果が悪ければ高速サーバーを使いましょう。

無料サーバーや格安サーバーを使っているなら、表示速度の速い3社に乗り換えることで速度を大きく改善できるかもしれません。

表示速度の速いサーバーTOP3
  1. エックスサーバー:ページ読み込み1.0秒
  2. ConoHa WING:ページ読み込み1.1秒
  3. ロリポップ!:ページ読み込み1.2秒

ページ読み込み時間はGTmetrixで計測しました。 GTmetrixの使い方はこちら を参照してください。

3社ともWordPressかんたん移行機能があります。この機能を使えば、サーバー移転は簡単な入力内容とクリック操作でサーバー移転が完了します。

ひーちゃん
ひーちゃん

ブログ未経験者でも簡単です。わたしも、この機能を使いエックスサーバーに乗り換えました。

まとめ

PageSpeed Insightsを使いページの最適化をすれば表示速度を大きく改善できます。表示速度を改善することで、読者はもっと快適にブログを読めます。ページ滞在時間が増えたりPV数が増えたりするかもしれません。

次の分析項目を熟知し、サイト最適化をすすめましょう。

ブログが遅いままで良いことは何一つありません。WordPressテーマを変更したり画像を圧縮したりしても最適化されないなら、サーバー移転が有効です。

コメント

タイトルとURLをコピーしました