パーフマターズは、1月19日にリリースされた1.8.5で、未使用のCSSを削除する機能を追加しました。ブログのパフォーマンスを向上させたいなら必須のプラグインとなったこのプラグインを、私は飽きることなく推奨していきます。
については 25ドル1年という短い期間で、強力なツールを提供し、さらに改良を加え続けています。
すでにWordPress 5.8と5.9-RCでテストしていますが、今のところ何も壊れていません。すでに、未使用のCSSは、このプロジェクトを通じて、かなりコントロールできていたものの スクリプトマネージャーこのオプションを有効にするだけで、少なくとも2つのリクエストといくつかのKbを節約することができます。
なぜ未使用のCSSを削除するのか？
での通常の警告は ページスピードの「未使用のCSSを削除する」「未使用のCSSの内容を減らす」は、通常、プラグインやテンプレートで読み込まれたCSSが不要、または特定のページで使用されていない場合に表示されます。
開発者は通常、スタイルシートが使用されている場合のみキューに入れる。しかし、多くの場合、不要と思われるスタイルも追加されています。その結果、使われないCSSが大量に発生し、読み込みが遅くなるのです。
時折、「レンダリングをブロックするリソースを削除してください」という警告が表示されることもあります。
PageSpeedのスコアを向上させるだけでなく、未使用のCSSを削除することで、ページの読み込み開始からページ内容の一部が画面に表示されるまでの時間（FCP）、Webページのメインコンテンツがダウンロードされてユーザーが完全に使用できるようになるまでの時間（LCP）、ページの読み込み開始から完全にインタラクティブになるまでの時間（TTI）を短縮できる大きな効果が期待できます。とにかく、その、歴史の中で重要なのは コアウェブ・バイタル.
未使用のCSSを見つけるには？
使われていないCSSを見つける最も簡単な方法は、PageSpeedでURLをテストすることです。未使用のCSSがあると警告が表示されますが、これはGoogleが警告を出すほど重要とみなす閾値を超えている場合にのみ発動されるので、知覚される読み込み速度（実際に体験する速度）が良好であれば、あまり気にする必要はありません。
もう一つの方法は、Chrome DevToolsを使用して未使用のCSSを見つけることです。Chromeのインスペクタを開き（Ctrl+Shift-I）、Shitft+Control+Pを押して「Coverage」と入力すると、そこにCSSとJSの両方の未使用バイトが表示されます。赤が未使用、青・緑が使用済みです。
ここから、それぞれのCSSが何をするものなのか、計測しているページから削除・無効化できるのかを理解した上で、特定のプラグインを他の軽いものに置き換える、テンプレートの見直しや変更を検討する、スクリプトマネージャーを使ってJSやCSSを選択的に無効化するなど、いくつかの選択肢が考えられます。
PageSpeedの警告を消す最も簡単な方法は、Perfmattersの「未使用CSSの削除」機能を有効にすることで、すべて自動で行ってくれます。数百のURLで（異なるテンプレートや構成で）テストし、この結果を報告するとしている。
FCPの平均減少率は15.20％。
LCPの平均減少率は19.66％。
平均TTIは14.95%減少。
起動する前に
Perfmattersの歴史では、このオプションを有効にする前に、Perfmattersで設定されている既存のCSSプリロードをすべて削除することを推奨しています（.NETのローカルスタイルシートは除く）。 グーグルフォント) を作成し、CSSをマージしない。
CSSマージは、HTTP/2以降、非推奨の最適化手法です。場合によっては、CSSマージがパフォーマンスを低下させることさえあります。繰り返しになりますが、各ページはその構成によって動作が異なるため、ご自分のケースに最適なエラーのない結果が得られるまで、テストと観察を行うことが最善であることをご留意ください。
また、使用している他のパフォーマンス・プラグインやキャッシュ・プラグインの設定が、同じ機能を有効にすることで衝突したり上書きされたりする可能性があることにも注意が必要です。
起動すると、3つのオプションが表示されます。
1- ディレイ（デフォルト、推奨）。
使用したCSSはインラインになり、すべてのCSSスタイルシート（未使用のCSS）はユーザーの操作で遅延して読み込まれるようになります。
2- 非同期
使用したCSSはインラインになり、すべてのCSSスタイルシート（未使用のCSS）は非同期で読み込まれます。この方法は、ページの読み込み中にスタイルシートが非同期で実行されるため、ポップインを回避するのに役立ちます。この方法では、これまでの遅延動作よりも若干LCP/FCPが高くなります。
3- 削除
使用したCSSはインラインになり、オリジナルのCSSスタイルシート（未使用のCSS）はすべて削除されます。これは最も積極的な方法ですが、例外を追加する必要がある可能性も高いです。上級者のみ推奨します。
有効にすると、ページと投稿は異なる動作をします。
ページは固有のCSSを多く持つ傾向があるため、使用するCSSは初回訪問時にページごとに個別に生成してインライン化します。
しかし、エントリーでは、CSSを多く共有する傾向があるため、使用するCSSは初回訪問時に一度だけ生成され、インライン化されます。ページと比べた入力の違いは、使用するCSSの生成が一度だけ行われることです。
Perfmattersで生成された使用済みのCSSは、すべてこのパスにローカルに保存されます。
/wp-content/cache/perfmatters/tudomain.com/css/
Perfmattersが生成するCSSは、ページ、投稿、カテゴリ、タグ、検索、トップページ、404など、このような内容になっています。
除外するスタイルシート」ボックスでは、完全なソースURL（loquesea.css）を追加するか、ソースURLの一部を追加することで、特定のスタイルシートを「未使用CSSの削除」機能から除外することができます。フォーマット：1行に1つ。
次の「除外セレクタ」欄には、要素IDやクラス名など（#id、.class）を記述することで、特定のCSS（セレクタ）を「未使用CSS削除」機能から除外することができます。フォーマット：1行に1つ。
使用済みのCSSを削除する必要がある場合もあると思われます。例えば、ページのデザインを変更した後や、新しい要素を追加した後などです。生成されたCSSを削除し、次回以降のアクセス時に再作成させるには、「Clear Used CSS」の一番下にあるオプションをクリックするだけです。
個別の投稿、ページ、カスタム投稿タイプは、Clear Unused CSS 機能の使用対象から除外できます。エディターで、右側の「未使用のCSS」のチェックをはずす。
これはページ全体を除外するもので、例えばカート、チェックアウト、コンタクトページなど、サイトの他の部分よりも問題が多い可能性がある場合に有効です。
また、perfmatters_remove_unused_cssフィルタを使用して、サイト上の未使用の CSS を削除する場所を変更することができます。この例では、ページにのみ未使用のCSSを無効化します。
add_filter(‘perfmatters_remove_unused_css’, function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
