불필요한 스타일 시트는 페이지 로딩 속도를 늦추고 검색엔진 평가에 부정적인 영향을 미칩니다. PurifyCSS를 활용해 사용되지 않는 코드를 제거하고 색인 상태와 노출 순위를 최적화하는 기술적 SEO 점검 방법을 통해 블로그나 사이트 성능을 향상시킬수 있습니다.
PurifyCSS 소개: 불필요한 CSS 제거와 검색 최적화
검색 최적화를 위해서 CSS 코드 최적화 후 불필요한 CSS 코드를 삭제하는 작업은 페이지 로딩 속도를 획기적으로 개선하는 핵심 단계입니다. PurifyCSS는 프로젝트에서 사용되는 CSS 규칙을 분석하여 실제로 사용되는 스타일만 남기고 나머지는 삭제해주는 효율적인 도구입니다.
CSS 코드 최적화는 유료 서비스를 이용할 수도 있지만, PurifyCSS를 사용하면 비용을 지불하지 않고도 직접 작업할 수 있습니다. 이 작업을 진행하기 전에 안전을 위해 반드시 전체 데이터 백업을 진행해야 합니다. 티스토리 블로그 기준으로는 관리자 메뉴의 데이터 관리 항목에서 간단하게 전체 백업을 진행할 수 있습니다.
HTML 및 CSS 코드를 별도로 백업하고 복사본 파일로 작업을 진행하는 것이 안전하며, 이는 SEO 점검의 필수적인 사전 조치입니다.
PurifyCSS를 이용한 CSS 코드 최적화는 페이지 로딩 속도를 개선하여 검색엔진 평가에 긍정적인 영향을 미칩니다.
CSS 최적화 전후의 검색엔진 평가 변화
| 항목 | 최적화 전 (불필요 CSS 포함) | 최적화 후 (PurifyCSS 적용) | SEO 영향 |
|---|---|---|---|
| CSS 파일 크기 | 큼 (전체 코드 포함) | 작음 (사용 코드만 남음) | 로딩 속도 지연 |
| 페이지 로딩 속도 | 느림 | 빠름 | 검색엔진 평가 상승 |
| 노출 순위 | 낮아질 가능성 있음 | 개선 가능성 높음 | 모바일 친화성 점수 개선 |
PurifyCSS 설치 및 최적화된 CSS 파일 생성 절차
1. 환경 설정: PowerShell 및 Node.js 설치
이 작업을 위해서는 Windows PowerShell이 설치되어 있어야 합니다. Microsoft Store 메뉴에서 Windows PowerShell을 검색 후 설치하시면 됩니다. 또한, PurifyCSS는 NPM 명령어를 사용하므로, NPM 명령어가 실행되지 않는 경우 Node.js를 설치해야 합니다.
2. HTML 소스 추출 및 샘플 글 작성
CSS 코드 최적화의 정확도를 높이기 위해서는 블로그의 모든 스타일 사용 환경을 포함해야 합니다. 따라서 티스토리 에디터에서 샘플 글 작성을 통해 에디터의 모든 기능을 사용하여 필요한 CSS가 누락되지 않도록 합니다. 이 작업을 완료한 후, 메인 화면, 목록 화면, 작성한 글 화면의 HTML 코드를 복사하여 1개의 통합 HTML 파일로 만들어 주시면 됩니다.
HTML 소스는 각 페이지에서 마우스 오른쪽을 눌러 ‘페이지 소스 보기’를 클릭한 후 전체 코드를 복사하여 저장합니다. 수정해야 할 기존 CSS 코드를 ‘CSS.CSS’와 같은 이름으로 저장하여 준비합니다.
3. PurifyCSS 실행 및 최적화된 CSS 생성
PowerShell을 실행하고 purifycss를 설치합니다. 설치 후 아래 명령어를 사용하여 불필요한 CSS를 제거하고 최적화된 CSS 파일을 생성합니다.
npm install --save-dev purify-css 설치 명령어
purifycss --version 설치 확인 명령어
purifycss e:/css.css index.html -o e:/cs1.css -i -r
형성된 최적화된 CSS 파일을 스킨 편집의 CSS 편집란에 복사해서 넣어 주시면 됩니다. 이 과정을 통해 검색엔진 평가의 주요 지표인 로딩 속도를 효과적으로 개선할 수 있습니다. 최적화된 CSS를 적용한 후에는 반드시 모든 화면의 작동 여부를 확인하는 최종 SEO 점검이 필요합니다.
A. CSS 코드 최적화는 파일 크기를 줄여 웹사이트의 페이지 로딩 속도를 향상시킵니다. 로딩 속도는 구글 등 주요 검색 엔진의 핵심 순위 결정 요소 중 하나이며, 속도 개선은 사용자 경험(UX)을 높여 이탈률을 줄이고 검색엔진 평가를 직접적으로 개선합니다.
Q2. PurifyCSS 작업 후 CSS가 깨지는 문제가 발생하면 어떻게 해야 하나요?
A. PurifyCSS가 동적으로 로드되는 CSS나 JavaScript에 의해 생성되는 클래스를 인식하지 못해서 발생할 수 있습니다. 사전 작업 시 메인/목록/작성글의 HTML 소스 추출을 통합적으로 진행하고, PurifyCSS 명령 실행 시 --rejected 옵션을 활용하여 누락된 CSS를 확인하고 수동으로 추가하는 SEO 점검 과정이 필요합니다.
Q3. PurifyCSS 대신 다른 CSS 최적화 도구는 무엇이 있나요?
A. PurifyCSS 외에도 UnCSS, Critical CSS 등의 도구가 있습니다. 이들은 모두 불필요한 CSS 제거라는 동일한 목표를 가지고 있으며, 특히 Critical CSS는 렌더링을 차단하는 CSS를 최소화하여 체감 로딩 속도를 개선하는 데 효과적입니다. 롱테일 키워드를 통한 트래픽 유입에 초점을 맞춘다면, 로딩 속도 개선은 필수적인 SEO 작업입니다.