Gzip과 Brotli

Caesars·2022년 4월 25일

http

목록 보기

2/2

스크립트 로딩시 Brotli를 사용하면 어떻겠냐는 조언을 받아 적용해보았습니다. 스스로 찾아냈다면 더 좋았을텐데 그래도 늦게나마 적용할 수 있어 다행입니다.

HTTP 압축이란

전송 속도와 대역폭 이용을 개선하기 위한 기술입니다. 서버와 브라우저간에 압축된 파일을 전송함으로써 브라우저 로딩을 빠르게 도와줍니다. (압축을 푸는 것이 네트워크 요청보다 더 빠르므로)
서버는 브라우저에게 보낼 Response를 압축 하기 때문에 네트워크 비용도 줄일 수 있습니다.

동작원리

브라우저는 요청 헤더에 지원 가능한 accept-encoding 값을 넣어서 request를 보냅니다. 위 이미지의 accept-encoding 값을 보면 브라우저가 gzip, deflate, br 인코딩이 가능하다고 서버에게 알리고 있는 것을 확인할 수 있습니다. 알고리즘이 나열된 순서가 우선순위의 순서입니다.

서버는 요청을 받고 응답 헤더에 Content-Encoding 값을 담아서 응답을 보내주게 됩니다. 브라우저는 헤더에 포함된 값으로 압축 타입을 알 수 있습니다.

Gzip

이러한 압축 알고리즘으로 가장 널리 알려져 있는 것이 gzip입니다. 최대 70%까지 사이즈를 줄여주는 가장 보편적인 압축 알고리즘 입니다. 파일의 중복코드나 띄어쓰기의 양을 줄여서 동작한다고 하는군요.

Brotli

Brotli는 구글이 2013년에 공개한 압축 알고리즘으로 gzip에 비해 최대 15-20% 더 적은 용량으로 압축이 가능하다고 합니다. 압축 알고리즘까지 이해할 수는 없을 테니 그렇구나 하고 넘어갔습니다. Brotli는 ie에서 지원하지 않으므로 ie에서는 gzip을 사용해야 합니다.

Cloudfront 적용

AWS CloudFront에서 기능을 지원하고 있기에 사용하실 수 있습니다.

브라우저가 두 형식을 모두 지원하는 경우, CloudFront는 Brotli를 사용합니다.

연결할 S3 도메인을 선택한 후에 Brotli 압축이 활성화된 캐싱 정책을 선택했습니다.

적용이 되지 않아서 찾아보니 정책의 우선 순위가 밀려 있었네요. 혹시 적용이 되지 않으신다면 동작 탭에서 확인해보시기 바랍니다.

압축률 비교

Gzip

Brotli

자사 js 파일을 가지고 비교해 보았습니다. 미세하지만 Brotli가 더 압축률이 높았습니다. 파일마다 압축률이 다르긴 하지만 이 외에 다른 js나 cs 파일 모두 Brotli가 압축률이 높았습니다. 드라마틱한 변화가 있는건 아니지만 분명 비용개선에 도움이 될 것입니다. 다음달 비용을 확인해보면 얼마나 줄어들었는지 알 수 있겠네요.

지원 리소스

모든 파일에 적용되는건 아니고 html, xml, js, css, json 파일 등을 압축시킬 수 있습니다 (추가로 확인중). jpg나 png 파일도 용량 줄일 수 있겠다고 좋아했는데 알고보니 jpg나 png는 이미 압축된 파일이라 지원이 안되더군요. 이렇게 또 알아갑니다..