[Web] Gzip 압축으로 사이트를 최적화해보자

📄 참고자료

원본 게시글 How To Optimize Your Site With GZIP Compression

번역 게시글 [WEB, 번역] Gzip 압축으로 사이트 최적화하는 방법

---

압축은 사이트의 속도를 높일 수 있는 단순한 효과적인 방법이다.

 

📌 콘텐츠 인코딩

만약, `http://www.yahoo.com/index.html`  을 요청할 때, 브라우저와 웹서버는 다음과 같은 대화를 나눈다.

 

Browser: Hey, GET me /index.html
Server: Ok, let me see if index.html is lying around…
Server: Found it! Here’s your response code (200 OK) and I’m sending the file.
Browser: 100KB? Ouch… waiting, waiting… ok, it’s loaded.

---

🤔 뭐가 문제인가?

통신에 성공했고 파일을 받았지만, 그다지 효율적이지 않다.

100KB는 양이 많은 편이다.

 

파일이 너무 큰 경우, 어떻게 해야할까?

👉 압축

 

만약에, 우리가 `index.html` 파일 대신, `.zip` 파일을 브라우저에게 보낼 수 있다면,

다운로드 시간을 절약할 수 있지 않을까? 

브라우저는 단순히 압축된 파일을 다운로드 받아 압축을 푼 다음, 페이지를 빠르게 로드할 수 있다면 말이다.

---

😄 행복회로

Browser: Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.
Server: Let me find the file… yep, it’s here. And you’ll take a compressed version? Awesome.
Server: Ok, I’ve found index.html (200 OK), am zipping it and sending it over.
Browser: Great! It’s only 10KB. I’ll unzip it and show the user.

더 작은파일은 더 빠른 다운로드를 가져오고, 빠른 다운로드는 사용자를 행복하게 한다.

 

101kb 에서 15kb 로 줄어든 index.html

그래서 어떻게?

이 통신이 이루어지려면 브라우저와 서버가 모두 압축된 파일을 전송해도 좋다는 것을 알고 있어야 한다.

 

브라우저

압축된 콘텐츠를 허용한다는 내용을 서버에게 알려야 한다.

다음과 같은 내용을 헤더에 담아 보내준다.

Accept-Encoding: gzip, deflate // gzip, deflate 두 개의 압축 방식

서버

콘텐츠가 실제로 압축된 경우 응답을 보낸다.

Content-Encoding : gzip

더 자세한 서버셋팅은 https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/ 의 Setting up the server section 을 확인하시면 됩니다.

 

압축파일을 성공해서 받았다면