Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[minify] js, css 압축 – 웹사이트 속도 증가, 트래픽 절약

cufon을 사용하는데, 나눔고딕 js는 1.3MB다. 금세 트래픽이 닳아 버렸다.

그래선 안 되겠다 싶어서 압축 방법을 찾았다. 예전에 도아님이 rss를 압축해서 내보냈다는 것을 본 적이 있기 때문이다.

그러다 찾은 게 바로 minify 라이브러리다. Minify로 CSS/자바스크립트 전송량 줄이기라는 글을 참고해서 했다.

일단 이놈은 js와 css의 불필요한 공백을 제거해 준다. 그리고 gzip으로 압축해서 보낸다. 두 개를 한꺼번에 처리해 주는 좋은 녀석인 것이다.

단, 알아야 할 점은 PHP 최소 사양이다. PHP 5.1.6. 이다. PHP 버전때문에 좌절스런 분들은 약간의 편법을 이용해도 될 거다.

압축 풀면 있는 놈들 중 /min 폴더에 있는 놈들이 실제 사용하는 놈이라는 점, 그리고 config.php 의 $min_cachePath 와 $min_documentRoot 를 채워 넣어야 한다는 점을 일단 알아야 한다.

그 다음, 사용법은

http://example.com/min/index.php?f=myStyleFile.css,mySecondStyleFile.css

형식이다.

물론, .htaccess 파일을 수정해서 사용하면 마크업에 들어가 있는 css 파일 주소는 수정하지 않아도 minify를 거친 놈들이 출력되게 할 수 있다.

아래 줄을 추가해 준다.

RewriteEngine On
RewriteRule ^(.*\.(css|js))$ /min/index.php?f=$1 [L]

루트에 있는 .htaccess 만 수정해 주면 하위 폴더까지 다 먹는다.(파일명 자체가 .htaccess 다. 유닉스에서는 .으로 시작하면 숨김파일/폴더다.)

RewriteEngine On 은 맨 위에 써 있는 경우도 있다. 그러면 또 써 줄 필요는 없다.

텍큐의 경우는 난 잘 모르니 위에 내가 참고한 블로그에 가서 보면 된다.

잘 작동하는지 테스트는 HTTP Compression Test에서 해 보면 된다. 압축된 놈은 초록색, 안 된 놈은 빨간색이 뜬다. 온라인 주소여야 가능한 건 당연하다.

워드프레스 사용자들은 Better WordPress Minify 라는 플러그인을 설치하면 된다. 사용법은 자세히 말하지 않겠다.

PHP 자체를 압축하는 방법도 있다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (6개)

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다