WORDPRESS

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

「PageSpeed Insights」とは?ページの表示速度を簡単計測する方法 アイキャッチ



あずきです🐥

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

PageSpeed Insights

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

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

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

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

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

WordPress ヘッダー a-01

 

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

主な機能は次の通り

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

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

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

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

WordPress ヘッダー a-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

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

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

おしまい♪

あずき🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS