ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

WordPress

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

更新日:

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

 

誠太
こんにちは、誠太です!

 

WordPressのページ速度を高速化するために、WordPressプラグイン『Autoptimize』を使用してはいませんか?

 

しかし、WordPressプラグインの『Autoptimize』を使用しているとCSSのがサイトに反映されない事を確認しました。

 

あなたがWordPressでカスタマイズをしようとしてCSSを追加してもデザインが反映されないなんてことがあれば、今回紹介する方法で解決させることが可能です。

 

本記事では、CSSのが反映されない場合にクリック一回で解決する方法をご紹介します。

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

 

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

 

Autoptimizeの設定画面で、下記の部分を見てみて下さい。

 

 

この画面で、今までは下記の2つにチェックを入れていました。

 

  • インラインのCSSのを直結
  • 全てのCSSををインライン化

 

この項目のチェックを外すことによって、CSSが反映されるようになっているはずです。

 

Autoptimizeを無効化にする必要はない

 

Autoptimizeを無効化にする必要はない

 

AutoptimizeがCSSの反映に影響しているということがわかれば、プラグイン自体を無効化にしがちですが、前項で紹介した項目のチェックさえ外せばCSSは反応されます。

 

そのため、他のプラグインをわざわざ導入する必要はなく『Autoptimize』を使用したままで大丈夫です。

 

ページの表示スピードの問題はないのか

 

ページの表示スピードの問題はないのか

 

ページの表示スピードに関しては、ほぼ変化は見られませんでした。

 

通常CSSのインライン化をするとPageSpeedInsightsではCSSの短縮などの改善策を指示されますが、劇的に変化することはなかったためページスピードの補填として、下記の項目を変更しました。

 

JavaScript オプションの項目をひとつ外す

 

 

JavaScript オプションの項目の中で、『Aggregate JS-files?』という項目がありますが、この項目のチェックを外します。

 

この項目に関しては、初期設定時にはチェックが外されているため、チェックをすることによって逆にスピードが遅くなってしまうと言われています。

 

しかし、結果的にチェックを外すことによって、ページスピードが今回の設定に変更する前よりもページスピードがアップしました。

 

そのため、今回紹介したCSSのインライン化とJavaScript オプションの『Aggregate JS-files?』を変更することによって、CSSのカスタマイズの変更も可能となり、ページスピードの上昇も計れます。

 

Autoptimizeを使用したままCSSを有効化しよう

 

Autoptimizeを使用したままCSSを有効化しよう

 

せっかくCSSを追加してもカスタマイズ内容が反映されないと残念な気持ちになってしまいます。

 

原因もわからず頭を抱えていたかと思いますが、今回の方法によって改善させる事が可能となりますので、是非お試し下さい。

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-WordPress
-

Copyright© Limitless.net , 2019 All Rights Reserved.