워드프레스에서 사용하지 않는 CSS를 제거(또는 지연)하는 방법

워드프레스에서 사용하지 않는 CSS를 제거하고 웹사이트 속도를 높이고 싶으신가요?

웹사이트 최적화의 핵심 목표 중 하나는 불필요한 코드를 제거하는 것입니다. 이를 통해 웹페이지의 전체 용량이 줄어들어 페이지 로딩 속도가 빨라지고, 방문자에게 더 쾌적한 사용자 경험을 제공할 수 있습니다.

웹페이지 용량을 크게 줄일 수 있는 영역 중 하나가 바로 스타일링입니다. 웹사이트 스타일링은 '캐스케이딩 스타일 시트(Cascading Style Sheets)'라고 하는 규칙 기반 언어로 제어되며, 이는 HTML 및 자바스크립트와 함께 월드 와이드 웹의 핵심 구성 요소입니다.

흔히 CSS라고 줄여 부르는 스타일시트는 페이지 색상, 글꼴, 배경, 이미지 스타일, 여백(margin), 안쪽 여백(padding) 등을 정의하는 데 사용됩니다. 아래 예시 코드는 제목(h1)을 가운데 정렬하고 빨간색으로 표시하도록 설정합니다.

h1 {
  text-align: center;
  color: red;
}

일반적인 워드프레스 사이트는 페이지를 올바르게 표시하기 위해 수많은 스타일시트가 필요합니다. 워드프레스 코어에서 사용하는 CSS 외에도 활성화된 테마와 플러그인이 각각 CSS 파일을 호출하기 때문에, 하나의 사이트에서 열두 개 이상의 CSS 파일이 필요할 수도 있습니다.

CSS 파일이 너무 크거나 호출되는 파일이 너무 많으면 페이지 로딩 시간이 늘어납니다. 이 문제를 해결하기 위해 다양한 기법을 활용할 수 있는데, 대표적으로 Defer(지연), Minify(압축), Combine(병합)이 있습니다.

아래는 각 기법에 대한 요약입니다.

CSS 무게를 더 줄이고 싶다면 워드프레스에서 사용하지 않는 CSS 규칙을 제거하여 방문자에게 필요한 스타일만 다운로드되도록 하는 것을 추천합니다. 브라우저가 불필요한 CSS 코드를 로드하지 않도록 하면 페이지 로딩 속도가 빨라지고 사용자 경험도 향상됩니다.

지금부터 사용하지 않는 CSS가 무엇인지 살펴보고, 워드프레스 사이트에서 이를 제거하는 방법을 자세히 알아보겠습니다.

워드프레스에서 사용하지 않는 CSS란? 왜 발생할까?

사용하지 않는 CSS(Unused CSS)란 현재 페이지에서 실제로 호출되지 않는 CSS 규칙을 의미합니다. 페이지가 스타일시트의 모든 CSS 규칙을 사용하는 경우는 드물기 때문에 매우 흔하게 발생합니다. 예를 들어, 스타일시트에 제목을 빨간색으로 표시하는 규칙이 있더라도 해당 페이지에서 실제로 사용되지 않는다면 그것은 사용하지 않는 CSS로 분류됩니다.

브라우저는 사용하지 않는 CSS 규칙을 필요로 하지 않지만, 이 코드는 불필요하게 CSS 파일의 용량을 늘립니다. 따라서 워드프레스에서 사용하지 않는 CSS 코드를 제거하면 페이지 로딩 속도를 개선할 수 있습니다.

워드프레스 테마는 styles.css 파일을 메인 스타일시트로 사용해야 하며, 많은 테마가 글꼴, 테마 스킨, 기타 디자인 요소를 위해 추가 스타일시트를 사용합니다. 테마 CSS 파일에 포함된 많은 규칙들은 특정 상황에서만 필요하지만, 이런 파일들이 사이트의 모든 페이지에서 로드되는 경우가 일반적입니다.

특히 워드프레스 플러그인은 개발자들이 기본값으로 모든 페이지에서 스타일시트를 로드하도록 만드는 경우가 많아, 사용하지 않는 CSS를 삽입하는 주범이 되곤 합니다.

워드프레스에서 사용하지 않는 CSS를 제거하는 것은 좋은 습관이지만, 웹사이트 디자인에 중요한 CSS 코드를 삭제하면 디자인이 깨질 수 있으니 주의해야 합니다.

그렇다면 크리티컬 CSS(Critical CSS)는?

자주 접하게 되는 또 다른 용어가 바로 크리티컬 CSS(Critical CSS)입니다. 이는 스크롤 없이 화면에 즉시 보여야 하는 콘텐츠를 표시하는 데 필요한 스타일을 의미합니다. 이 영역을 첫 화면(Above the Fold)이라고 부르며, 브라우저가 첫 화면 콘텐츠를 로드하는 데 걸리는 시간을 FCP(First Contentful Paint)라고 합니다.

