前回までに、画像の著作権を調べたり、バックアップの方法を調べたり、内部リンクとブログカードを調べたりしてきました。記事も30本ほどになって、少しずつ「ブログらしく」なってきた気がします！
でも、これから画像やブログカードを増やしていこうと考えたところで、ふと不安になりました。「これ、ページが重くならない？？」。自分のパソコンで見て平気そうでも、読んでくれる人のスマホでも同じとは限りません。
そこで今回は、Googleの「PageSpeed Insights」で何がわかるのか、結果の数字の見方、Cocoonの「高速化」設定を、公式の情報で調べてみました。私のブログはまだ測っていないので、今回は「測る前の下調べ」と「測る手順を決める」ところまでです。
画像を入れたら、ページが重くならない？？と気になった！
アイキャッチ画像の入れ方や、ほかの記事へのリンクのつなぎ方を調べてきて、これから記事に取り入れていくつもりです。でも、読みやすくするためにやることが、表示を遅くしてしまったら本末転倒です。
とはいえ「なんとなく重い気がする」だけでは、何を直せばいいのかわかりません。まずは、数字で確かめる方法を知ることにしました。
PageSpeed Insightsって何？？URLを指定すると分析してくれるらしい
PageSpeed Insights（PSI）は、Googleのツールです。公式の説明によると、モバイルとパソコンの両方で、ページの使いやすさ（ユーザーエクスペリエンス）についてのレポートを出してくれて、改善のヒントも示してくれます。
パフォーマンスのスコアは、色分けの目安が決まっていました。
| スコア | 評価 |
|---|---|
| 90以上 | 良好 |
| 50〜89 | 改善が必要 |
| 50未満 | 不良 |
点数があると、つい「100点を目指さなきゃ！」と思ってしまいます。でも、この点数がどうやって出ているのかを知ると、見方が少し変わりました（あとで書きます）。
LCP・INP・CLSって何の数字？？Core Web Vitalsの目安を表にしてみた
PSIの結果には、アルファベット3文字の指標がたくさん出てきます。中でも大事なのが「Core Web Vitals（ウェブに関する主な指標）」の3つです。Googleの説明をもとに、意味と目安をまとめてみました。
| 指標 | 何を見る？ | 良好 | 改善が必要 | 不良 |
|---|---|---|---|---|
| LCP | 読み込みの速さ | 2.5秒くらいまで | 2.5〜4秒 | 4秒以上 |
| INP | 操作したときの反応の速さ | 200ミリ秒くらいまで | 200〜500ミリ秒 | 500ミリ秒以上 |
| CLS | 表示のガタつき（レイアウトのずれ） | 0.1くらいまで | 0.1〜0.25 | 0.25超 |
Googleの検索セントラルでは「LCPは2.5秒以内」「INPは200ミリ秒未満」「CLSは0.1未満」と書かれていて、PSIの説明ページの表とは境目の書き方が少しだけ違いました。なので私は、細かい境目にこだわらず「目安」として覚えることにしました。
ちなみにINPは、2024年3月12日に「FID」という指標に代わってCore Web Vitalsになったそうです。古いブログ記事だとFIDのことが書かれていることもあるので、要注意です。
「2.5秒以内」と「2,500ミリ秒まで」、「未満」と「まで」…。公式の中でも書き方が少しずつ違って混乱しました。初心者は「LCP 2.5秒・INP 200ミリ秒・CLS 0.1」の3つを目安で覚えれば十分そうです！
スマホとパソコンで結果が違う？？「実際のユーザー」と「診断」の2種類の数字
調べていて一番「なるほど！」と思ったのがここです。PSIには、性質のちがう2種類のデータが出てきます。
| フィールドデータ | ラボデータ | |
|---|---|---|
| 何のデータ？ | 実際にページを見たChromeユーザーのデータ（CrUX） | Lighthouseでシミュレーションした結果 |
| 期間・条件 | 過去28日間の集計。毎日更新 | モバイルはミッドティア端末（Moto G4）＋モバイル回線、パソコンは有線接続を想定 |
| 得意なこと | 実際の使われ方がそのままわかる | 問題の原因を探すのに役立つ |
| 弱いところ | 使える指標が限られる。データが少ないと出ない | 実際のボトルネックを捉えていないことがある |
モバイルは、少し前のスマホとモバイル回線という条件でシミュレーションするそうです。だから、自分のパソコンでは速く感じても、モバイルの点数は低めに出ることがありそうです。
Core Web Vitalsの判定は、フィールドデータの75パーセンタイル（見た人の4人に3人がこれ以内、というイメージ）で行われます。3つの指標すべてに十分なデータがあって、3つとも良好なら「合格」です。
公開したばかりのページや、見てくれた人が少ないページは、フィールドデータが足りないことがあるそうです。その場合はサイト全体（オリジン）の集計に切り替わります。始めたばかりのブログだと、ラボデータしか出なくても不思議じゃないですね。
前に登録手順を調べたSearch Consoleにも「ウェブに関する主な指標（Core Web Vitals）」のレポートがあります。こちらはフィールドデータをもとに、URLのグループごとに「低速・改善が必要・良好」を、パソコンとモバイル別に見られるそうです。ただ、データが足りないと「データがありません」と出ることがあり、新しいプロパティだと数日かかることもあるとのことでした。
Cocoonの「高速化」設定には何がある？？触る前に調べてみた
私のブログはCocoonを使っているので、Cocoon公式の案内も読んでみました。設定の場所は、WordPress管理画面の「Cocoon設定」→「高速化」です。公式のおすすめは、次の3つにチェックを入れて保存することでした。
- ブラウザキャッシュの有効化（ブラウザにリソースを保存する）
- CSSを縮小化する（CSSのサイズを減らす）
- JavaScriptを縮小化する（JavaScriptのサイズを減らす）
Cocoonのよくある質問には、ほかに「HTMLの縮小化」の名前も出てきます。ただ、その説明や、今の設定画面にどんな項目が並んでいるかまでは、公式ページでは確かめきれませんでした。ここは自分の管理画面を開いて確かめます。
注意点もはっきり書かれていました。
- CSS縮小化・JavaScript縮小化は、ほかのプラグインとぶつかる（競合する）ことがある
- 表示が崩れたら、まず「JavaScript縮小化」を外して確認。直らなければ「CSS縮小化」も外して確認
- Autoptimizeなど、CSSやJavaScriptを圧縮するプラグインとの併用はおすすめされていない
- サーバーのキャッシュとは基本的に共存できる。設定を変えても反映されないときは、サーバー側のキャッシュも消す
画像まわりも調べました。WordPressは5.5から、画像に標準で遅延読み込み（loading=”lazy”）を付けるようになっています。さらに5.3からは、縦か横が2560pxを超える大きな画像をアップロードすると、自動で縮小した画像が作られて使われるそうです。CocoonのLazy Loadも、2.2.3からは「WordPress標準で適用されない画像にだけ」かかる仕様になったとのことでした。
Cocoonのよくある質問では、点数が良くないときの対処として、画像の最適化（WebP形式を使う、EWWW Image Optimizerなどで圧縮する）や、使っていないプラグインの停止も挙げられていました。
Cocoonのよくある質問には、AdSenseやアナリティクスなど外部のものが多いと点数は下がるけど、運営に必要なものまで外すのは本末転倒になることも多い、とありました。点数のために大事なものを消さない、と覚えておきます！
よくある疑問を、今の私なりにまとめてみた
- QPageSpeed Insightsで高得点を取れば、検索で上位に出るの？
- A
Googleによると、Core Web Vitalsはランキングで考慮される要素のひとつですが、結果が良くても上位表示が保証されるわけではありません。検索は、常に最も関連性の高いコンテンツが表示されるように作られているそうです。SEOのためだけに満点を目指すのは、時間の使い方として有効ではない、とも説明されていました。
- QCocoonの高速化設定をすれば、それだけで速くなるの？
- A
Cocoon公式のページには、この設定だけで90点前後は出るのでは、という見込みが書かれていました。ただ、これは執筆者の見込みで、保証ではありません。サーバーが遅いとPHPの処理に時間がかかって減点されることもあり、その場合はページキャッシュのプラグインがすすめられていました。私のブログでどうなるかは、まだわかりません。
今回わかったことと、次にやること
- PSIのスコアは90以上が良好、50〜89が改善が必要、50未満が不良
- Core Web Vitalsの目安は、LCP 2.5秒・INP 200ミリ秒・CLS 0.1くらい
- 「実際のユーザー」のフィールドデータと、シミュレーションのラボデータは別もの
- Cocoonの高速化は、まずブラウザキャッシュ・CSS縮小化・JavaScript縮小化。崩れたらJavaScriptから外す
- 点数が良くても上位表示の保証にはならない。内容がいちばん大事
次は、実際に自分のブログで測ってみます。手順はこう決めました。
- トップページと、画像の多い記事を1本ずつPSIで測り、モバイルとパソコンの点数・LCP・INP・CLSをメモする
- Cocoon設定の「高速化」タブを開いて、今の設定と並んでいる項目を記録する
- ブラウザキャッシュ・CSS縮小化・JavaScript縮小化をオンにして、表示が崩れていないか確かめる
- 同じページをもう一度測って、前とくらべる
- Search ConsoleのCore Web Vitalsレポートに、データが出ているか見てみる
点数に振り回されず、「読む人がストレスなく読めるか」を目安に、少しずつ整えていきます。測った結果は、次の記録でちゃんと数字で報告しますね！
コメント