Brotli 압축방식(Compression)을 통한 웹 성능 최적화

 

 

이번에 web.dev 공부를 하면서 gzip보다 뛰어난 압축방식인 Brotli를 새롭게 알게 되어서 한번 소개를 해보려고 한다.

 

 

HTTP Compression

우선 HTTP 압축에 대해 다시 한번 알아보자.
HTTP 압축은 웹 서버에서 리소스들을 압축 알고리즘을 통해 사이즈를 줄임으로써, 브라우저로 전달할 때 더 작은 사이즈로 전달하기 위한 방식이다.

 

웹 서버로 리소스를 요청할 때 Request Header의 accept-encoding에 현재 브라우저에서 호환되는 압축 정보를 실어서 함께 요청하면, 웹서버에서 해당 압축 방식을 지원하는지 확인 후 지원이 되면 리소스를 압축하거나 미리 압축되어있던 리소스를 전달하게 된다.

 

💡 대부분 웹서버에서 이러한 압축 방식을 직접 구현할 수도 있지만, 이미 대부분의 호스팅 플랫폼이나 CDN, Proxy 서버에서 리소스를 압축하여 제공하는 기능이 있기 때문에 쉽게 구성할 수 있다.

 

Gzip

HTTP 압축 방식 중에, 주로 가장 많이 사용되는 방식은 Gzip 압축 방식이다.
Gzip을 압축하게되면 기본 리소스 사이즈보다 70~80% 리소스 사이즈를 줄일 수 있다.

Gzip 압축방식은 대부분 브라우저와 웹서버가 호환이 되기 때문에 가장 많이 사용되는 방식이다.

 

Chrome Tool에서 리소스 정보를 확인해보면, content-encoding이 gzip인 것을 통해, 해당 리소스들이 gzip으로 압축되어 전달받은 것으로 확인이 가능하다.

 

Brotli

Brotli 압축방식은 Gzip 압축방식보다 20~26% 압축률이 뛰어난 압축 방식으로 소개되고 있으나, 아직 모든 웹 서버나 모든 브라우저에서 지원되는 방식은 아니기 때문에 호환되는 환경에 대한 체크가 필요하다.

Introducing Brotli: a new compression algorithm for the internet

 

브라우저에서 Brotli 압축이 호환이 된다면, 리소스 요청 시, accept-encoding 시에 br로 정보를 실어서 요청을 하게 된다.

 

 

Brotli 압축방식을 적용해보기

그러면 지금부터 Brotli 압축을 통해 리소스 최적화를 시켜보자.
현재 qanda.ai에서는 AWS의 CloudFront를 통해 캐시 된 리소스를 전달하고 있으며, CloudFront 역시 자체적으로 리소스 압축 기능을 지원하고 있다.

 

 

현재 qanda.ai를 Chrome으로 접속을 하였을 때, accept-encoding에 gzip을 포함하여 br도 함께 정보로 요청되는 것을 확인할 수 있다.

 

그러나 아직 CloudFront 자체에서 Brotli 방식으로 압축하여 전송하는 설정을 하지 않았기 때문에 gzip으로 전달하고 있는 것을 확인할 수 있다.

이러한 gzip으로 압축된 리소스들을 br로 압축된 리소스로 받는 것으로 변경해볼 것이다.
여기서는 CDN으로 AWS의 CloudFront를 이용하고 있으므로, CloudFront를 통해 Brotli 압축방식을 적용하는 법을 소개한다.

 

AWS CloudFront에서 Brotli 압축 캐시 정책 설정하는 법

여기서는 테라폼을 이용하는 방식이 아닌, 아주 단순하게 웹 콘솔에서 수동으로 쉽게 설정하는 방법을 소개한다.

 

AWS CloudFront에서 정책으 설정하는 부분으로 들어가면, Default 정책들을 볼 수가 있다.
그중에서 CachingOptimized를 보면, CoudFront에서 압축 관련 캐시 정책이 있는데 한번 확인해보자.

 

정책을 확인해보면, 기본으로 Brotli 압축 정책이 설정되어 있는 것을 확인할 수 있다.

압축된 파일 제공 - Amazon CloudFront

 

 

그럼 이제 실제 CF의 Distribution에 해당 캐시 정책을 설정해본다.

위에서는 아직 별도의 캐시 정책이 설정되어 있지 않아 정책명이 비워져 있다.

 

 

Behavior 편집에서 캐시 정책을 origin request정책을 선택 후, CachingOptimized를 선택하여 적용하면, 해당 CF Distribution에 해당 캐시 정책이 설정이 된다.

 

 

정상적으로 캐시 정책이 설정된 것을 확인할 수 있다.
위에서는 경로 패턴을 기본 값으로 해놨지만, 각 CF를 통해 요청하는 URL 경로에 따라 캐시 정책을 별도로 설정할 수 있음을 참고하면 된다. (자세한 건 AWS CF Docs 확인)

 

Brotli 압축 정책 적용 전

 

Brotli 압축 정책 적용 후

 

gzip에서 Brotli로 압축을 변경하니, 약간이나마 전체적으로 리소스 사이즈가 작아진 것을 확인할 수 있다.

위에 qanda.ai에서는 기존에 리소스 사이즈가 작은 상태에서 gzip을 적용한 상태였다보니 Brotli로 변경해서는 엄청나게 큰 변화는 없어 보이지만, 기존에 큰 리소스라면 Brotli 압축 방식이 꽤 큰 효과로 다가올 것이다.

 

Brotli 압축 방식이 아직은 모든 브라우저가 지원되지 않는 상태라고 했는데, 무턱 해당 캐시정책을 사용해도 괜찮을까요?

 

Brotli 압축방식은 브라우저에서 리소스를 요청할 때 Header에 실어서 보낸 accept-incoding 값을 보고 해당 br 압축된 리소스를 전달한다. 만약 해당 브라우저가 Brotli를 지원하지 않는다면 Header에서 br을 포함하지 않을 테니 알아서 gzip으로 압축된 리소스를 내려주게 될 것이다. 따라서 문제가 없다.

 

지금 당장 Brotli 압축 방식을 적용해보자~!