[Node.js] 웹사이트를 더 빠르게! Express.js에 Gzip 적용하기

Node.js에서 가장 오래되고 유명하면서도 널리쓰이는 라이브러리는 웹 프레임워크인 Express.js입니다.

기본적인 라우팅, 정적 파일 서빙, 템플릿 등을 지원하며 본인 입맛에 맞는 ORM/ODM 등을 활용하여 나름 MVC 형태를 구축할 수 있습니다.

Express.js에 Gzip 적용하기

예전에 제가 개인프로젝트로 운영하던 사이트가 있었는데

사이트 런칭 후 느낀게 이상하게 사이트 로딩 속도가 좀 느리다는 게 느껴졌습니다.

보통 웹사이트가 느리게 열리는데에는 여러가지 이유가 있겠지만 나름 제가 아는 기본적인 최적화는 많이 되어 있었기 때문에

무엇이 빠져있나 살펴보기 위해서 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.js나 index.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 압축 적용을 하신겁니다 :)

Gzip 적용 가능한 브라우저

현재 아래 표를 보시면 초록색으로 되어있는 브라우저 및 버전은 지원 / 빨간색은 미지원 브라우저입니다.