Lighthouse レポートの [最適化] セクションには、 圧縮されていないすべての CSS ファイル キビバイト(KiB)単位の削減見込み 圧縮した場合は次のようになります。
CSS ファイルを圧縮することでパフォーマンスが向上する仕組み
CSS ファイルを圧縮すると、ページ読み込みのパフォーマンスが向上します。 多くの場合、CSS ファイルは必要以上に大きいため、例:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
次のように短縮できる:
h1,
h2 {
background-color: #000000;
}
ブラウザの観点から見ると これら 2 つのコードサンプルは機能的には同じですが 2 番目の例ではバイト数が少なくなります。 最小化子を使用すると、空白文字を取り除くことで、バイト効率をさらに高めることができます。
h1,
h2 {
background-color: #000000;
}
一部のミニファイアは、巧妙な方法でバイトを最小化しています。
たとえば、色の値 #000000
をさらに #000
に減らすことができます。
これは省略形に相当するものです
Lighthouse では、費用削減額の見積もりが提示されます。
CSS で検出されたコメントや空白文字に
自動的に適用されます
これは控えめな見積もりです。
先ほど述べたように
圧縮ツール(#000000
を #000
に減らすなど)を巧みに最適化できる
ファイルサイズをさらに小さくすることができます
圧縮ツールを使用する場合は
Lighthouse のレポートよりも多くの節約が見られる場合があります。
CSS 圧縮機能を使用して CSS コードを圧縮する
更新頻度の低い小規模サイトでは オンラインサービスを利用して手動でファイルを圧縮できるでしょう CSS をサービスの UI に貼り付けると、圧縮されたコードが返されます。
プロのデベロッパーの場合 CSS を自動的に圧縮する自動ワークフローを 行うことをおすすめします。 これは通常、Gulp や Webpack などのビルドツールを使用して実現します。
CSS コードを圧縮する方法については、CSS を圧縮するをご覧ください。
スタック固有のガイダンス
Drupal
[Administration] > [Aggregate CSS files] を有効にします。設定 > 開発環境。より高度な集計オプションも構成できる 追加のモジュールを使用する CSS を連結、圧縮、圧縮して、サイトを高速化する あります。
Joomla
多数の Joomla 拡張機能 CSS を連結、圧縮、圧縮して、サイトを高速化できます あります。この機能を提供するテンプレートもあります。
Magento
[CSS ファイルを最小化] オプションを有効にします。 ストアの [デベロッパー設定] で管理できます。
対応
ビルドシステムで CSS ファイルが自動的に圧縮される場合は、 本番環境ビルドのデプロイ 説明します。これは React Developer Tools で確認できます あります。
WordPress
さまざまな WordPress プラグインを使用すると、 スタイルを結合、圧縮、圧縮してその他のおすすめ できる必要があります。