사용하지 않는 CSS 제거 방법｜워드프레스 렌더링 속도 개선하기
워드프레스 테마와 플러그인은 화면을 꾸미기 위해 여러 CSS 파일을 불러옵니다. 현재 페이지에서 사용하지 않는 스타일도 함께 전송되면 파일 용량이 커지고 브라우저가 처리해야 할 작업이 늘어납니다.
미사용 CSS를 줄이면 첫 화면 표시를 개선할 수 있지만 무조건 삭제하면 메뉴, 팝업과 모바일 화면이 깨질 수 있습니다. 따라서 자동 삭제 버튼부터 누르기보다 사용 범위를 확인하고 단계적으로 적용해야 합니다.
30초 요약
- CSS는 기본적으로 렌더링을 막을 수 있는 자원입니다.
- Chrome 개발자 도구의 Coverage에서 미사용 비율을 확인할 수 있습니다.
- 한 페이지의 검사 결과만으로 전체 CSS를 삭제하면 안 됩니다.
- Critical CSS는 첫 화면에 필요한 스타일을 우선 제공합니다.
- 로그인, 검색, 모바일과 팝업 화면까지 테스트해야 합니다.
- 적용 전 백업과 캐시 삭제가 필요합니다.
미사용 CSS가 생기는 원인
| 원인 | 설명 |
|---|---|
| 다기능 테마 | 사용하지 않는 레이아웃 스타일도 로드 |
| 페이지 빌더 | 위젯별 CSS가 여러 파일로 추가 |
| 플러그인 | 해당 기능이 없는 페이지에도 스타일 로드 |
| 아이콘·폰트 | 사용하지 않는 글꼴과 아이콘 포함 |
| 오래된 사용자 CSS | 삭제된 요소의 스타일이 남아 있음 |
CSS는 브라우저가 페이지를 그리기 전에 내려받고 분석해야 하는 자원입니다. 파일이 크고 여러 개로 분리돼 있으면 초기 렌더링이 늦어질 수 있습니다. web.dev의 Critical Path 안내는 CSS가 기본적으로 렌더링 차단 자원으로 작동할 수 있다고 설명합니다.
사용하지 않는 CSS 확인 방법
Chrome에서 검사할 페이지를 연 후 개발자 도구의 Coverage 기능을 사용하면 현재 화면에서 실행되지 않은 CSS와 자바스크립트 비율을 확인할 수 있습니다.
다만 Coverage 결과는 검사한 페이지와 당시 상태만 반영합니다. 첫 화면에서 사용하지 않은 스타일이 모바일 메뉴, 로그인 후 화면, 마우스를 올렸을 때 표시되는 요소나 팝업에서 사용될 수 있습니다.
홈, 게시글, 카테고리, 검색, 문의 페이지와 모바일 화면을 각각 확인해야 잘못된 삭제를 줄일 수 있습니다.
안전한 CSS 최적화 순서
- 워드프레스 파일과 데이터베이스를 백업합니다.
- PageSpeed Insights와 Coverage 결과를 기록합니다.
- 용량이 큰 CSS 파일의 출처를 확인합니다.
- 사용하지 않는 플러그인과 위젯부터 제거합니다.
- 미사용 CSS 제거 또는 비동기 로딩을 적용합니다.
- 캐시와 CDN 파일을 삭제합니다.
- PC·모바일 화면과 주요 기능을 테스트합니다.
- 속도와 화면 이상 여부를 다시 측정합니다.
플러그인의 ‘미사용 CSS 제거’ 기능을 켠 후 화면이 깨진다면 제외 목록에 해당 파일이나 선택자를 추가해야 합니다. 여러 최적화 플러그인에서 CSS 압축과 지연 기능을 동시에 켜면 충돌할 수 있으므로 한 곳에서만 관리하는 것이 좋습니다.
Critical CSS란?
Critical CSS는 방문자가 처음 보는 화면을 그리는 데 필요한 스타일만 먼저 제공하는 방식입니다. 나머지 CSS는 이후에 불러와 첫 화면 표시를 앞당길 수 있습니다.
하지만 너무 많은 CSS를 HTML 안에 넣으면 문서 용량이 커지고 다른 페이지에서 캐시를 재사용하기 어려워집니다. 적용 후에는 반드시 실제 페이지를 측정해야 합니다. 자세한 구조는 web.dev 리소스 최적화 안내에서 확인할 수 있습니다.
TIP
CSS 제거 후 관리자 상태에서는 정상인데 로그아웃하면 깨지는 경우가 있습니다. 관리자와 일반 방문자에게 적용되는 캐시 파일이 다를 수 있으므로 시크릿 창에서도 확인하세요.
자주 묻는 질문
미사용 비율이 높은 CSS는 삭제해도 되나요?
비율만 보고 삭제하면 안 됩니다. 다른 페이지나 모바일 메뉴에서 사용하는 스타일일 수 있습니다.
CSS 압축과 미사용 CSS 제거는 같은 기능인가요?
다릅니다. 압축은 공백 등을 제거해 파일을 줄이고, 미사용 CSS 제거는 필요하지 않은 스타일 자체를 제외합니다.
적용 후 화면이 깨지면 어떻게 하나요?
기능을 끄고 캐시를 삭제한 후 제외 설정을 사용합니다. 문제가 계속되면 백업으로 복원하세요.
마무리
워드프레스 CSS 최적화는 단순히 파일을 작게 만드는 작업이 아닙니다. 필요 없는 플러그인과 스타일을 정리하고 첫 화면에 필요한 CSS를 우선 제공하는 과정입니다.
한 번에 모든 기능을 켜지 말고 하나씩 적용한 후 PC와 모바일 화면을 확인하는 것이 가장 안전합니다.
댓글 0
첫 댓글을 남겨보세요.