未使用のCSS

Silktideは実際のブラウザーでページを読み込み、各スタイルシートがページの表示に実際にどの程度使用されているかを測定します。未使用のスタイルが大量に含まれるスタイルシートについては、削減できる可能性のある容量とともに報告します。

これが重要な理由

ブラウザーはをダウンロードして処理するまでページを表示できないため、使用されていないルールもすべて、コンテンツが表示されるまでの時間を遅らせます。未使用のCSSは自然に蓄積します。テーマやフレームワークには、使用しているかどうかにかかわらず、すべての機能向けのスタイルが含まれ、デザインを変更しても古いスタイルが削除されないことも珍しくありません。その結果、訪問者は何も描画しないスタイルを待つことになります。

修正方法

使用しなくなったスタイルを削除します。ビルドツールを使えば、テンプレートをスキャンして参照されているCSSだけを残すことで、この作業を自動化できます。
大きなスタイルシートを分割し、すべてのページのスタイルを含む1つのバンドルではなく、各ページが必要なスタイルだけを読み込むようにします。
ページに必要なスタイルについては、最初の画面を表示するスタイルを優先し、残りはブロックせずに読み込むようにします。

<!-- 最初の描画をブロックせずに読み込む -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

自動削除を行う際は注意してください。でのみ使用されるスタイルや、同じスタイルシートを共有する他のページでのみ使用されるスタイルが、誤って削除される可能性があります。

Silktideによるテスト方法

実際のブラウザーでページを読み込み、ページの読み込み中に適用されたCSSルールを記録します。
各スタイルシートについて、使用されなかったバイト数を測定します。
意味のある無駄がある各スタイルシートについて、現在のサイズ、未使用の割合、削減可能なバイト数を示して報告します。

トラブルシューティング

CSSは使用されているが、すぐには適用されない

測定対象はページの初回読み込みです。ホバー時、モーダル内、JavaScriptでコンテンツを表示した後など、後から適用されるスタイルは、最終的にページで必要になる場合でも未使用としてカウントされます。これは有用な情報でもあります。こうしたスタイルは最初の描画をブロックする必要がないため、別途読み込む候補になります。

スタイルシートをサイト全体で共有している

共有スタイルシートは、個々のページでは大部分が「未使用」になります。最初のページ表示後にファイルがされるため、これは合理的なトレードオフの場合があります。分割する前に、初回訪問時のコストと利便性を比較検討してください。