사용하지 않는 CSS를 줄이려면 먼저 크롬 개발자 도구의 Coverage 탭으로 페이지에서 실제로 쓰이지 않는 코드가 얼마나 되는지 확인하는 것부터 시작하면 됩니다.
몇 년 동안 수정이 쌓인 홈페이지는 화면에 쓰이지도 않는 스타일까지 매번 내려받느라 첫 화면이 늦게 뜨는 경우가 많습니다.

1. Coverage 탭 열고 측정하기

크롬에서 F12로 개발자 도구를 연 뒤 Ctrl + Shift + P(맥은 Cmd + Shift + P)를 누르고 coverage를 입력해 Show Coverage를 고릅니다. 하단에 열린 Coverage 탭에서 새로고침 모양 버튼을 누르면 페이지를 다시 불러오면서 파일마다 전체 용량과 사용하지 않은 용량을 보여 줍니다.

목록에서 CSS 파일을 더블클릭하면 Sources 탭에서 코드가 열리고, 줄 왼쪽에 실행된 부분과 쓰이지 않은 부분이 색으로 구분됩니다. 사용하지 않은 비율이 70~80%를 넘는 파일이 있다면 그 파일부터 정리할 후보입니다.

2. 빨간 줄이라고 바로 지우면 안 되는 이유

Coverage는 지금 열린 페이지, 지금 화면 상태만 기준으로 계산합니다. 그래서 아래 같은 코드도 쓰이지 않는 것으로 표시됩니다. 이걸 모르고 한 번에 지웠다가 모바일 메뉴가 깨지는 사고를 저희도 초기에 겪은 적이 있습니다.

• 다른 페이지(서브 페이지, 게시판, 문의 폼)에서만 쓰는 스타일
• 모바일·태블릿 미디어쿼리 안의 스타일
• :hover, :focus처럼 마우스나 키보드 동작 후에 적용되는 스타일
• 메뉴 열기, 팝업처럼 스크립트가 나중에 붙이는 클래스

그래서 측정은 메인과 주요 서브 페이지에서 각각, PC와 모바일 폭에서 메뉴와 팝업을 직접 열어 본 상태로 여러 번 해야 실제로 버려도 되는 코드가 보입니다.

3. 정리하는 현실적인 순서

가장 효과가 큰 건 통째로 넣은 라이브러리입니다. 아이콘 몇 개 쓰려고 아이콘 폰트 전체 CSS를 불러오거나, 그리드만 쓰면서 프레임워크 CSS를 전부 넣은 경우라면 필요한 부분만 남기는 것만으로 용량이 크게 줄어듭니다. 그다음 특정 페이지에서만 쓰는 스타일을 별도 파일로 떼어 그 페이지에서만 불러옵니다.

빌드 도구를 쓰는 프로젝트라면 PurgeCSS 같은 도구로 HTML에 등장하지 않는 선택자를 자동으로 걸러 낼 수 있습니다. 이때 스크립트가 붙이는 클래스는 HTML에 없으니 safelist에 꼭 넣어 두어야 합니다.

// purgecss.config.js
module.exports = {
  content: ['./**/*.html', './js/**/*.js'],
  css: ['./css/style.css'],
  // 스크립트가 나중에 붙이는 클래스
  safelist: ['is-open', 'active', /^modal-/]
};

정리를 마치면 같은 페이지에서 Coverage를 다시 재 보고, 네트워크 탭에서 CSS 전송 용량이 얼마나 줄었는지 전후를 비교해 기록해 두세요. 다음 수정 때 다시 불어나는지 확인하는 기준이 됩니다.