Lighthouseの「Remove unused CSS」を修正する方法

未使用のCSSとは？

未使用のCSSとは、ウェブページ上のどこでも使用されていないCSS宣言のことです。
CSSの一部が使用されていないのはごく普通のことです。 たとえば、デスクトップやモバイルなどの別のデバイス向けに書かれたCSS宣言があるためです。また、  スタイルシートに記述されている要素（ボタンなど）がこの特定のページで使用されていない場合もあります。
未使用のCSSは、Bootstrapなどのフレームワークを使用する場合によく発生します。デフォルトのCSSには、実際に使用するよりもはるかに多くの要素が記述されています。 また、ページをリデザインしたが、古いCSS要素を削除し忘れた場合にも発生します。

なぜ未使用のCSSはページ速度に悪影響を与えるのか？

CSSはページの読み込みを遅くします。 ページが読み込まれると、ブラウザはまずこのページのHTMLを取得します。 このHTMLはDOMノードに変換されます。 その後、ブラウザはすべてのスタイルシートを取得します。 これらのCSSファイルに含まれるスタイルも、CSSOMという別の形式に変換されます。 DOMとCSSOMが組み合わされてレンダーツリーになります。 このレンダーツリーが構築されて初めて、ブラウザは最初のコンテンツの描画を開始します。
このメカニズムにより、CSSファイルは常にウェブページのレンダリングをブロックします。 CSSファイルが必要以上に大きい場合、ダウンロードに時間がかかり、最初の遅延が発生します。  CSSファイルに未使用のCSSが含まれている場合、レンダーツリーの構築に時間がかかります。 

未使用のCSSを手動で見つける方法

Google Chromeでは、 Code Coverageの概要で未使用のCSSを確認できます。 Code CoverageはChrome DevToolsの一部です。 DevToolsは、すべてのChromeブラウザで利用できる一連の組み込みツールです。 

まず、Ctrl-Shift-J ショートカットでDevToolsを開きます。 次に Ctrl-Shift-P でコマンドパレットを開きます。 「coverage」と入力します。 coverageを選択してページをリロードします。 ページで読み込まれ使用されているCSSとJavaScriptファイルの概要が表示されます。 さらに、ファイルのサイズと実際に使用されているコードの割合を確認できます。
CSSファイルをクリックすると、現在のページで使用されている（緑色）CSSルールと使用されていない（赤色）CSSルールを確認できます。 

「Remove unused CSS」警告を解決する方法

Lighthouseの「Remove unused CSS」メッセージを解決するには、いくつかの方法があります。 何らかの理由で警告を修正できない場合は、CSSの配信を最適化して、未使用のCSSがページの読み込み時間に与える影響を軽減できます。 以下では、未使用のCSSを修正するための選択肢を簡単に説明します。

1. 未使用のCSSを手動で削除する

最も論理的で最良の方法ですが、同時に最も手間のかかる方法は、もちろん未使用のCSSを手動で削除することです。 手順は簡単です：

1. オリジナルのCSSファイルをバックアップしてください。 CSSを削除しすぎる可能性があります。
2. Google ChromeのCode Coverageタブを開き、CSSファイルごとに不要な宣言を確認してください。
3. サーバー上（またはローカル）でCSSファイルを開き、未使用のCSS宣言をそれぞれ確認してください。削除可能かどうかを判断してください。 ただし注意 ：未使用のCSS宣言であっても、今後必要ないとは限りません。 自分で判断する必要があります！
4. 各CSS宣言がCSSの中で重複していないか確認してください。重複したCSSも未使用としてフラグ付けされます。 
5. 各CSSルールのショートハンド記法を確認してください。  CSSを短縮できますか？ 短縮しましょう！

2. CSSを複数のファイルに分割する

CSSルールの数をすばやく減らす簡単な方法があります！ デバイスに必要なスタイルのみを読み込みます。 ページはモバイルで頻繁に閲覧されます。 このモバイルデバイスでは、実際に デスクトップや印刷用のスタイルをダウンロードする必要はありません。これらのスタイルをダウンロードしないことで 時間が節約され、Lighthouseのクリティカルリクエストチェーンが短縮されます。

これを実現するには、media属性を使用します。 media属性は、media属性が現在使用しているメディアと一致する場合にのみスタイルシートが使用されることを保証します。

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" 
 media="screen and (min-device-width: 1024px)">

3. 自動CSSクリーンアップツールを使用する

CSSファイルを自動的にクリーンアップし、未使用のCSS参照を削除できるスマートなツールがいくつかあります。
ツールは驚くほどうまく機能しますが、完璧ではありません。 時にはCSS宣言を削除しすぎることがあります。 そのため、慎重に使用し、常に自分でCSSを確認してください。
最良のCSSクリーンアップツールはPurifyCSSとPurgeCSSです。 これらのツールはNodeJSで動作します。 NodeJSは、Google自身のV8 JavaScriptエンジンに基づいた、JavaScriptスクリプトを実行できるJavaScriptランタイムです。  purifyCSSを オンラインで試すこともできますpurifyCSS 。

4.  Critical CSS

