워드프레스 미사용 CSS 제거｜Coverage 안전 점검법

워드프레스에서 사용하지 않는 CSS 제거는 화면을 그대로 유지하면서 불필요한 스타일 전송을 줄이는 작업입니다. 테마와 플러그인은 여러 화면에서 쓸 스타일을 한꺼번에 불러오기 때문에 현재 페이지에 필요하지 않은 CSS가 생길 수 있습니다. 하지만 Chrome Coverage에 빨간색으로 표시됐다는 이유만으로 코드를 삭제하면 모바일 메뉴, 팝업, 검색 결과와 로그인 후 화면이 깨질 수 있습니다. 삭제 비율보다 첫 화면을 막는 파일의 출처를 찾고 필요한 상태를 보존하는 것이 중요합니다.

Coverage 결과가 곧 삭제 목록은 아닌 이유

Chrome DevTools의 Coverage 패널은 기록하는 동안 사용된 CSS와 사용되지 않은 바이트를 보여줍니다. 결과는 검사한 URL, 화면 너비와 당시 수행한 동작에 한정됩니다. 페이지를 새로고침한 직후에는 사용되지 않았지만 메뉴를 열거나 폼 오류가 발생할 때 필요한 선택자가 있을 수 있습니다. 따라서 미사용 비율은 우선순위를 찾는 단서로 사용하고 삭제 판단은 여러 화면과 상태를 합쳐 내려야 합니다.

Chrome Coverage로 CSS 출처 찾기

1. 테스트할 페이지를 시크릿 창에서 엽니다.
2. 개발자 도구에서 명령 메뉴를 열고 Show Coverage를 실행합니다.
3. 기록과 새로고침을 시작한 뒤 메뉴, 팝업, 폼과 탭을 직접 사용합니다.
4. CSS만 표시하고 Total Bytes와 Unused Bytes가 큰 파일부터 확인합니다.
5. 파일 URL과 사용한 화면·동작을 함께 기록합니다.

파일 이름과 경로에는 원인을 찾을 단서가 있습니다. /themes/ 아래라면 테마, /plugins/플러그인명/ 아래라면 해당 플러그인이 등록했을 가능성이 큽니다. 합쳐지거나 캐시된 파일만 보이면 최적화 기능을 스테이징에서 잠시 끈 뒤 원본 경로를 다시 확인하세요. 운영 사이트의 캐시를 무작정 끄지 말고 백업과 복구 방법부터 준비합니다.

삭제보다 먼저 할 수 있는 세 가지 조치

첫째, 쓰지 않는 플러그인과 페이지 빌더 위젯을 정리합니다. 기능 자체를 제거하면 CSS뿐 아니라 자바스크립트와 서버 작업도 함께 줄일 수 있습니다. 둘째, 특정 페이지에만 필요한 파일이라면 전체 사이트에서 지우지 말고 그 기능이 없는 페이지에서만 로드를 제외합니다. 셋째, 직접 관리하는 스타일이라면 공통 CSS와 페이지별 CSS로 나누고 실제 사용하지 않는 규칙을 소스에서 제거합니다.

테마나 플러그인 파일을 직접 수정하면 업데이트 때 변경 내용이 사라질 수 있습니다. 자식 테마, 공식 설정 또는 안전한 로드 제어 방법을 사용하세요. 최적화 플러그인의 자동 제거 기능을 사용할 때도 테스트 환경에서 먼저 결과 파일과 제외 목록을 확인하는 편이 안전합니다.

압축·결합·지연·미사용 제거 차이

web.dev는 큰 스타일시트가 LCP 요소 표시를 막는다면 파일 크기를 줄이거나 비핵심 스타일을 분리하는 방법을 제시합니다. 그러나 작은 CSS 전체를 HTML에 넣으면 다음 방문에서 파일 캐시를 재사용하지 못할 수 있습니다. 기능 이름만 보고 모두 켜기보다 현재 병목이 전송량인지, 렌더링 차단인지, 페이지별 미사용 코드인지 먼저 구분하세요.

화면이 깨졌을 때 되돌리는 순서

1. 미사용 CSS 제거 기능을 끄고 설정을 저장합니다.
2. 페이지 캐시와 CDN 캐시를 순서대로 비웁니다.
3. 시크릿 창에서 문제 URL을 새로 확인합니다.
4. 정상으로 돌아오면 문제 화면의 파일이나 선택자를 제외 목록에 추가합니다.
5. PC·모바일과 로그인·로그아웃 상태를 다시 검사합니다.

여러 최적화 플러그인이 같은 CSS 파일을 동시에 압축하거나 지연하면 원인 추적이 어려워집니다. CSS 최적화는 한 도구에서만 담당하게 하고, 설정 변경 후에는 캐시 플러그인 점검 방법에 따라 캐시 계층을 확인하세요. 점수가 실행마다 달라진다면 PageSpeed 3회 측정 기록법으로 전후 결과를 비교합니다.

개선 효과를 확인하는 기준

전송된 CSS 바이트와 렌더링 차단 구간이 실제로 줄었는지 먼저 확인합니다. 이어서 LCP와 FCP가 같은 조건에서 개선됐는지, 레이아웃이 흔들리거나 상호작용 요소가 사라지지 않았는지 살펴보세요. 미사용 비율이 줄어도 서버 응답이나 큰 이미지가 병목이면 체감 속도는 거의 달라지지 않을 수 있습니다. 전체 지표 관계는 Core Web Vitals 기준과 개선 방법을 함께 참고하면 됩니다.

TIP

Coverage 결과를 저장할 때 “파일 A 미사용 80%”만 적지 말고 “모바일 메뉴와 팝업까지 실행한 글 페이지에서 파일 A의 미사용 바이트가 가장 큼”처럼 조건을 남기세요. 이렇게 기록하면 다른 화면에서 필요한 CSS를 실수로 제거할 가능성을 줄일 수 있습니다.

공식 자료

• Chrome DevTools Coverage 사용법
• Chrome DevTools CSS 기능 안내
• web.dev LCP와 렌더링 차단 CSS 최적화