はじめに
自分のブログの表示スピードをスピードを知ろうと思い、
GoogleのPageSpeed Insightsでサイトを測定したところ、突然すべて「Error」になってしまいました。
First Contentful Paint
Error! NO_FCP
Largest Contentful Paint
Error! NO_LCPWordPressサイトは普通に表示されるのに、PageSpeedだけが測定できません。
最終的にはモバイル85点まで改善できたので、その手順を紹介します。
症状
私の環境
- WordPress
- Cocoonテーマ
- ConoHa WING
- モバイルで計測
表示されたエラー
- NO_FCP
- NO_LCP
- Total Blocking Time Error
サイトは正常に表示されているのに、PageSpeedだけエラーでした。
最初に確認したこと
HTTPSへ統一
まず確認したのは
http://ではなく
https://でアクセスしているかです。
WordPressではHTTPSへ統一しておくことが大切です。
キャッシュを削除
ConoHa WINGのキャッシュを削除。
さらにブラウザのキャッシュも削除しました。
これだけでも
NO_FCP
↓
FCPが表示されるようになりました。
画像サイズを見直した
最初は画像が原因だと思いました。
アイキャッチ画像は
1200×630px
容量は
142KB
PNGから適切なサイズへ変更しました。
しかし、
画像だけでは解決しませんでした。
Cocoonの高速化設定を見直した
管理画面
Cocoon設定
↓
高速化最初は全部OFFでした。
順番に有効化しました。
有効にした項目
✅ キャッシュ
✅ HTML縮小化
✅ CSS縮小化
✅ JavaScript縮小化
✅ Googleフォント非同期読み込み
✅ Lazy Load
※一気に設定するのではなく、1つ変更するたびにPageSpeedを測定することをおすすめします。
不要なプラグインを見直した
私の環境では
Site Kit by Google
を利用していました。
Search ConsoleやAnalyticsを直接利用しているため、一度Site Kitを無効化しました。
これが速度改善に効果があった可能性があります。
※Search ConsoleのデータはGoogle側に保存されているので、プラグインを無効化しても消えません。
改善結果
最初
NO_FCP
NO_LCP測定不能
↓
途中
54点↓
最終結果
パフォーマンス
85
FCP
2.4秒
LCP
3.8秒
TBT
80ms
CLS
0
SEO
100モバイルでも十分満足できる結果になりました。
まだ残っている改善点
PageSpeedでは次の項目が表示されています。
- 画像配信を改善する
- 使用していないJavaScriptを削減
- 使用していないCSSを削減
ただし、
85点まで改善できれば、無理に90点以上を目指さなくても十分実用的です。
ConoHa WINGの「WEXAL® Page Speed Technology」は？
ConoHa WINGには
WEXAL® Page Speed Technology
という高速化機能があります。
画像最適化やCSS・JavaScript最適化などをサーバー側で実行してくれます。
メリット
- WordPressに高速化プラグインを追加しなくてもよい
- 画像を自動で最適化
- 表示速度の改善が期待できる
注意点
有効化すると、まれに
- レイアウト崩れ
- JavaScriptの不具合
が起こることがあります。
有効化後は必ずサイト全体を確認しましょう。
私が実際に改善した順番
- HTTPSを確認
- キャッシュ削除
- 画像サイズを見直す
- Cocoon高速化設定を有効化
- Googleフォント非同期読み込みをON
- Lazy LoadをON
- Site Kitを見直す
- PageSpeedを再測定
この手順で、測定不能の状態から85点まで改善できました。
まとめ
PageSpeedで「NO_FCP」や「NO_LCP」が表示されると焦ってしまいますが、サイト自体に問題がないケースもあります。
私の場合は、
- キャッシュの見直し
- Cocoonの高速化設定
- 画像の最適化
- 不要なプラグインの見直し
を行うことで改善しました。
もし同じ症状で困っている方は、一度に設定を変更せず、1つずつ変更して測定することをおすすめします。
※これは私のサイトで、私なりに調べて一つずつ試しながらやったことです。全てのサイトで有効かはわかりませんが、少しでも参考になれば嬉しいです。
最後まで読んで頂いてありがとうございます。
コメント