웹 성능 최적화- (캐시, css)

Mayton·2022년 12월 28일
1

ComputerScience

목록 보기
4/7
post-thumbnail

⭐️ 캐시 최적화

👉🏻 캐시의 종류

웹 개발시 사용하는 캐시는 클라이언트 측에서 활용하는 캐시와 서버측에서 활용하는 캐시 두가지로 나눌 수 있다. 이 때 클라이언트 캐시는 브라우저 캐시로, 브라우저 캐시는 크게 메모리캐시와 디스크캐시로 나눌 수 있다. 서버측 캐시로는 위의 그림과 같이 CDN에서 사용하는 캐시도 있을 수 있다.

✔️ 메모리캐시와 디스크 캐시


위 개발자 탭 size를 확인해보면 캐시되어있는 파일들이 메모리캐시 혹은 디스크 캐시로 캐싱되어 있는 것을 확인할 수 있다.

디스크캐시는 RAM에 저장되는 캐시를 디스크 캐시라고 한다.
일반적으로 캐시는 HDD(하드 디스크)에 저장이된다. 하지만 HDD에 접근해서 캐시를 가져오기에는 너무 오랜시간이 걸린다. 그래서 디스크 캐시, 즉 RAM에 저장해서 훨씬 빠르게 접근해 가져올 수 있으며 이를 디스크 캐시라고 한다. 디스크 캐시에는 20MB 정도의 용량을 저장할 수 있다.

메모리 캐시는 캐시 메모리에 저장되는 캐시를 말한다. RAM에 접근하는 것조차 CPU 입장에는 오래걸린다. 그래서 CPU와 매우 가까이에 위치해 있는 캐시 메모리에 저장해 더 빠르게 접근해서 가져 올 수 있다.


위 그림을 통해 디스크캐시와 메모리 캐시는 성능측면에서 다르다고 할 수 있음을 확인할 수 있다.

👉🏻 Options

  • Cache-Control: max-age
    max-age 는 캐시 유효 기간을 지정합니다. ex) Cache-Control: max-age=2592000

  • Cache-Control: public
    public으로 설정된 응답은 모든 캐시 서버에 캐시 가능하고 모든 사용자에게 응답이 전달 될 수 있습니다.

  • Cache-Control: private
    해당 응답은 요청한 사용자만 캐시할 수 있고 CDN과 같은 범용 캐시 서버는 캐시할 수 없습니다. 말 그대로 private이므로 캐시 콘텐츠는 특정 사용자만을 위한 것이며 공유되면 안됩니다.

  • Cache-Control: no-cache
    요청과 응답헤더에 들어갈 수 있습니다.
    요청 헤더에 있는 경우 캐시된 응답을 받지 않게 됩니다. 요청 헤더에 이 헤더가 포함되어 있으면 캐시 서버들은 이 요청을 원본 서버에 요청해 최신의 데이터를 제공해야 합니다.
    응답 헤더에 있는 경우에는 캐시 서버가 캐시를 하지 않는 것은 아닙니다. 다만 캐시 서버는 요청이 있을 때마다 원본 서버에 조건부 요청을 보내서 응답 데이터가 변경되지 않았는지 확인하는 과정을 거쳐야 합니다.

  • Cache-Control: no-store
    이 것도 요청, 응답 헤더에 모두 들어갈 수 있고 쓰임새도 동일합니다. 다만 no-cache는 응답을 항상 최신 상태로 유지하는 것은 맞지만 서버가 로컬 저장소에 메시지를 저장하는 것을 막지는 않습니다. no-store의 경우에는 서버가 로컬 저장소에 캐시 데이터를 저장하는 것도 막습니다.

  • Etag : Etag는 웹서버가 리소스를 식별하기 위해 부여하는 고유한 코드입니다. Etag를 이용해 서버의 리소스가 시간이 지나 만료되었는지, 캐시된 리소스를 새로 갱신해야 되는지 여부를 판단할 수 있습니다.

👉🏻 적절한 캐시 수명 정하기

토스의 게시물을 보면 토스에서는 CDN에는 캐시 되어있지만 항상 새로운 배포가 있는지 확인하기 위해 max-age=0, s-maxage=31546000을 사용하고 있다. 캐시 설정을 섬세히 제어함으로써 사용자는 더 빠르게 HTTP 리소스를 로드할 수 있고, 개발자는 트래픽 비용을 절감할 수 있어 여러 서비스에서도 적절한 캐시 설정을 위해 노력하고 있다.

✔️ 리소스별 캐시 설정

HTML: no-cache
JS: public, max-age=31536000
CSS: public, max-age=31536000
IMG:public, max-age=31536000

가장 간단하고 대표적인 캐시 설정은 위와 같다. 왜냐하면 HTML은 새로운 배포가 있는지 지속적으로 확인해 주어야 하지만, js, css, img 파일들은 버전번호가 url 앞에 같이 붙기 때문에 새로운 버전으로 변경되었는지 지속적으로 확인해줄 필요없이 새로운 파일이 곧 새로운 버전이기 때문이다.

설정을 한다면 아래와 같은 코드로 설정을 할 수 있다.

⭐️ CSS 최적화


html, css, js 돔을 파싱하는 중 css가 파싱하기 시작하면 html 파싱은 중지된다. (js는 이 경우를 막기 위해 defer를 사용하고 있다.) 위 과정을 보면 css가 있어야 돔 트리와 css dom이 합쳐져서 브라우저 렌더링이 가능하기 때문에 css의 파싱 속도가 브라우저 렌더링 속도에 영향을 미치게 되고, 우리는 css 파싱 속도를 조금이라도 빠르게 하기 위해 불필요한 css 크기를 줄이는 방법을 선택할 수 있다.

위 화면은 크롬 개발자도구에 coverage 탭으로 웹페이지를 분석한 화면이다. 이때 보면 css의 87%가 미사용 중인 것을 확인할 수 있다. 우리는 이 미사용하는 부분을 없애기 위해 purge css를 이용할 수 있다.

👉🏻 purge css

React에서 purge css 사용하기

purge를 설치한 뒤 purge 명령어를 package.json에 추가해 준 뒤

공식문서에서와 같이 webpack 설정을 변경해 준다. 이때, CRA는 webpack 설정을 하기 위해 추가 라이브러리를 설치해야 변경할 수 있다.

⭐️ 참조

profile
개발 취준생

0개의 댓글