[WP] Gzip 압축 vs Brotli 압축: 2개 압축 알고리즘 차이점

워드프레스 CMS를 비롯한 웹 사이트를 빠르게 만들기 위해, 서버에서 데이터를 압축하는 설정을 하는 것이 유용합니다. 이렇게 하면 웹 서버와 브라우저 간에 전송되는 데이터를 더욱 빠르게 로딩할 수 있으며, 웹 사이트의 속도를 더 빠르게 만들어 줍니다. 이는 웹사이트를 운영하는 관리자들이 많이 고려하는 요소 중 하나입니다. gzip 압축은 많이 사용되고 있으며, 많은 웹 서버에서 gzip에서 점차 Brotli 압축으로 변경되고 늘어나는 추세입니다.

1. 압축이란?

사이트 URL에 접속하면, 브라우저와 서버 간에 대화가 시작됩니다. 이때 브라우저는 서버에게 콘텐츠의 압축(Compression)을 해제할 수 있는지와, 어떤 압축 알고리즘을 사용하는지에 대한 정보를 전달합니다. 이는 서버가 압축 된 데이터를 전송할 때, 브라우저가 이를 올바르게 해제할 수 있도록 돕는 역할을 합니다. 따라서 압축 알고리즘을 지원하는 서버와 브라우저를 사용하면, 웹 사이트의 로딩 속도를 더욱 빠르게 할 수 있습니다.

데이터 압축

웹 브라우저는 서버에 접속하면 gzip 압축 or Brotli 압축과 같은 헤더를 보내게 됩니다. 둘 중 하나의 압축된 데이터가 브라우저에 출력되며 압축된 데이터는 압축되지 않은 데이터보다 빠르게 로딩됩니다.

Content-encoding: gzip
Content-encoding: br
압축되는 파일은 주로 텍스트입니다.
· HTML
· CSS
· JavaScript

2. Gzip 압축이란?

웹 호스팅 업체에서 많이 사용하는 일반적인 압축 알고리즘은 Gzip과 Brotli입니다. Gzip은 1992년에 베타 버전이 만들어 졌으며, 1993녀에 1.0 버전이 릴리스 되었습니다. 보통 Gzip이란 인터넷에서 데이터를 전송할 때 압축을 하기 위한 표준 압축 방법 중 하나입니다. 이 방법은 초기 압축 알고리즘인 DEFLATE 압축을 기반으로 하며, 이전에 개발된 Unix의 파일 압축 프로그램인 gzip에서 이름을 따온 것입니다.

Gzip 파일

DEFLATE 압축은 LZ77(Lempel-Ziv 1977) 알고리즘과 Huffman 코딩 방식을 결합한 압축 방식입니다. LZ77은 중복되는 데이터를 검색하여 일치하는 문자열을 찾고, 그 문자열을 코드로 대체함으로써 압축을 수행합니다. Huffman 코딩 방식은 각 문자의 등장 빈도를 이용하여 가장 짧은 비트 코드를 할당하는 방식으로 압축을 수행합니다.

Gzip은 DEFLATE 압축 방식을 이용하여 데이터를 압축하고, HTTP 요청 및 응답에서 ‘Accept-Encoding: gzip’ 헤더를 사용하여 클라이언트가 Gzip 압축을 지원하는 경우에만 압축을 수행하도록 합니다. 이를 통해 데이터 압축을 실행하여 웹 사이트의 로딩 속도를 향상시킬 수 있습니다.

3. 브로틀리 압축이란?

브로틀리 압축은 2013년 Google 직원 Jyrki Alakuijala와 Zoltán Szabadka가 개발했습니다.

Brotli 압축

Gzip은 원래 파일을 압축하기 위한 것이었지만, 웹에서도 사용할 수 있도록 변경되었습니다. 반면, 브로틀리 압축은 웹에서 사용할 목적으로 개발되었습니다. 따라서, Brotli를 사용하면 웹 서버가 콘텐츠를 브라우저로 전송하기 전에 압축할 수 있습니다. 브라우저로 스트리밍 되기 전에 압축되기 때문에 더 나으며 발전된 방식입니다.

Brotli 압축은 다음과 같은 GZIP 압축과 동일한 LZ77과 Huffman 코딩 방식 두 가지의 핵심 기본 기술을 사용합니다.

4. Gzip 압축 Vs Brotli 압축

Gzip과 Brotli 모두 DEFLATE 방식을 사용하여 데이터를 압축(& 압축 해제)합니다.

Gzip 압축 vs 브로틀리 압축 비교하기
  • Gzip이 Brotli보다 압축 속도가 더 빠릅니다.
  • Brotli는 웹 전용으로 설계되었습니다.
  • Brotli는 모든 압축 수준에서 더 나은 압축률(즉, 더 작은 압축 파일 생성)을 제공합니다.
  • Brotli는 Gzip보다 3가지 파일의 압축률이 각각 HTML 21%, CSS 17%, JavaScript 14% 더 좋습니다.

