혹시 블로그나 사이트가 좀 느리다고 느껴본 적 있으신가요? 쓰지도 않는 스타일 코드가 잔뜩 쌓여 있으면 페이지 뜨는 속도가 느려지고, 구글 같은 검색 엔진도 별로 좋아하지 않거든요. 오늘은 PurifyCSS라는 도구로 군더더기 코드를 싹 정리해서, 사이트가 검색 결과에 더 잘 나오게 만드는 팁을 알려드릴게요.
PurifyCSS가 뭐길래 이렇게 유용할까요?
웹사이트 속도를 빠르게 하려면, 안 쓰는 CSS 코드를 지워주는 게 정말 중요해요. PurifyCSS는 내 사이트에서 실제로 쓰이는 스타일만 쏙쏙 골라내고 나머지는 버려주는 아주 똑똑한 친구랍니다.
CSS 코드 최적화 작업을 하려면 보통 유료 서비스를 써야 할 때도 있는데, 이 도구를 쓰면 돈 들이지 않고 직접 할 수 있어서 좋아요. 하지만 시작하기 전에 한 가지 약속해요. 혹시 모를 상황을 대비해서 데이터 백업은 꼭 해두는 게 좋습니다. 티스토리 블로그 쓰시는 분들은 관리자 메뉴의 데이터 관리 항목에서 금방 백업할 수 있어요.
안전하게 하려면 HTML이랑 CSS 코드를 따로 저장해두고, 복사본 파일로 연습해보는 게 마음 편하실 거예요. 이게 바로 검색 엔진이랑 친해지는 첫걸음이랍니다.
PurifyCSS로 코드를 가볍게 만들면 페이지가 훨씬 빨리 떠서, 검색 엔진 점수도 덩달아 좋아질 수 있어요.
정리하기 전과 후, 얼마나 달라질까요?
| 구분 | 정리 전 (군더더기 포함) | 정리 후 (PurifyCSS 적용) | 좋아지는 점 |
|---|---|---|---|
| 파일 크기 | 무거움 (안 쓰는 것도 다 있음) | 가벼움 (쓰는 것만 남음) | 로딩이 빨라짐 |
| 페이지 속도 | 답답하고 느림 | 시원하게 뜸 | 검색 엔진이 좋아함 |
| 검색 순위 | 뒤로 밀릴 수도 있음 | 앞으로 올 확률 높음 | 모바일 점수 상승 |
PurifyCSS 설치하고 가벼운 CSS 파일 만드는 순서
1. 준비물 챙기기: PowerShell이랑 Node.js
이 작업을 하려면 윈도우에 있는 PowerShell이 필요해요. 만약 없다면 마이크로소프트 스토어에서 Windows PowerShell을 검색해서 설치하면 됩니다. 그리고 PurifyCSS가 NPM 명령어를 쓰기 때문에, Node.js가 없다면 이것도 미리 설치해 주세요.
2. HTML 소스 모으기
제대로 정리하려면 우리 블로그가 어떤 모양을 쓰고 있는지 도구한테 알려줘야 해요. 그래서 글쓰기 에디터에서 표나 인용구 같은 기능을 다 써서 샘플 글을 하나 써보는 게 좋아요. 그런 다음 메인 화면, 글 목록 화면, 그리고 방금 쓴 샘플 글 화면의 HTML 코드를 복사해서 하나의 파일로 뭉쳐주세요.
각 페이지에서 마우스 오른쪽 버튼 누르고 ‘페이지 소스 보기’를 한 다음 전체를 복사하면 돼요. 그리고 지금 쓰고 있는 CSS 코드도 ‘CSS.CSS’ 같은 이름으로 따로 저장해서 준비해두면 됩니다.
3. 명령어 입력하고 깔끔한 파일 만들기
이제 PowerShell을 켜고 purifycss를 설치해볼게요. 아래 명령어들을 차례대로 입력해서 불필요한 코드를 날려버리고 가벼운 파일을 만들어보세요.
npm install --save-dev purify-css (설치 명령어)
purifycss --version (잘 깔렸나 확인)
위 명령어로 설치가 잘 됐는지 확인했다면, 아래처럼 입력해서 정리를 시작합니다.
purifycss e:/css.css index.html -o e:/cs1.css -i -r
이렇게 해서 새로 만들어진 CSS 내용을 복사해서 스킨 편집 창의 CSS 란에 붙여넣으면 끝이에요. 이렇게 하면 사이트가 훨씬 가벼워진 걸 느낄 수 있을 거예요. 최적화된 CSS를 적용하고 나서는 꼭 화면이 제대로 나오는지 이곳저곳 눌러보는 거 잊지 마세요.
자주 묻는 질문들
Q1. 이렇게 코드를 줄이면 검색 순위에 진짜 도움이 되나요?
A. 그럼요. 파일이 가벼워지면 사이트가 빨리 뜨잖아요. 구글 같은 검색 엔진은 방문자가 기다리지 않고 바로 볼 수 있는 사이트를 좋아해요. 방문자들도 답답하지 않으니까 더 오래 머무르게 되고, 이런 점들이 모여서 순위에 좋은 영향을 줍니다.
Q2. 정리하고 났더니 화면이 좀 깨져 보여요.
A. 가끔 프로그램이 자바스크립트로 나중에 만들어지는 모양들을 못 알아채서 지워버리는 경우가 있어요. 그래서 HTML 소스를 모을 때 최대한 꼼꼼히 모으는 게 중요해요. 만약 깨진다면 --rejected 옵션으로 뭐가 지워졌는지 보고 수동으로 살짝 넣어주면 해결됩니다.
Q3. PurifyCSS 말고 다른 도구도 있나요?
A. 네, UnCSS나 Critical CSS 같은 친구들도 있어요. 다들 목표는 같아요. 불필요한 살을 빼서 사이트를 빠르게 만드는 거죠. 특히 Critical CSS는 화면이 뜨는 체감 속도를 높이는 데 좋아요. 어떤 도구를 쓰든 속도를 빠르게 만드는 건 블로그 키우는 데 정말 중요한 작업인 것 같아요.
