[블로그 텍스트 압축] 웹 성능 최적화까지 해보자-5

텍스트 압축

production 환경과 development 환경

지금까지 이미지 사이즈 최적화, 병목 코드 최적화, 코드 분할 기법을 사용해서 서비스 성능을 향상해 보았다.

하지만, 지금 블로그 서비스가 실행되고 있는 환경은 production 환경이 아니라 development 환경이라는 점을 간과하면 안 된다.

 

cra의 경우 production 환경과 development 환경에 차이가 있다.

production 환경일 때는 webpack에서 경량화라든지 난독화 같은 추가적인 최적화 작업을 한다.

하지만 development에서는 이런 최적화 작업이 없이 서비스를 실행한다.

그래서 최종 서비스의 성능을 측정할 때는 실제 사용자에게 제공되는 production 환경으로 빌드된 서비스의 성능을 측정해야 한다.

 

production 환경에서는 npm run build를 통해 서비스 코드를 번들링하고 최종적으로 빌드된 파일을 서비스하면 된다.

이제부터는 production 환경에서 성능을 한 번 알아보자.

 

상세 페이지의 성능을 검사했는데 생각보다 점수가 많이 낮다.

왜냐하면 상세 페이지의 경우 앞 절에서 분할했던 큰 패키지가 번들 파일에 포함되어 있고 블로그 글 내용이 모두 들어있기도 해서 성능 점수가 목록 페이지에 비해 낮을 수 있다.

 

Opportunities 섹션에 있는 Enable text compression이라는 항목을 살펴보자.

해당 항목은 서버로부터 리소스를 받을 때 텍스트 압축을 해서 받으라는 의미이다.

이제부터 텍스트 압축에 대해서 알아보자.

 

텍스트 압축

웹 페이지를 로드할 때는 다양한 리소스를 다운로드하는데, 대표적으로 HTML, CSS, JS와 같은 텍스트 형태의 파일이 있다.

이런 리소스가 빠르게 다운로드될 수 있도록 코드 분할 같은 최적화 기법을 적용해서 리소스의 크기를 줄여보았다.

텍스트 압축 기법도 리소스의 크기를 줄이는 기법 중 하나이다.

 

텍스트 압축은 HTML, CSS, JS 같은 텍스트 기반 파일을 압축하는 것이다.

압축 후 더 작은 크기로 빠르게 전송한 뒤 사용하는 시점에 압축을 해제한다.

이렇게 하면 리소스 전송 시간도 단축된다.

 

압축 여부를 확인하려면 HTTP 헤더를 살펴보면 된다.

블로그 서비스에서는 API 데이터에 텍스트 압축이 적용되어 있다.

Network 패널 articles API 항목을 확인해보면 response header에 Content-Endoding: gzip이라고 되어 있는 것을 볼 수 있다.

해당 리소스가 gzip이라는 방식으로 압축되어 전송되었다는 의미이다.

 

하지만 main 번들 파일은 응답 헤더에 Content-Encoding이라는 항목이 없다.

그래서 텍스트 압축이 적용되지 않은 곳에 텍스트 압축을 적용해볼 것이다.

 

텍스트 압축 적용

텍스트 압축은 해당 리소스를 제공하는 서버에서 설정해야 한다.

serve 부분을 자세히 보면 u 옵션과 s 옵션이 붙은 것을 볼 수 있다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "serve": "npm run build && node ./node_modules/serve/bin/serve.js -u -s build",
    "server": "node ./node_modules/json-server/lib/cli/bin.js --watch ./server/database.json -c ./server/config.json"
  },

 

s 옵션은 SPA 서비스를 위해 매칭되지 않는 주소는 모두 index.html로 보내겠다는 옵션이고 u 옵션은 텍스트 압축을 하지 않겠다는 옵션이다.

따라서 텍스트 압축을 적용하려면 u 옵션만 제거하면 된다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "serve": "npm run build && node ./node_modules/serve/bin/serve.js -s build",
    "server": "node ./node_modules/json-server/lib/cli/bin.js --watch ./server/database.json -c ./server/config.json"
  },

 

Lighthouse로 검사해보자.

점수도 많이 올랐고, Opportunities 섹션에서 Enable text compression 항목이 사라졌다.