ページ速度

【初心者のサイト改善】PageSpeed Insightsの使い方・項目の意味・改善方法まとめ

コーポレートサイト・ブログ・ECショップ問わず、すべてのWEBサイトにとってページを表示する速さは重要な要素です。

なぜなら読み込み・表示速度が遅いと、訪問者がサイトから離脱する可能性が高くなり、機会損失につながるからです。

とはいえ、過去の僕と同じように

過去の自分
過去の自分
サイトの表示速度を速くしたいけど、一体何を改善すればいいんだろう?

そう思う方もいるはず。

そんなとき役に立つのが、Googleが提供してるページの表示速度を計測ツール「PageSpeed Insights」です。

このツールを使うと

  • サイトのどこに課題があるのかがわかる
  • どんな改善をすれば、ユーザーにとって快適なサイトになるかがわかる

といったメリットがあります。

そこで今回は、WEBサイトやブログの表示速度を改善していくための「PageSpeed Insights」の使い方について解説します。

PageSpeed Insightsを使う前の注意点

PageSpeed Insightsを使うには、「表示速度を分析したいサイトのURL」が必要です。

事前にコピーしておきましょう。

PageSpeed Insightsの基本的な使い方

物は試しということで、まずは早速使ってみましょう。「PageSpeed Insights」へアクセスします。

pagespeed-insights_top

赤枠の入力フォームにチェックしたいWEBサイトのURLを入力し、黄色枠の『分析』ボタンを押します。

01_PageSpeed-Insightsの使い方_URLを入力する

入力するWEBサイトのURLは、分析したいサイトの

  • http://ドメイン名.●●●/
  • https://ドメイン名.●●●/

上記のどちらかを入力して下さい。

サイトの分析は大体1分ほどで完了します。


分析結果が出たら、「MOBILE」と「DESKTOP」のどちらかを選択して、それぞれの結果を見ることができます。

02_モバイルとデスクトップを選ぶ

「MOBILE」と「DESKTOP」は以下のような意味になっています。

  • MOBILE:スマホ表示でのサイト評価
  • DESKTOP:パソコン表示でのサイト評価

PageSpeed Insightsは一度の分析で、スマホとパソコンの情報を取得できます。

それぞれの結果はページ上部のタブを切り替えると確認しましょう。

MOBILE(スマホ表示でのサイト評価)結果

MOBILEタブをクリックすると、以下の画像のようなページが表示されます。

04_mobileの評価

DESKTOP(パソコン表示でのサイト評価)結果

DESKTOPタブをクリックすると、以下の画像のようなページが表示されます。

05_DESKTOPの評価

PageSpeed InsightsでWEBサイトの採点結果を確認しよう

分析結果は点数として表示されます。点数は0~100ポイントの範囲で、以下の画像のように採点されます。

06_採点結果

そして3段階評価で分類されます。

スコア評価
90-100速い
50-89平均
0-49遅い

上記の表のとおりで、スコアが大きいほど、「パフォーマンスが良いサイト」として評価されます。

そのため、緑色の90点以上を目指すように改善していくのが理想です。

スコアは分析するタイミングで多少上下します。

そのため時間を分けたり、そのほかの分析ツールと併用して、何度か測定した結果で判断した方が良いでしょう。

また、PageSpeed Insightsは継続的にアップデートされていて、Googleで新しいルールが追加されたり、分析の改良があるとスコアが変わることもあります。

PageSpeed Insightsで提供される情報の意味とは?

PageSpeed Insightsで提供される情報は、

  • 英語表記で馴染みがない
  • 日本語に翻訳してもピンとこない

といった点があり、初心者には難しく感じてしまいます。

なので、それぞれの項目にどんな意味があるのかを調査して、以下のようにまとめてみました。

項目意味
Field DataGoogleChromeを利用しているユーザから得られた情報を元に、WEBサイトの体験価値(ページ速度の判定結果)を確認できるもの
Origin SummaryChrome User Experience Report(CrUX)と比較した全てのページの速度の判定結果を確認できるもの
Lab DataLighthouseで分析した結果を、スコアの評価を分かりやすく表してくれたもの
Opportunitiesページ表示速度を上げるための改善案(対応するとどのくらい時間短縮できそうなのか)が書かれたもの
Diagnosticsアプリケーションに関する改善案が書かれたもの
Passed audits改善する必要がないと判断されたもの

Field Data(フィールドデータ)とは?

GoogleChromeを利用しているユーザから得た情報を元に、WEBサイトの体験価値(ページ速度の判定結果)が確認できるものです。

CrUX(Chrome User Experience Report)と比較した、全ページの速度判定も確認できます。

FieldData

この記事を書いたときは、まだField Data(フィールドデータ)が全然溜まっていませんでした。

表示されるようになったら、新しい画像を掲載します。

CrUX(Chrome ユーザーエクスペリエンス レポート)とは?

