HTML, CSS, Javascript 압축하기

구글 검색 결과는 페이지 랭크에 따라 앞쪽에 등장하는데, 이 페이지 랭크에 페이지 로딩 속도가 관여한다는 소식을 접했습니다. 제 다른 사이트는 정적 사이트임에도 그다지 좋은 속도가 안 나오네요. 그래서 속도 늘리기 대책 겸 웹 리소스 압축에 대해 찾아본 결과를 정리해 봤습니다.

HTML 압축하기

HTML 압축하기는 HTMLMinifier를 사용할 수 있습니다. 아래 커맨드로 쉽게 설치할 수 있습니다.

npm i -g html-minifier

사용 방법은 옵션이 길어서 좀 귀찮을 수 있습니다.

html-minifier --collapse-whitespace \
              --remove-comments \
              --remove-redundant-attributes \
              --remove-tag-whitespace \
              --minify-css true \
              --minify-js true \
              -o output.html input.html

위 명령은 input.html 파일을 압축해서 output.html로 압축해주는 명령의 예제입니다. 자주 사용할 것 같다면 alias 같은 것으로 만들어둬도 될 것 같습니다.

실제로 시험해 본 결과

위의 스크린숏은 제 다른 사이트의 index를 위 커맨드로 압축해 본 것인데 그다지 효과가 좋지는 않네요. 아마도 원본에 들여쓰기가 거의 없어서 그다지 드라마틱한 결과가 안 나오는 것 같습니다.

물론 옵션에 따라 달라질 수도 있으니 매뉴얼을 잘 읽어봅시다.

CSS 압축하기

CSS 압축은 개인적으로 CSSO가 커맨드라인 도구를 제공해서 가장 쉽게 쓸 수 있었습니다.

아래 커맨드로 설치할 수 있습니다.

npm i -g csso-cli

사용 방법도 간단합니다.

csso input.css --output output.css

위 명령은 input.css 파일을 output.css 로 압축해 줍니다.

실제로 시험해 본 결과

css 압축은 제법 효과를 본 것 같습니다. HTML 파일에 비해 공통적으로 사용되기 때문에 조금만 줄여도 효과를 많이 볼 것 같습니다.

Javascript 압축하기

자바스크립트 압축은 UglifyJS를 사용해 봤습니다.

아래 커맨드로 설치할 수 있습니다.

npm i -g uglify-js

다행히도 이 도구도 사용 방법은 어렵지 않았습니다.

uglifyjs -c -m -o output.js input.js

위 명령은 input.js 파일을 output.js 파일로 압축하는 예제입니다.

자바스크립트 압축 테스트는 유명한 jquery 무압축본을 이용해 봤습니다. 엄청난 결과가 나오네요.

관련 링크

• HTMLMinifier - Seorenn Note
• CSSO - Seorenn Note
• UglifyJS - Seorenn Note