スタイルシートの記述で、重複をなくし、読み込むファイルサイズを圧縮しなさいということです。
スタイルシートは最初に全て読み込めていることが高速化の助けになるので、頻繁に外部ファイルを探しに行かないようインラインが有効。
プラグインで最適化出来ますが、多く（と言うか、これまでわたしが出会ったプラグイン）は、一旦変更したら元に戻せないので要注意です。
対策としては、スタイルシートの変更をしないと確信ができた時に限り圧縮してます。
WordPressとは全く無関係な話題ですが・・・
PageSpeed Insightsを実行して
「修正が必要」
などが表示された箇所には、「修正方法を表示」というリンクも併せて表示されていると思います。
ここをクリックすると、
「CSS を縮小」
という箇所がこれまたリンクになっていると思いますのでクリックしていただきますと、縮小の方法が書かれています。
が、ここを読んでも結局どうしたらいいかイマイチわかりません。
PageSpeed Insightsの実行結果に戻っていただくと、
「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」
というリンクがあります。
ここをクリックしてダウンロードしたものをアップロードすれば良いです。
cssを更新した際にPageSpeed Insightsの警告を出さなくするためには面倒ですが、手元には最適化前のcssを残しておき、アップロードしたらsitespeedを実行して最適化されたものをダウンロードし、再アップロードするという手順を踏んでおけば間違いないと思います。
私はサーバー側のDEFLATE機能を使ってコンテンツをgzip圧縮しています。
cssなども圧縮されますので、最適化するより効率よく通信効率を上げることができます。
が、PageSpeed Insightsのcssの縮小に関する警告はこの方法では消えません。
熊本地震東区避難所87日目様、munyagu様
ご返答ありがとうございます。
CSSの記述方法、プラグインへの注意点とPageSpeed Insightsの活用法
、アップロード手順、サーバー側での圧縮 のご意見大変に参考になります。
上記のアドバイスを考慮りつつ対策を考えていこうと思います。
いつも有難うございます。
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">
というのが使えそうなのでこれを
組み込んでいこうと思います。
ありがとうございます
ああ、すいません、圧縮ではなくて最適化の方でしたね。
勘違いしてしまいました。
いえいえ、圧縮も大切な作業なのでとても参考になります。
有難う御座います。