Gzip보다 Brotli를 선호하는 웹 서버가 점점 많아지고 있는 추세입니다. Brotli는 스트림을 즉시 압축하도록 설계되었기 때문에 Gzip에 비해 전체 프론트 엔드 압축 해제 속도가 최대 64% 더 빠른 것으로 알려져 있습니다.


HTML, CSS, JavaScript와 같은 파일 압축으로 웹 사이트 최적화 과정에 대해 알아 봤습니다. 웹 사이트의 속도 개선을 위해 파일 압축과 이미지 최적화는 필수 요소 중 하나라고 할 수 있습니다.

Similar Posts

  • [WP] 이미지 최적화 플러그인 BEST5 비교

    워드프레스 이미지 최적화 플러그인(Image Optimizer Plugin)은 웹사이트의 이미지 크기를 줄여 최적화를 진행합니다. 워드프레스로 구축한 사이트는 테마의 기능과 플러그인을 사용하면서 사이트의 로딩 속도가 늘어납니다. 웹사이트의 속도에 영향을 주는 또 다른 요인은 이미지 파일입니다. JPEG와 PNG 이미지 파일은 웹사이트 로딩 속도가 느려지는 주범이며, 특히 두 파일을 WebP 형식으로 변환 및 적절한 크기로 이미지 최적화가 필요하게…

  • WordPress: 개념과 기능 | 왜 워드프레스를 사용하는가?

    WordPress는 무료 오픈 소스 콘텐츠 관리 시스템(CMS)입니다. 원래는 블로그 게재 목적으로 개발되었지만, 시간이 지나면서 인터넷 포럼, 웹사이트, 다양한 콘텐츠 유형을 지원하는 플랫폼으로 발전했습니다. 테마와 플러그인 시스템을 기반으로 하며, 미디어 갤러리, 회원제 사이트, 학습 관리 시스템(LMS), 우커머스를 활용한 쇼핑몰 등 거의 모든 형태의; 웹사이트 구축이 가능합니다. 콘텐츠 관리 시스템(CMS)을 사용하는 이유는 비 개발자도 손쉽게…

  • [WP] 테마 or 플러그인 설치 중 발생하는 워드프레스 FTP 오류 해결 방법

    설치형 워드프레스 기반 웹 사이트를 운영하면서 테마 또는 플러그인을 설치하는 중 워드프레스 FTP 오류 메시지로 설치에 시간 소요가 되는 경우가 있습니다. 두 가지 해결 방법이 있으며 한 가지를 선택해서 설정할 수 있습니다. ※ FTP 오류 메시지 내용 에러: 서버에 연결하는 중에 에러가 생겼습니다. 설정이 올바른지 확인하십시요. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip…

  • 워드프레스 대시콘: dashicons.min.css 3.8 공식 아이콘 글꼴 | 2020년 SVG 아이콘으로 교체

    워드프레스 대시콘은 워드프레스 3.8 버전(2013년) 에서 도입된 공식 아이콘 글꼴입니다. 관리자 화면 전반에서 메뉴와 버튼 등에 아이콘을 표시하기 위해 사용되었지만, 폰트 기반 아이콘의 한계와 해상도 문제로 인해 2020년경부터 SVG 아이콘 체계로 전환되었습니다. 현재 대부분의 최신 테마와 플러그인은 SVG 아이콘이나 커스텀 아이콘 세트를 사용하는 추세입니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs…

  • [WP] 워드프레스 단점과 장점

    W3태그 통계에 따르면 전 세계 CMS 점유율 중에 워드프레스의 점유율 43%를 확인할 수 있습니다. 워드프레스는 장점만 있고 워드프레스 단점에 대해 생각할 필요가 없는 것일까요? 워드프레스 장점과 단점에 대해 생각해 보겠습니다. 목차1. 압축이란?2. Gzip 압축이란?3. 브로틀리 압축이란?4. Gzip 압축 Vs Brotli 압축 1. 대표적인 워드프레스 장점 워드프레스 장점 및 단점은 어디까지나 개인적인 생각입니다. 1.1…

  • Perfmatters 플러그인 리뷰 & 가이드: 3년 동안 사용한 워드프레스 성능 최적화 설정 방법

    Perfmatters 플러그인은 워드프레스 최적화 플러그인 중에서도 가볍고 강력한 퍼포먼스를 제공하는 도구입니다. 불필요한 스크립트와 리소스를 손쉽게 제어해 페이지 로딩 속도를 개선하고, 서버 부하를 최소화할 수 있습니다. 3년 이상 사용하면서 느낀 점은, 단순한 속도 향상을 넘어 사이트 전체의 안정성과 관리 편의성을 높여준다는 점이었습니다. 현재 이 웹사이트는 WP Rocket Cache 플러그인과 Perfmatters를 함께 사용하고 있습니다. 이…