Inspired World

Express.js에 Gzip 적용하기 본문

Node.js

Express.js에 Gzip 적용하기

InspiredJW 2014. 4. 18. 16:20

앗, 이런 실수를!

몇 일전, 제가 운영하는 어그로 끄는 이야기 사이트 로딩 속도가 좀 느린것 같아서



최적화를 해보고자 Google Pagespeed를 돌려보고 제가 큰 실수를 하나 했다는 것을 깨달았습니다.


제가 잊어버리고 Gzip을 사용하도록 서버에서 설정을 안해줬습니다.


Gzip을 사용하면 70% 넘게 전송하는 패킷 크기를 줄일 수 있다고 분석 결과가 나왔습니다.


Gzip

Gzip을 혹시 처음 들어보시나요?



Gzip을 사용할 수 있는 브라우저가 서버에 요청을 보냈을 때, 서버는 브라우저에 데이터를 압축해서 보내줄 수 있고 브라우저는 압축된 데이터를 풀어서 원본 데이터를 받게 됩니다.


서버가 Gzip 압축에 대해 지원하지 않고 그냥 무시한다면, 압축되지 않은 원래 사이즈의 데이터가 전송되기 때문에 Gzip을 사용하는 것보다는 상대적으로 오래걸리고 비효율적으로 큰 데이터를 주고 받는 것이 됩니다.


Express 2.x 버전에서는 저는 Gzippo 라는 모듈을 사용해서 Gzip을 사용했었는데 최근 버전의 Node.js와 Express에서는 호환이 되지 않습니다.

Express 3.x 버전부터는 자체 내장된 express.compress()를 사용해서 쉽게 Gzip을 적용할 수 있습니다.


Gzip 적용하기

Express App을 실행하는 app.jsindex.js와 같은 메인 파일을 보면 여러 app.use를 사용하는 라인들이 보입니다.

app.use(express.json());
app.use(express.urlencoded());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());


express.compress()를 가장 윗줄에 추가해주면 서버에서 Gzip 압축을 사용할 수 있습니다.

app.use(express.compress());
app.use(express.json());
app.use(express.urlencoded());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());


Gzip 적용 확인해보기

Gzip 압축을 서버에 적용한 후, Gzip이 잘 적용되었는지 확인을 해보는 게 좋습니다.


GzipTest에 가서 운영하고 있는 사이트의 주소를 입력해보세요.



이런 그림이 뜬다면, 성공적으로 Gzip 압축 적용을 하신겁니다 ^-^


Comments