구글은 First Contentful Paint가 빠르게 완료되도록 크리티컬 CSS를 추출하여 압축(minify)한 뒤 HEAD 요소 내에 인라인으로 삽입할 것을 권장합니다. 그리고 덜 중요한 CSS 파일이 초기 페이지 로딩을 늦추지 않도록, 필수적이지 않은 CSS는 Defer 기법으로 나중에 로드하면 됩니다.

사용하지 않는 CSS를 찾는 방법

페이지에서 사용하지 않는 CSS를 빠르게 확인하려면 GTmetrix, Google PageSpeed Insights, Pingdom Website Speed Test 같은 성능 리포트 도구에 URL을 입력하세요. 리포트에서 사용하지 않는 CSS를 표시해주고, 해당 규칙을 제거하거나 지연 로드할 것을 권장합니다.

모던 브라우저는 웹사이트의 디자인과 코드를 분석할 수 있는 개발자 도구를 제공합니다. 구글 크롬의 개발자 도구인 Chrome DevTools에는 커버리지(Coverage) 탭이 있어, 사용하지 않는 자바스크립트와 CSS 코드를 찾는 데 활용할 수 있습니다. 사용되지 않는 규칙이 많은 CSS 파일을 찾는 빠르고 효과적인 방법입니다.

Chrome DevTools를 실행하려면 페이지에서 마우스 오른쪽 버튼을 클릭한 후 검사(Inspect)를 선택하면 됩니다. 그다음 Coverage 탭을 클릭하면 각 파일의 URL과 해당 파일이 자바스크립트인지, CSS인지, 혹은 둘 다인지 확인할 수 있습니다. 오른쪽에는 파일의 전체 용량(바이트)과 사용되지 않는 용량이 표시됩니다. 시각화 막대에서는 사용되지 않는 코드가 빨간색으로, 필요한 코드는 청록색으로 표시됩니다. 하단 패널에 이 내용이 요약되어 있으며, 특정 파일을 클릭하면 위쪽 패널에서 사용되지 않는 CSS 규칙이 빨간색으로 강조된 것을 볼 수 있습니다.

Coverage 탭의 작동 방식에 대한 자세한 내용은 Chrome Developers의 Coverage 문서를 참고하세요.

이 밖에도 온라인에는 무료 및 유료 미사용 CSS 도구가 다양하게 존재합니다.

• JitBit Unused CSS – 웹사이트의 모든 페이지를 크롤링하여 어디에서도 사용되지 않는 CSS 선택자를 표시해주는 무료 서비스
• PurifyCSS Online – 사용하지 않는 코드를 찾아내고 정리된 CSS 파일을 제공하는 유용한 무료 도구
• UnusedCSS – 페이지 URL을 스캔하여 불필요한 코드 없이 깔끔한 CSS 파일을 제공하는 유료 서비스(월 $25부터)

Chrome DevTools나 PurifyCSS Online 같은 도구는 웹사이트의 미사용 CSS 규칙을 파악하는 데 유용하지만, 워드프레스처럼 동적인 플랫폼에서는 실질적인 해결책이 되기 어렵습니다.

워드프레스 테마와 플러그인은 사이트 전체에서 서로 다른 스타일시트를 로드하기 때문에, 미사용 CSS의 양은 페이지마다 달라집니다. 그래서 저는 일반적으로 워드프레스 최적화 플러그인을 사용해 미사용 CSS를 제거(또는 지연)하는 것이 더 효과적이라고 생각합니다.

지금부터 워드프레스 사이트에서 미사용 CSS 제거를 돕는 유용한 플러그인들을 자세히 살펴보겠습니다.

WP Rocket으로 워드프레스 미사용 CSS 제거하기

WP Rocket은 시장에서 가장 인기 있는 워드프레스 성능 최적화 솔루션 중 하나입니다. 라이선스는 연 $49입니다.

이 플러그인은 버튼 한 번의 클릭으로 웹사이트의 모든 미사용 CSS를 제거할 수 있는 기능을 제공합니다. 내부적으로 WP Rocket은 각 페이지의 모든 스타일시트와 스크립트를 검토하여, HTML 코드에 있는 CSS 선택자와 CSS 규칙을 대조합니다. 이 과정은 WP Rocket의 서버에서 외부적으로 처리되므로, 워드프레스 보안 플러그인에 해당 서버 IP가 허용 목록에 등록되어 있는지 확인하세요.

WP Rocket이 자동으로 모든 미사용 CSS 코드를 제거하기 때문에, 문의 폼처럼 웹사이트 디자인의 일부가 깨지는 경우가 발생할 수 있습니다. 이럴 때는 관련 CSS 파일, ID 또는 클래스를 WP Rocket의 CSS safelist(안전 목록)에 추가하면 됩니다.

