Code Coverage는 읽기 가능한 모든 스타일시트의 모든 선택기를 라이브 페이지에 대해 테스트하므로 현재 일치하지 않는 CSS 규칙, 각 파일이 낭비하는 바이트 수, 첫 번째 페인트를 보류하는 스크립트를 확인할 수 있습니다.
스타일시트만 커집니다. 가지고 있지 않은 페이지에 대한 규칙이 포함된 테마가 제공되고, 프레임워크는 사용하지 않는 구성 요소를 제공하며, 세 번의 재설계 이후에 파일의 어느 부분이 부하를 지탱하는지 아무도 확신할 수 없습니다. 결과적으로 CSS는 페이지에서 사용할 수 없는 규칙을 전달하기 위해 모든 방문자의 대역폭과 렌더링 시간을 소모하게 됩니다.
코드 커버리지는 이를 직접적으로 측정합니다. 미디어 쿼리, @supports 및 @layer 블록 내에 중첩된 규칙을 포함하여 브라우저가 읽을 수 있는 모든 스타일시트의 모든 규칙을 살펴보고 라이브 DOM에 대해 각 선택기를 테스트합니다. 현재 일치하는 항목이 없는 규칙은 파일당 백분율, 낭비된 바이트 및 확장하고 복사할 수 있는 선택기의 전체 목록과 함께 사용되지 않은 것으로 보고됩니다.
뻔한 함정에 주의한다. 의사 요소와 상태 의사 클래스는 일치하기 전에 제거되므로 :hover 또는 ::before 규칙은 잘못 작성되지 않고 기본 선택자가 존재하는지 여부에 따라 판단됩니다. CORS 헤더 없이 교차 출처로 제공되는 스타일시트는 어떤 스크립트에서도 읽을 수 없으므로 자동으로 완벽한 것으로 간주되는 대신 읽을 수 없는 것으로 플래그가 지정됩니다. 그리고 스캔은 그 순간의 페이지를 그대로 반영하기 때문에 아직 열려 있지 않은 메뉴, 탭 및 모달에 대한 규칙은 사용되지 않은 것처럼 보입니다. 따라서 항목을 삭제하기 전에 해당 항목을 열고 다시 스캔을 누르십시오.
JavaScript 탭은 가중치와 차단이라는 다른 질문에 답합니다. 페이지가 로드하는 모든 스크립트의 전송 크기, 다운로드 시간, 비동기, 지연, 모듈, 동적으로 로드 또는 첫 번째 페인트 유지 여부를 포함하여 목록을 작성한 다음 차단되는 바이트 수를 합산합니다. 의도적으로 실행 범위로 판매되지 않습니다. 실행된 JavaScript 라인을 파악하려면 DevSuite Pro가 요청하지 않는 Chrome의 디버거 API가 필요하므로 여기서는 라인 수준 보고서인 척하는 것이 없습니다.
읽기 가능한 모든 스타일시트의 모든 규칙은 파일 이름이나 크기로 추정되지 않는 미디어 쿼리, @supports 및 @layer 블록 내부 규칙을 포함하여 라이브 DOM에 대해 테스트됩니다.
각 스타일시트는 사용되지 않은 비율, 사용된 규칙 수와 사용되지 않은 규칙 수 및 낭비된 바이트 수를 가져오며, 최악의 위반 항목이 맨 위에 오도록 정렬됩니다.
파일을 확장하여 일치하는 항목이 없는 선택기를 읽은 다음 CSS 블록으로 복사하여 편집기에서 작업하거나 팀원에게 전달하세요.
:hover 및 :focus-within과 같은 의사 요소 및 상태 의사 클래스는 일치하기 전에 제거되므로 대화형 규칙은 삭제되는 대신 공정하게 판단됩니다.
크기, 다운로드 시간, 비동기, 지연, 모듈, 동적으로 로드 또는 첫 번째 페인트 차단 여부와 함께 나열된 모든 스크립트에 총 차단 바이트도 표시됩니다.
읽을 수 없는 교차 출처 스타일시트는 점수가 매겨지기보다는 표시되며, JS 탭에는 실행된 줄이 아니라 무게를 측정한다고 분명히 나와 있습니다. 발명된 숫자는 없습니다.
구매한 테마에는 수십 개의 데모 레이아웃용 CSS가 포함되어 있습니다. 귀하의 사이트에서 사용하지 않는 파일의 양을 확인하고 추측보다는 증거를 통해 파일을 잘라냅니다.
실제 템플릿에서 CSS 프레임워크가 얼마나 남아 있는지 확인하고 제거 또는 트리 쉐이킹 구성이 생각대로 작동하는지 확인하세요.
렌더링을 방해하는 스크립트를 크기와 함께 나열하고 콘텐츠를 더 빨리 화면에 표시하기 위해 무엇을 연기, 분할 또는 삭제할지 결정합니다.
숫자를 살펴보세요. 가장 많은 바이트를 낭비하는 파일, JavaScript가 차단하는 양, 작업의 첫 시간이 가장 큰 성과를 거두는 곳은 어디입니까?
자신이 구축하지 않은 사이트를 인수하여 해당 사이트의 CSS 및 JavaScript가 얼마나 많이 여전히 자리를 차지하고 있는지 빠르게 읽어보세요.
DevSuite Pro 도크에서 코드 적용 범위 아이콘을 클릭하세요. 검사는 즉시 실행되며 검사한 규칙 수와 사용되지 않은 규칙의 비율을 보고합니다.
맨 위 행에는 스타일시트 수, 전체 규칙, 사용되지 않은 비율 및 낭비된 바이트가 표시됩니다. 아래 파일은 낭비되는 정도에 따라 정렬됩니다.
이 페이지에서 어떤 규칙과도 일치하지 않는지 정확히 읽으려면 모든 파일에서 사용되지 않은 선택기 표시를 클릭하세요.
메뉴, 탭, 아코디언 및 모달을 연 다음 다시 스캔을 누르세요. 요소가 해당 상태에만 존재하는 규칙은 사용되지 않음에서 사용됨으로 이동됩니다. 삭제하기 전에 항상 이 작업을 수행하세요.
사용하지 않는 선택기를 복사하면 작업할 CSS 블록이 제공됩니다. JSON 내보내기는 티켓이나 감사 문서에 대한 JavaScript 인벤토리를 포함한 전체 보고서를 복사합니다.
