Cocoon高速化を再調整したのに…LCPが6秒超えのまま問題発生中
先週、Cocoonテーマの高速化設定を見直してから数日が経ちました。
ところが期待に反して、PageSpeed Insights のスコアはほぼ変わらず。
特に Largest Contentful Paint（LCP）が 6 秒以上 と、依然として重いままです。
PageSpeed Insights の詳細を見てみると、
First Contentful Paint（FCP）も 4 秒以上 と、こちらも厳しい数値が続いていました。
原因は「レンダリングをブロックするリソース」？
分析結果の中で気になったのが、PageInsights が指摘していた
「レンダリングをブロックしているリクエスト」 という項目。
そこには、SmartSlider3 の CSS ファイルであるsmartslider.min.css が挙がっていました。
FCP は「ページで最初の文字や画像が表示されるまでの時間」です。
- CSS や JavaScript が重い
- 読み込みに時間がかかる
- レンダリングをブロックする（完了するまで描画できない）
こうした状況だと レンダリングが遅れて FCP が悪化します。
例：
ChatGPT-5.1 2025.12.10
SmartSlider3 のsmartslider.min.cssや JS が “レンダリングブロッキング” と判定されるのは、
ブラウザがそれを読み終えるまで画面描画を始められないためです。
レンダリングとは、
ブラウザが HTML/CSS/JavaScript などのコードを読み、
実際に画面として表示できる形に組み立てる作業
のこと。
つまり、この SmartSlider3 の CSS が読み込まれるまで、
ブラウザがページ表示を進められず、表示が遅くなっている可能性があります。
なお、この SmartSlider3 の CSS は トップページでのみ読み込み が行われています。
Lazy Load をオフ → 再びオンに戻した理由
前回 Cocoon の高速化を再調整した際、Lazy Load（遅延読み込み）を一度オフにしていました。
ただ、今後のことも考えて再びオンに戻し、
SmartSlider3 の画像だけ遅延読み込みの除外にしたいと検討したのですが……
肝心の 除外用文字列がソースコードから見つからない という問題に直面。
これは手動設定では少し厄介です。
<img decoding="async" src="//toshikit.com/wp-content/uploads/2025/09/Slider_HealthForest-2025-09.jpg" alt="" title="" loading="lazy" class="skip-lazy" data-skip-lazy="1">SmartSlider3 の高速化は、有料版が前提？
調べてみると、SmartSlider3 は無料版だと高速化オプションが限られており、
速度改善にはプロ版の機能が必要 との情報もありました。
うーん、悩ましいところです。
CSSを遅らせる or インライン化するために、最適化プラグインを導入することに
今回やりたいことはシンプルです。
- SmartSlider3 の CSS 読み込みを遅らせる
- または CSS をインライン化（内製化）してレンダリングブロックを減らす
これを実現するために、以下のような最適化プラグインを使う方法に切り替えることにしました。
- WP Rocket
- W3 Total Cache
- Autoptimize
- WP-Optimize
こうしたプラグインなら、
CSS の遅延・結合・インライン化を自動処理してくれるので、
レンダリングブロック問題の解決に大きく貢献してくれるはずです。
PageInsight の旅はまだ続くけれど…
PageInsights が示す “ユーザーエクスペリエンスの悪さ” を目の当たりにして、
本気で改善したい思いが強くなりました。
正直、LCP や FCP の改善は一筋縄ではいかず、
「長い旅だな……」 と感じることもあります。
それでも、少しずつ原因を取り除いていけば、
必ず快適なサイトに近づくはず。
引き続き、この問題をしっかり解決していきたいと思います。