추천 글: 워드프레스 데이터베이스 정리 방법

Perfmatters로 워드프레스 미사용 CSS 제거하기

Perfmatters는 제가 직접 웹사이트에서 미사용 CSS 코드를 제거하기 위해 사용하는 최적화 솔루션입니다. 연 $24.95라는 저렴한 가격의 프리미엄 워드프레스 플러그인입니다.

Perfmatters의 Script Manager를 사용하면 사이트 전체의 특정 글과 페이지에서 CSS 파일과 자바스크립트 파일을 활성화하거나 비활성화할 수 있습니다. 정규 표현식, 사용자 로그인 여부, 디바이스 유형에 따른 예외 처리도 가능합니다.

저는 이 플러그인이 최적화가 잘 되지 않은 워드프레스 플러그인을 다루는 데 매우 효과적이라고 생각합니다. Jetpack을 예로 들어보겠습니다. Jetpack 모듈을 프론트엔드에서 하나도 사용하지 않더라도, 사이트의 모든 페이지에서 85.1KB짜리 CSS 파일을 로드합니다. 아래에서 볼 수 있듯이 Perfmatters를 사용하면 이런 불필요한 CSS 파일이 로드되지 않도록 차단할 수 있습니다.

Asset CleanUp으로 워드프레스 미사용 CSS 제거하기

Perfmatters의 훌륭한 대안은 Asset CleanUp입니다. 무료로 사용할 수 있으며, €42.08의 프로 버전을 구매하면 추가 기능을 활용할 수 있습니다.

Asset CleanUp의 CSS & Javascript 관리자를 사용하면 파일을 프리로드하거나, 사이트의 특정 페이지에서 파일을 비활성화할 수 있습니다. 로그인한 사용자에 대한 예외 설정도 가능합니다.

Asset CleanUp Pro로 업그레이드하면 CSS와 자바스크립트 파일이 로드되는 영역을 더 세밀하게 제어할 수 있고, 화면 크기 및 정규 표현식 기반의 추가 예외 설정도 사용할 수 있습니다.

RapidLoad로 미사용 CSS 파일 제거하기

Autoptimize는 CSS, 자바스크립트, HTML 파일을 집계, 압축, 캐싱할 수 있는 효과적인 워드프레스 최적화 플러그인입니다. 워드프레스 플러그인인 RapidLoad Power-Up은 Autoptimize의 기능을 확장하여 워드프레스에서 미사용 CSS를 제거하도록 도와줍니다.

WP Rocket의 CSS 최적화 도구처럼, RapidLoad Power-Up 역시 어떤 CSS 규칙이 실제로 필요한지 분석하여 페이지 로딩 시간을 단축합니다.

이름에서 알 수 있듯이 이 플러그인은 CSS 파일 용량을 줄이기 위해 RapidLoad 서비스를 활용합니다. 따라서 RapidLoad Power-Up을 사용하려면 RapidLoad 서비스에 가입해야 하며, 월 요금제는 월 $5.83부터 시작합니다.

마치며

개발자들은 우리 웹사이트의 스타일을 결정하는 스타일시트 최적화에 충분히 신경 쓰지 않고 있습니다. 많은 워드프레스 테마와 플러그인이 특정 페이지에서만 필요한 CSS 규칙임에도 불구하고 사이트 전체에서 로드하는 것을 쉽게 발견할 수 있습니다.

내 웹사이트에 얼마나 많은 미사용 CSS 코드가 있는지 확인하려면 GTmetrix, Google PageSpeed Insights, Pingdom Website Speed Test 같은 성능 리포트 도구로 벤치마크를 돌려보길 추천합니다. Chrome DevTools와 PurifyCSS Online 같은 개발자 도구를 통해서도 CSS가 페이지에 불필요하게 추가하는 무게를 확인할 수 있습니다.

다행히도 다양한 워드프레스 성능 최적화 솔루션을 통해 미사용 CSS를 제거할 수 있습니다. 과정을 자동화하고 싶다면 WP Rocket이나 RapidLoad Power-Up을 추천합니다. 반면 워드프레스 유지 관리에 더 직접적으로 개입하고 싶다면 Perfmatters와 Asset CleanUp이 적합합니다. 이 두 플러그인은 CSS와 자바스크립트 파일이 사이트의 어느 영역에서 로드될지 완벽하게 제어할 수 있게 해주기 때문입니다.

중요한 CSS 코드를 제거하면 웹사이트 디자인이 깨질 수 있다는 점을 유의하고, 모든 요소가 정상적으로 작동하는지 정기적으로 페이지를 점검하세요.

추천 글: 워드프레스에서 자바스크립트 파싱 지연(defer parsing of javascript)하는 방법

행운을 빕니다.

Kevin