PurifyCSS를 이용해서 CSS 코드 최적화 및 불필요한 코드 삭제 방법

CSS 코드 최적화 방법

검색 최적화를 위해서 CSS 코드 최적화 후 불필요한 CSS 코드를 삭제하는 작업입니다. PurifyCSS는 사용하지 않는 CSS를 제거해주는 도구입니다. 주로 웹 개발에서 사용됩니다. PurifyCSS 코드 최적화 방법은 프로젝트에서 사용되는 CSS 규칙을 분석하여 실제로 사용되는 스타일만 남기고 나머지는 삭제합니다.

CSS 코드 최적화는 유료 사이트에서 진행할 수 있지만, 비용을 지불하지 않고도 직접 작업할 수 있습니다. 이 작업을 진행하기 전에 몇 가지 주의해야 할 사항을 설명하겠습니다. 문제가 발생할 경우를 대비하여 사전 작업을 진행해 주셔야 합니다.

권장 사전 작업

전체 데이터를 백업할 것을 권해 드립니다.티스토리 블로그를 기준으로 설명하겠습니다. 관리자 메뉴에서 [ 블로그 메뉴] [ [ 데이터 관리 ] 항목에서 간단하게 전체 백업을 진행 할수 있습니다.

HTML 및 CSS 코드를 별도로 백업 하시고 복사본 파일로 작업을 진행하는 것이 좋습니다.

PurifyCSS를이용해서CSS코드최적화

사전 준비 작업

PowerShell 설치

본인의 컴퓨터 Windows PowerShell이 설치되 있어야 합니다. 이미 설치된 시스템도 있을 것이고 만약 없다면 설치 하시면 됩니다.

Microsoft Store 메뉴에서 Windows PowerShell 검색 후 설치 하시면 됩니다.

Windows PowerShell 설치

티스토리 에디터에서 샘플 글 작성

블로그 글 작성 페이에서 자신이 많이 사용하시는 에디터의 모든 기능을 다 사용해서 문서를 작성하세요. 샘플 문서 작성이 완료되면 저장하시면 됩니다. 이작업은 글 작성에 사용되는 CSS를 추출하기 위한 작업입니다.

이 작업을 진행하지 않으면 에디터의 필요한 CSS가 누락 될수 있습니다.

티스토리 에디터에서 샘플 글 작성

CSS 삭제 작업

샘플 글을 작성한 후, HTML 파일과 CSS 파일 두 개를 가지고 HTML에서 사용되는 CSS 내용만 추출하여 새로운 CSS 파일을 생성합니다.

간단히 설명드리면 HTML 파일과 CSS파일 2개를 가지고 HTML에서 사용되는 CSS파일의 내용만 추출해 내서 새로운 CSS파일을 생성해 줍니다.

HTML 파일을 생성하기 위해 티스토리 블로그는 세 가지 HTML을 추출하여 사용하는 것을 권장합니다: 메인 화면, 목록 화면, 작성한 글 화면. 총 3가지 화면의 HTML 코드를 복사하여 1개의 HTML 파일로 만들어 주시면 됩니다.

그리고 수정해야 할 CSS 코드를 블로그 관리자 페이지에서 복사하여 적당한 이름의 파일로 저장합니다..

✔ 예시

CSS.CSS

기존 CSS 코드 파일 저장

티스토리의 CSS 코드를 복사해서 파일로 저장합니다.

티스토리의 CSS 코드를 복사

HTML 소스 추출

작성글.메인.목록 페이지에서 마우스 오른쪽을 누르고 페이지 소스 보기를 클릭합니다.

✔ 예시

HTML 소스 추출

페이지 소스 보기 창이 열리고 전체 코드를 선택해서 복사하기 해서 메모장에 붙여 넣고 CSS.CSS 라고 저장 하시면됩니다. 파일이름은 편한대로 작성하시면됩니다. 저장위치는 가능하면 명령어를 입력하기 쉬운 경로에 저장하세요. 메인.목록.작성글의 HTML 소스를 다 복사해서 1개의 파일로 제작합니다.

HTML 소스 추출하기

purifycss 설치

POWER SHELL를 실행하시고 purifycss를 설치하세요.

npm install --save-dev purify-css  설치 명령어
purifycss --version  설치 확인 명령어

NPM 명령어가 실행되지 않는 경우 Node.js 를 설치해 주시면 됩니다. 아래 사이트에서 다운 받아 설치하세요

Node.js — Run JavaScript Everywhere

최적화 CSS파일 생성

purifycss 명령어를 사용하여 불필요한 CSS를 제거하고 최적화된 CSS 파일을 생성합니다.

purifycss e:/css.css index.html -o e:/cs1.css -i -r

# purifycss: purifycss 도구를 실행합니다. 이는 지정된 파일들에서 사용되지 않는 CSS 규칙을 제거합니다.

# e:/css.css: 입력 CSS 파일 경로입니다. 이 파일에서 사용되지 않는 CSS 스타일을 찾아 제거합니다.

# index.html: HTML 파일 경로입니다. 이 파일을 분석하여 실제로 사용된 CSS 스타일을 찾습니다.
#             필요에 따라 다수의 HTML 파일이나 JavaScript 파일을 입력으로 지정할 수도 있습니다.

# -o e:/cs1.css: 최적화된 CSS 파일을 출력할 경로입니다. 
#                사용되지 않는 CSS 규칙이 제거된 결과를 e:/cs1.css 파일에 저장합니다.

# -i: 인라인 스타일을 무시합니다.
#     HTML 파일에 포함된 ;style 태그나 style 속성으로 정의된 인라인 CSS 스타일은 분석 대상에서 제외됩니다.

# -r: 경로를 상대적으로 처리합니다.
#     주어진 파일들의 경로를 기준으로 작업을 수행합니다.

형성된 CSS 파일을 스킨 편집에서 CSS 편집란에 복사해서 넣어 주시면 됩니다.