コード カバレッジは、読み取り可能なすべてのスタイルシートのすべてのセレクターをライブ ページに対してテストするため、現在どの CSS ルールが一致しないのか、各ファイルが何バイト無駄にしているのか、どのスクリプトが最初のペイントを保留しているのかを確認できます。
スタイルシートは成長するばかりです。テーマには、所有していないページのルールが付属しており、フレームワークには、一度も使用しないコンポーネントが付属しています。3 回再設計しても、ファイルのどの半分に負荷がかかっているかは誰もわかりません。その結果、CSS は、ページが使用できないルールを提供するために、すべての訪問者の帯域幅とレンダリング時間を犠牲にすることになります。
コードカバレッジはそれを直接測定します。メディア クエリ、@supports、@layer ブロック内にネストされたルールを含む、ブラウザーが読み取れるすべてのスタイルシート内のすべてのルールを調べ、ライブ DOM に対して各セレクターをテストします。現時点で何も一致しないルールは、ファイルごとに、パーセンテージ、無駄なバイト数、展開およびコピーできるセレクターの完全なリストとともに未使用として報告されます。
明らかな罠に注意です。疑似要素と状態疑似クラスは一致する前に削除されるため、 :hover または ::before ルールは、誤って削除されるのではなく、その基本セレクターが存在するかどうかに基づいて判断されます。 CORS ヘッダーのないクロスオリジンで提供されるスタイルシートは、どのスクリプトでも読み取ることができないため、暗黙的に完璧としてカウントされるのではなく、読み取り不可能としてフラグが立てられます。また、スキャンにはその時点でのページが反映されるため、まだ開いていないメニュー、タブ、モーダルのルールは未使用に見えるため、何も削除する前にそれらを開いて「再スキャン」を押します。
JavaScript タブは、重みとブロックという別の質問に答えます。ページがロードするすべてのスクリプトの転送サイズ、ダウンロード時間、非同期、遅延、モジュール、動的ロード、最初のペイントの保留などをインベントリし、ブロックされているバイト数を合計します。これは意図的に実行カバレッジとして販売されていません。どの JavaScript 行が実行されたかを知るには Chrome のデバッガー API が必要ですが、DevSuite Pro はこれを要求しないため、ここには行レベルのレポートを装うものはありません。
メディア クエリ、@supports、@layer ブロック内のルールを含め、すべての読み取り可能なスタイルシート内のすべてのルールがライブ DOM に対してテストされます。ファイル名やサイズから推定されるものではありません。
各スタイルシートには、未使用の割合、使用されたルールと未使用のルールの数、および無駄なバイト数が表示され、最悪の違反者が先頭になるように並べ替えられます。
ファイルを展開して何も一致しないセレクターを読み取り、それを CSS ブロックとしてコピーしてエディターで作業するか、チームメイトに渡します。
:hover や :focus-within などの疑似要素と状態疑似クラスは一致する前に削除されるため、インタラクティブなルールは無視されるのではなく公平に判断されます。
すべてのスクリプトは、そのサイズ、ダウンロード時間、非同期、遅延、モジュール、動的にロードされるか最初のペイントをブロックするかどうかに加えて、合計ブロックバイト数とともにリストされます。
判読できないクロスオリジン スタイルシートにはスコア付けではなくフラグが付けられ、JS タブには実行された行ではなく重みを測定することが明確に示されています。発明された数字はありません。
購入したテーマには、数十のデモ レイアウト用の CSS が同梱されています。サイトが使用していないファイルの量を確認し、推測ではなく証拠に基づいてファイルを削減します。
CSS フレームワークのどの程度が実際のテンプレート上に残っているか、パージまたはツリーシェイキング設定が想定どおりに機能しているかどうかを確認してください。
レンダリングを保留しているスクリプトをそのサイズとともにリストし、コンテンツをより早く画面に表示するために何を延期、分割、または削除するかを決定します。
どのファイルが最も多くのバイトを浪費しているのか、JavaScript がブロックしている量はどれくらいなのか、最初の 1 時間の作業が最も効果をもたらすのはどこなのかなど、数値を把握して作業に入ります。
自分が構築していないサイトを引き継いだ場合、その CSS と JavaScript がどの程度まだその場所を占めているかを簡単に読んでください。
DevSuite Pro ドックのコード カバレッジ アイコンをクリックします。スキャンはすぐに実行され、チェックしたルールの数とそれらの未使用の割合がレポートされます。
一番上の行には、スタイルシート数、ルールの合計、未使用の割合、無駄になったバイト数が表示されます。以下のファイルは、無駄な量の順に並べられています。
任意のファイルの未使用のセレクターを表示をクリックすると、このページに一致しないルールが正確に表示されます。
メニュー、タブ、アコーディオン、モーダルを開き、「再スキャン」を押します。これらの状態でのみ要素が存在するルールは、未使用から使用済みに移行します。削除する前に必ずこれを行ってください。
未使用のセレクターをコピーすると、CSS ブロックが作成されます。 JSON のエクスポートでは、チケットまたは監査ドキュメントの JavaScript インベントリを含む完全なレポートがコピーされます。
