CSSを縮小する

この記事では、HTMLおよびCSSコードの縮小化とは何か、それが何のためにあるのか、そしてそれをどのように達成するのかについて話したいと思います。コードをブロックや行などに構造化することは、人間が読みやすいようにするために必要です。そのようなブロックを全体として認識し、タグがどこで開き、どこで閉じるかを確認します。ブラウザの場合、これは必要ありません。コードを順番に読み取ります。テキスト内の不要な改行、スペース、コメントは、読み取りを困難にし、ページの読み込み時間を長くするだけです。したがって、コードを縮小する必要がある主な理由は2つあります。ページのサイズ（重み）を小さくし、その結果、読み込み速度を上げることです。 2番目の理由は最初から続きます。これは行動要因の改善です。サイトの読み込みが速い場合は、バウンス率が低くなり、トラフィックが増加し、検索結果が増加します。

現在、CSSファイルを最適化するための膨大な数のWebツールがあります。それらのほとんどには独自の作業アルゴリズムがあります（もちろん、重複があります）。プログラム自体の効果も大きく異なります。さらに、一部のオプティマイザーはCSSコードを壊す可能性があり、その後スタイルが無効になります。 CSSファイルの縮小（CSS圧縮と混同しないでください）には、ファイルから不要な文字を削除してサイズを縮小し、読み込みを高速化することが含まれます。 CSSファイルの縮小と圧縮は同じではありません。ただし、これらの方法はどちらもロード時間を短縮するように設計されています。違いは、それらがどのように機能するかにあります。圧縮は、Gzipやbrotliなどの圧縮アルゴリズムを使用してファイルサイズを縮小するために使用されます。ファイルは、クライアントに送信される前に圧縮されます。