【解決】Autoptimizeで追加CSSが反映されない！クリック2回で直す設定方法

ユーザー

WordPressの表示速度を上げるために『Autoptimize』を入れたんだけど、追加CSSでデザインをカスタマイズしようとしても全然反映されない...。プラグインを消すしかないのかな？

このような疑問や悩みを解決します。

こんにちは、セイタです。

WordPressのページ速度を高速化するために、定番プラグインである『Autoptimize』を使用している方は多いと思います。

しかし、システムエンジニアとしてブログのカスタマイズを行っていると、『Autoptimize』を有効化した状態では、追加CSSにコードを記述してもサイトのデザインに反映されないという現象によく直面します。

あなたがWordPressのデザインをいじろうとして「あれ？CSSが効かないぞ？」と困っている場合、今回紹介する方法で一瞬で解決させることが可能です。

本記事では、Autoptimizeを無効化することなく、たった2回のクリックでCSSを正常に反映させる設定方法をご紹介します。

\ 当サイトも使ってるWPテーマ『AFFINGER7』/

当サイト限定特典付き

AutoptimizeでCSSが反映されない？クリック2回で解決可能です

結論から言うと、Autoptimizeの「CSSオプション」の設定を見直すだけで解決します。

WordPressの管理画面から「設定」＞「Autoptimize」を開き、「JS, CSS & HTML」タブの中にある以下の部分を確認してみてください。

もし上記の項目にチェックが入っている場合、この2つのチェックを外して一番下の「変更の保存とキャッシュの削除」をクリックしてください。

インライン化のチェックを外すことで、WordPressのカスタマイザーなどから追記したCSSがキャッシュに阻害されることなく、正常にデザインに反映されるようになります。

Autoptimize自体を無効化（削除）する必要はない

「AutoptimizeがCSSの反映を邪魔しているなら、プラグイン自体を停止してしまおう」と考える方もいるかもしれません。

しかし、前項で紹介した2つの項目のチェックさえ外せば、追加CSSは問題なく読み込まれるようになります。

Autoptimizeは「HTMLの最適化」や「JavaScriptの最適化」など、他の部分でもサイト高速化に大きく貢献しています。わざわざ別のキャッシュプラグインを導入し直す手間をかける必要はなく、そのままAutoptimizeを使用し続けて大丈夫です。

チェックを外すとページの表示スピードは遅くなる？

「CSSのインライン化のチェックを外すと、PageSpeed Insightsのスコアが落ちるのでは？」と心配になりますよね。

確かに、CSSのインライン化を解除するとGoogleのテストツール上で「レンダリングを妨げるリソースの除外」などの改善策を提示されることがあります。
ですが、ぼくの環境で検証した結果、体感できるほどの劇的なスピード低下は見られませんでした。

それでも少しでもスコアの低下を補填したい場合は、以下の「JavaScript オプション」の設定もあわせて見直してみてください。

JavaScript オプションの「JS ファイルの連結」を外す

「JavaScript オプション」の項目の中に、『JS ファイルの連結（Aggregate JS-files?）』という項目があります。この項目のチェックを外してみてください。

結果的に、ぼくのブログではこの「JSファイルの連結」のチェックを外したことで、CSSの設定を変更する前よりも全体のページスピードスコアがアップしました。

今回紹介した「CSSのインライン化解除」と「JSファイルの連結解除」をセットで行うことで、CSSのカスタマイズ性を保ちながら、ページスピードの上昇も図ることができます。

まとめ：Autoptimizeを活用したままCSSの悩みを解決しよう

せっかく一生懸命CSSを書いてデザインをカスタマイズしたのに、画面に反映されないと本当に残念な気持ちになりますよね。

原因が分からず頭を抱えていた方も多いと思いますが、Autoptimizeのインライン化設定をオフにするだけで、あっさりと解決できます。

ブログのデザインが整えば、記事を書くモチベーションも格段にアップします。ぜひ今回の設定を試して、快適なブログ運営を進めてください！