相変わらず Google Search Console の「ウェブに関する主な指標」（モバイル）でCLS に関する問題: 0.1 超 「改善が必要」という状況がまだ継続しています。改善に向けていろいろテストしてみたことの改善メモです。
表題のとおり、現在 WEXAL+Cocoon高速化+ページキャッシュ(WP Fastest Cache)併用設定を継続中です。この設定に至るまでの状況を記録しておきたいと思います。
使用していないCSSの削減
前回記事「swiper-style-cssを非同期ロード【改善メモ】」でswiper-bundle.min.cssを非同期で読み込むようにしたとメモしました。
そもそも、Cocoonテーマ更新で swiper が使用されるようになったのですが、人気記事等の表示にhorizontal(横並び)を指定しない場合は読み込む必要のないCSSですが読み込みを行っていたものです。仕方なく非同期読み込みさせていたのですが、Cocoonフォーラムでこの件について改善された旨のトピックがありテーマがマイナー更新されたので早速手動アップデートさせていただきました。あわせて非同期読み込みはコメントアウトしました。
しかし「使用していない CSS の削減」で ‘cocoon-style’ と ‘font-awesome-style’ が上がっているので何とかしたいと思いいろいろ試してみました。
スタイルシートから使用していないルールを削除して、スクロールせずに見える範囲のコンテンツで使用されていない CSS の読み込みを遅らせると、ネットワークの通信量を減らすことができます。[FCP][LCP]
PageSpeed Insights の改善提案コメントを引用
これまでにやってみたこと
CSSを最適化して、ページの読み込み時間を高速化する方法として、次のようなことを検討・テストしてみました。
- クリティカルCSS（最初に見える範囲に必要な CSS）を抽出
- 取得した クリティカルCSS をインライン化
- 使用していない CSS を削減
まず、ChromeデベロッパーツールのCoverage機能で確認すると、テーマのスタイルシートで使用していない機能の部分がかなりの割合で存在しています。
オンラインツールもいろいろ紹介されていたので次のようなツールを試してみました。
結果としては、うまくいきませんでした。
記事によって使用するstayle設定が異なっていたり、今後使う可能性もあるなどを考慮すると簡単に割り切ってしまうことができませんでした。
Autoptimize プラグインを使用してみた
諦めきれないので、Cocoonを利用する上でお勧めしないプラグインとされている Autoptimize プラグインの使用を検討してみます。
記事を再確認したうえで、試してみようと思ったのは、当サイトはCocoonの「高速化」は設定せずに KonoHaWING+WEXALで高速化を行っているからです。
適用範囲を「CSSの最適化」のみに絞って試してみました。
Autoptimizeを設定
Autoptimizeをインストールして有効化しました。
「CSS オプション」で設定したのは次のとおりです。
その他オプションはデフォルトのままです。
Autoptimize 使用結果
「使用していない CSS の削減」は指摘されなくなりクリアできました。
最初のスクショで次のようないい数値が出たのでビックリしました。
動作確認しましたが表示崩れなど無く良いと思ったのですが気になる点がありました。
次の画像のとおり「最初のサーバー応答時間を速くしてください」と指摘されています。
体感的にも、なんとなく表示が遅くなったのがわかります。
「最初のサーバー応答時間を速くしてください」対策
何をやっても指摘が改善しない！
やってみたことを列記
- Autoptimize 削除
- PHPのバージョンを更新 → 8.1.12 へ
- WEXAL の使用を一旦中止
- EWWW Image Optimizer 使用＋Cocoon高速化設定＋WP Fastest Cache
- Cloudflare をテスト導入 → 効果が感じられず、管理画面に入れないなどの支障で中止
いろいろやりましたが「最初のサーバー応答時間を速くしてください」が改善できない！
WEXAL の利用について再検討
WEXAL が KonoHa WING でどのような動作の仕組みなのか、詳細な情報がないためよくわからない状況です。下の画像はサイトから引用させていただいています。
これを見ると、WEXAL は HTTPレスポンス以降を高速化する仕組みであることがわかります。
「最初のサーバー応答時間を速くしてください」という指摘を改善するためには、左側部分の WEXALより前の部分を高速化しないとダメということですね。
ならば、WEXAL は有効にしたままで、Cocoonの高速化も有効にしてみることにします。
WEXAL+Cocoon高速化+WP Fastest Cache 併用
それぞれ設定した部分のスクショを貼り付けておきます。
WEXAL の設定
すべての設定を「ON」にしています。画像圧縮レベルは「60」にしました。
Cocoon の高速化設定
こちらも、すべてをチェックして「設定を保存」しました。
ここまで設定した段階で、まだ「最初のサーバー応答時間を速くしてください」という指摘は残っています。
WP Fastest Cache の設定
「最初のサーバー応答時間を速くしてください」という指摘はクリアできました。
サイトの速度を計測
Lighthouse
PageSpeed Insights
GTmetrix
各計測データの数値は概ね上々です。
ただ、Autoptimize を使用した時の方が数値としては高かったので、Autoptimize の凄さがわかりました。プラグインはなるべく減らしたいので、ひとまずこのままの設定を継続していこうと思いますが、選択肢として今後「Autoptimize」の使用はあり得ると思います。
サイトの環境情報（2023/1/3現在）
KonoHa Wing で無料提供されている WEXALⓇ Page Speed Technology 設定中
WordPressバージョン：6.1.1
PHPバージョン：8.1.12
サーバーソフト：Apache
テーマ名：Cocoon
バージョン：2.5.4.5
子テーマ名：Cocoon Child
バージョン：1.1.3
————————————————————-
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
————————————————————-
利用中のプラグイン：
BackWPup 4.0.0
ConoHa WING コントロールパネルプラグイン 1.0
Contact Form 7 5.7.2
Edit Author Slug 1.8.4
Flying Scripts 1.2.3
Google XML Sitemaps 4.1.7
Highlighting Code Block 1.6.1
Invisible reCaptcha 1.2.3
SiteGuard WP Plugin 1.7.3
WebSub (FKA. PubSubHubbub) 3.1.2
WP Fastest Cache 1.0.9
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.5
————————————————————-
メモのおわりに
以上、「WEXAL」+「Cocoon高速化」+「WP Fastest Cache」併用で「使用していない CSS の削減」と「最初のサーバー応答時間を速くしてください」に対応した記録でした。
PageSpeed Insights で SEOが「82」なのが気になります。
影響しているのは、Adsense や The Moneytizer、Amazonなどの広告表示です。
こんごはこれらの最適化について検討していきたいと思います。
★★★ ブログランキング参加中！ クリックしてね(^^)/ ★★★
過去記事のサンプルファイルをダウンロードできます
この記事で使用したサンプルの登録はありません。
過去の記事で使用したサンプルファイルをダウンロードできるようにページを設置していますので、こちら（このリンク先）からご利用ください
