ワードプレス

「PageSpeed Insights」とは?ページの表示速度を簡単計測する方法【Googleの無料ツール】

「PageSpeed Insights」とは?計測方法_アイキャッチ



あずきです🐥

「ページ表示速度」の改善に欠かせないツール…

PageSpeed Insights

について、ブログ初心者さん向けに1から解説していきます♪

具体的には、次の2点です

  • 「PageSpeed Insights」とは?
  • 「PageSpeed Insights」で、ページの表示速度を計測する方法

さっそく見ていきましょー🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

「PageSpeed Insights」とは?【サイトの表示スピードを分析してスコア化】

ブログガイド_見出し_01

「PageSpeed Insights」は、Googleが無料で提供している「WEBサイトの表示スピード計測」のためのツールです

主な機能は次の通り

  • URLを貼って「分析」をクリックするだけで、表示速度を計測して「スコア=点数」化してくれる!
  • このスコアは、「モバイル」と「パソコン」の2パターンで出してくれる!
  • さらに、計測の「内訳」も表示してくれる!
  • その上、「改善できる項目」まで親切に教えてくれる!

サイトやブログ運営をわりと本格的にやるなら、もはや必須とも言えるくらい便利なツールです

つづいて、肝心の計測方法について見ていきましょう🐥

「PageSpeed Insights」で、ページの表示速度を計測する方法【URLを貼って「分析」を押すだけ】

ブログガイド_見出し_02

まずは、「PageSpeed Insights」にアクセスします

「PageSpeed Insights」とは?計測方法_2-01

↑ TOPページが開けたら…

「PageSpeed Insights」とは?計測方法_2-02

↑ 真ん中の入力フォームに計測したいページのURLを貼りつけて、右側の「分析」をクリックしましょう

やるべきことは、たったこれだけです

超簡単!

10秒~15秒ほどで分析がおわり…

「PageSpeed Insights」とは?計測方法_2-03

↑ このように、計測結果が表示されます

記事数がほぼない新規ブログを例に計測してみたから、超ハイスコアになってるよ(笑)

ちなみに最初に表示されるこの結果は、「モバイル版」つまりスマホ画面における表示速度の計測結果になります

「パソコン版」の計測結果に切り替えるには、画面左側の…

「PageSpeed Insights」とは?計測方法_2-04

↑ こちらの欄で、「パソコン」タブをクリックすればOK

「PageSpeed Insights」とは?計測方法_2-05

↑ パソコン版の結果が表示されました

まさかの100点w

ちなみにこの「スコア」の水準については、「モバイル版」の方が「パソコン版」よりも低い点数になってしまうケースが大半のようです

特に、2018年に計測基準がリニューアルされてからは、「モバイル版」は実際の体感速度よりだいぶ厳しい採点になってるという意見が多いです

大まかな目安で言うと、「モバイル版だと40点台~60点台はわりと当たり前」といった感じ

その1番の要因としては、「PageSpeed Insights」のモバイル計測はそもそも「3G回線」が基準となっているので、日本で一般的な「4G」が前提のWEBサイトには不利なんだとか

で!

この「PageSpeed Insights」では、そんな「スコア」表示の下に…

「PageSpeed Insights」とは?計測方法_2-06

↑「ラボデータ」という項目があり、実際に「何の処理でどのくらい時間がかかっているのか?」がチェックできます

ただここについては、PCに詳しい人でなければ、とりあえずスルーでOK

大事なのはその下です

「PageSpeed Insights」とは?計測方法_2-07

↑ こちらの「改善できる項目」というところで、「読み込み時間を短縮できる可能性」のある内容を一覧でチェックできます

つまり実質的な課題となってる部分!

画像例で言うと、「レンダリングを妨げるリソースの除外」という課題を改善すれば、表示速度が早くなる可能性があるということですね

なのでまずは、この「改善できる項目」をチェックしてみて、対処できそうなところからあたっていくことをおすすめします

つづいて、さらに下にスクロールしていって…

「PageSpeed Insights」とは?計測方法_2-08

↑ こちらの「合格した監査」という項目をクリックしてみると…

「PageSpeed Insights」とは?計測方法_2-09

↑ 現状クリアしていると分析された内容が、一覧で表示されます

いわば、褒められてるとこ!

おしまい♪

あずき🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。