CSS の圧縮

Silktide は、ページがダウンロードするスタイルシートが圧縮されているかどうかをチェックします。圧縮とは、コードを読む人にしか意味のない空白、コメント、重複を取り除くよう書き換えることです。圧縮されていないスタイルシートは必要以上に大きくなるため、ページの表示が遅くなります。

しても、ページの見た目は変わりません。たとえば、次のようになります。

/* 圧縮前: 読みやすいが、サイズが大きい */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* 圧縮後: 結果は同じで、サイズはわずか */
h1,h2{background-color:#000}

重要な理由

スタイルシートは通常、レンダリングをブロックします。ブラウザーは何かを表示する前にページのをダウンロードするため、スタイルシート内の不要なバイトが、ページが表示されるまでの空白時間を直接長くします。圧縮によってスタイルシートのサイズは大幅に削減できることが多く、その削減効果は、キャッシュされていないページが表示されるたび、すべての訪問者に対して繰り返し得られます。

圧縮は自動的に行われ、動作も変えないため、本番環境のスタイルシートが圧縮されていない場合は、ほとんどの場合見落としが原因です。たとえば、ビルド手順が実行されていない、または開発用ファイルが誤ってデプロイされている可能性があります。

修正方法

サイトのビルドプロセスで CSS の圧縮を有効にします。最新のビルドツールにはすべて圧縮ツールが含まれており、通常は本番ビルドでデフォルトで有効になっています。
サイトにビルドプロセスがない場合は、を確認します。ほとんどの CMS には、スタイルシートを自動的に圧縮する設定またはプラグインがあります。
最終手段として、ファイルをアップロードする前にスタンドアロンの圧縮ツールで処理します。読みやすい元ファイルはプロジェクトに残してください。編集するのは元ファイルで、公開するのは圧縮後の出力ファイルです。
報告されたスタイルシートがサードパーティーのものである場合は、圧縮版を提供していないか確認します。ほとんどの場合、提供されています。

Silktide によるテスト方法

速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
ページがダウンロードする各スタイルシートを調べ、圧縮した場合にどの程度小さくなるかを推定します。
意味のある削減可能サイズがある各ファイルを報告し、合計値に基づいてページを評価します。削減可能サイズが約 50 KB あると評価が下がり、250 KB 以上あると低い評価になります。

トラブルシューティング

ファイルはすでに圧縮されているように見える

圧縮ツールによって圧縮の強さは異なるため、軽く圧縮されたスタイルシートにも、まだ大幅に削減できる余地がある場合があります。このチェックではファイルをどの程度小さくできるかを報告します。現在の圧縮ツールで処理すれば、通常はその差を解消できます。

デバッグ用に読みやすいスタイルが必要

読みやすいソースファイルをプロジェクトに残し、ソースマップを使ってデバッグしてください。ソースマップを使うと、ブラウザーの開発者ツールで元のスタイルを表示しながら、訪問者には圧縮版を提供できます。読みやすいデバッグを実現するために、読みやすいコードを配信する必要はありません。