WEBサイト全体の中で自分のサイトがどの位置(ランク)にいるかがわかる目印のことです。

これは、GoogleChromeを利用しているユーザから得た情報を元に計算・比較されていて、「早い」、「平均」、「遅い」という3段階評価が表示されます。

【UX(User Experience)とは?】

ちなみに、UXとはユーザーエクスペリエンス(User Experience)の略で、「ユーザーが製品・サービスを通じて得られる体験」のことを言います。

Lab Data(ラボデータ)とは?

Lighthouseで得られたデータを元に「6つの指標」が表示されます。

LabData
項目意味
First Contentful Paint(コンテンツの初回ペイント)テキストまたは画像が初めて表示されるまでにかかった時間のこと
First Meaningful Paint(意味のあるコンテンツの初回ペイント)訪問者が「メインとなる情報が表示された」と判断するまでの時間のこと
Speed Index(表示速度)WEBページのコンテンツが表示されるまでの速さのこと
First CPU Idle(CPUの初回アイドル)ユーザーが操作してから反応するまでの時間のこと
Time to Interactive(インタラクティブになるまでの時間)ユーザーがWEBページで操作できるようになるまでの時間
Max Potential First Input Delay(最大推定 FID)ユーザーが入力をして、反応するまでの時間のこと

そしてField Data(フィールドデータ)と同様に、以下の3段階評価となっています。

アイコン評価
速い
平均
遅い

Lighthouseとは

WEBサイトのパフォーマンスを測定するツールの1つです。

Lighthouseは、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。

サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ(PWA)対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。

デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse(灯台)」と名付けられました。

Opportunities(改善項目)とは?

ページ表示速度を上げるための改善案のことです。

改善案を対応すると、どのくらい時間短縮ができるのかといった目安も書かれています。

Opportunities

また、以下の2つで改善案の重要度が表示されています。

アイコン評価
最優先で改善すべき課題
改善したほうがいい課題

Diagnostics(診断)とは?

アプリケーションに関する改善案のことです。

こちらも改善を行うことで、ページ表示の時間を短くする効果が得られます。

Diagnostics

また、以下の2つで改善案の重要度が表示されています。

アイコン評価
最優先で改善すべき課題
改善したほうがいい課題

Passed audits(合格した項目)とは?

改善する必要がないと判断されたもののことです。

Passedaudits

この項目が多いほど、あなたの運営しているWEBページがユーザーに速く情報を与えていると判断できます。

PageSpeed Insightsでの改善項目を実践する

PageSpeed Insightsで「改善したほうがイイよ」と言われている項目では、どんな風に改善をしていけばいいのか?

それを一緒にみていきましょう。

改善項目は随時実践中です。

課題をクリアする具体的な方法を見つけ次第、徐々に掲載していきます。

Properly size images

この項目は「画像が適切なサイズで指定されていないよ」という場合に発生します。

解決方法は、ページの画像をデバイスの解像度を考えたレスポンシブデザインに対応させることです。

Avoids Enormous Network Payloads

この項目は「ページで使っている画像などのリソースの合計サイズが大きすぎる」という場合に発生します。

解決方法は、ページで使っている「画像の容量を圧縮して最適化すること」です。

初心者の方でもカンタンにできる方法は以下の通りです。

画像容量を圧縮する方法
  1. WEBサービスで画像を圧縮する
  2. プラグインでさらに画像を圧縮する

です。

以下の記事で画像圧縮のやり方の詳細をまとめていますので、参考にされてみてください。

STEP1:WEBサービスで画像を圧縮する

WEBサービスの「Tinypng」を使って、画像容量を圧縮します。

やることは「ドラッグ&ドロップ」だけ!

画像の劣化も少なく、画像容量を大幅に削減できます。

tinypng
【初心者のサイト改善】画像サイズや容量を圧縮するtinypngの使い方を解説最近ページの読み込み速度が遅いと感じていませんか?それは画像のサイズが原因かも。この記事では画像のサイズを圧縮して容量を減らし、ページ速度改善するために使える「tinypng」の使い方について解説しています。...

STEP2:プラグインでさらに画像を圧縮する

Tinypngをさらに有効活用するために、プラグインを使って画像を圧縮します。

以下の記事で紹介している「EWWW Image Optimizer」を導入すると、初心者でもカンタンに画像の容量を削減できます。

EWWW_Image_Optimizer
【初心者のサイト改善】プラグイン「EWWW Image Optimizer」の設定方法と使い方WordPressでブログ記事をたくさん投稿していくと、ある問題が起きます。 それは「画像ファイルのせいで、サイトの表示速度が遅く...

まとめ

ページ表示速度の改善は、以前からGoogleが推奨している課題です。

PageSpeed Insightsを使って、少しでも訪問者が快適に見れるよう改善し、より良いネットライフを提供していきましょう。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です