Critical CSSは、ウェブサイトのビューポート（表示部分）に必要なCSSルールのコレクションです。 言い換えれば、 Critical CSSはページの表示部分をレンダリングするために必要なCSSです。

ページからCSSを抽出できるツールがいくつかあります。抽出されたCritical CSSはページの headにインラインで配置され、元のCSSファイルは非同期で読み込まれます（ブラウザが後で使用するため）。

これは未使用のCSSの問題を完全に解決するわけではありません。 最終的に未使用のCSSは読み込まれて解析されますが、最初のレンダリングフェーズではブラウザに影響を与えません。

Critical CSSを見つけて抽出するために最もよく使用されるツールは、NodeJSスクリプトのCriticalです。 Critical Path CSS GeneratorやもうひとつのCritical Path CSS Generatorなどのオンラインツールもあります

5. CSSファイルを圧縮する

上で説明したように、未使用のCSSは2つの方法でページを遅くします。 1つ目は、CSSファイルが大きくなり、ダウンロードに時間がかかるためです。 

CSSファイルを圧縮することでCSSファイルサイズを縮小し、この問題に対処できます。これはCSSミニファイアを通じて行われます。  CSSミニファイアは、スペース、コメント、フォーマットを削除してCSSファイルを縮小します。 また、CSSミニファイアは変数やCSSコードを書き換えて、転送バイト数を削減できます。

よく知られたCSS圧縮ツールはcss-minifyです。 コマンドラインからcss-minify -f filenameコマンドですべてのCSSファイルを圧縮してください。 cssminifier.comなどのオンラインCSSミニファイアもあります

6. CSSフレームワークを再コンパイルする

Bootstrap CSSなどのCSSフレームワークを使用していますか？ それはサイト全体のスタイルを設定できるCSSフレームワークです。 このフレームワークは非常に完成度が高いため、大部分を使用しない可能性が高いです。

幸いなことに、Bootstrapや他のCSSフレームワークの開発者はこれを考慮しています。 このフレームワークはSASSで書かれています。 CSSに非常に似た言語です。 シンプルな変数や関数を使用できるいくつかの小さなSASSファイルで構成されています。少しの知識があれば、フレームワークを自分で簡単に調整・カスタマイズ できます。 使用しない部分を省略して、1つの最終CSSファイルに簡単にコンパイルできます。

また、CSSフレームワークを標準CDNから変更せずに読み込まないでください。フレームワークをダウンロードし、使用するCSSクラスのみで、SASSを使って必要な通りにコンパイルしてください。

7. 別のCSS戦略を検討する

本当に高速化したいですか？ それなら、CSS戦略を見直すのも良いかもしれません。 その方法はサイトによって異なります。 すべての道はローマに通じています。

私たちのサイトを例にとりましょう。ページごとに実際に必要なCSSのみを読み込んでいます。 CSSクラスは、必要な場合にのみCMSによって自動的にインポートされます。 CSSをインライン（ページのheadに）配置しています。これにより、追加のネットワークリクエストが不要になります。 このソリューションは非常に高速で、メンテナンスも簡単です。

注意深い読者は「CSSキャッシュはどうなのか、最終的なCSSファイルがキャッシュされていればCSSはより高速だ」と思うかもしれません。はい、その通りです。だからこそ、表示ビューポート内のすべてのリンクをプリロードして、CSSを含むページが常にキャッシュから取得されるようにしています。

WordPressで「Remove unused CSS」を修正する

未使用のCSSを削除する準備はできましたか？ WordPressで始める方法は次のとおりです。 WordPressではCSSを3つの方法で追加できます：

• テンプレートに直接追加。 テンプレートフォルダにはheader.phpというファイルがあります。 このファイルにはテンプレート固有のCSSファイルが含まれていることが多いです。 上記で説明したようにこれらのCSSファイルを変更できます。 オリジナルのCSSファイルをバックアップすることを忘れず、テーマの更新によりCSSファイルが上書きされる可能性があることに注意してください。
• プラグインによって追加されたCSS。 WordPressのプラグインは、HTMLに無制限のCSSファイルを追加できます。これらのプラグインは 関数wp_register_styleとwp_enqueue_styleを使用します。ほとんどのプラグインは現在のページでアクティブかどうかを確認しません。そのページにプラグイン固有のCSSが必要なくても、すべてのページにCSSを注入します。 私は毎日それに遭遇します。 その場合、関数wp_dequeue_styleとwp_deregister_styleを使用してページからこれらのスタイルを削除できます。 これは精密な作業です。 修正方法がわからない場合は、開発者に相談するか、私に助けを求めてください。 ページタイプごとにどのプラグイン、スタイル、スクリプトを読み込むかを設定できるAssets CleanUpプラグインも使用できます。
• JavaScriptによって追加されたCSS。 JavaScriptを使用してページにスタイルシートを「注入」することも可能です。 スタイルシートと同様に、wp_dequeue_script関数でページごとにこれらのスクリプトを無効にできます。 JavaScriptが読み込まれなければ、スタイルシートも注入されません。
  スクリプトとスタイルシートは必要だが、読み込み直後には不要な場合、script defer属性を使用してJavaScriptの読み込みを延期できます。functions.phpに次のコードを追加してください

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );