Lighthouseの評価を上げたくてCDN(CloudFlare)で静的コンテンツの配信をしてみたんだけど逆に評価が下がった話

はじめに

こんにちは。AdSenseの審査を送り始めて2カ月、まだ審査が通りません、筆者です

ウェブサイトの品質を評価してくれるツールのLighthouseをご存知でしょうか。

先日、自身のブログを評価したところ、もうちょっといけるぞという値でしたので、ほったらかしにしていたCloudFlareの設定を見直してみました。

参考になれば幸いです。

結論: 記事ページのLighthouseの評価は下がりました

嘘ではないですがタイトルで煽ってしまってすみません
記事ページは下がりましたが、トップページは改善しました！

原因は追求できていないですが、画像のサイズやフォーマットなど、いろんな項目を見直す必要があると思います。

とりあえず、記事ページの評価が下がってしまったのは悲しいですが、表示スピードは速くなったみたいです。

前提

1. ブログはWordPressでできてます
2. DNSの設定等は済んでいます
3. ブログのURLはhttps://example.comの想定で行っています

見直した設定

1. WordPressの管理画面はキャッシュを無効化

方法

1. CloudFlareのページ ルール画面でページ ルールを追加ボタンを押下
2. 以下スクリーンショットを参考にルールを適用するURLを入力
3. 以下スクリーンショットを参考にその後の設定は:下部のプルダウンメニューからセキュリティ レベルを選択し、右側の追加で表示されたプルダウンメニューから基本的にオフにするを選択する
4. 保存を押下

2. Webサイト全体に対して静的コンテンツとしてのキャッシュを有効化

1. CloudFlareのページ ルール画面でページ ルールを追加ボタンを押下
2. 以下スクリーンショットを参考にルールを適用するURLを入力
3. 以下スクリーンショットを参考にその後の設定は:下部のプルダウンメニューからセキュリティ レベルを選択し、右側の追加で表示されたプルダウンメニューからCache Everythingを選択する
4. 保存を押下

設定の確認方法

実際にキャッシュが効いているかどうかの確認を行います。
ブログにアクセスし、レスポンスヘッダーにcf-cache-status: HITがあればOKです

実施結果

トップページ

Before

After

記事ページ

Before

After

おわりに

記事ページの評価が下がってしまったのがやはり悲しいです。
ただ、両方のページで表示速度が上がっているので、やってよかったです
今後は他の項目を改善していこうと思います