성능 최적화 시작하기

로딩 성능 최적화

서버에서 받아오는 리소스의 크기를 줄여 로딩 속도를 빠르게 하는 것이다.

이미지 사이즈 최적화
Code Splitting
텍스트 압축: 작은 사이즈로 리소스를 다운 받아 로딩 속도를 빠르게 하는 것이다.

렌더링 성능 최적화

불러온 리소스를 화면에 빠르게 렌더링하는 것이다.

Bottleneck 코드 최적화

분석 툴

크롬 Network 탭
크롬 Performance 탭
크롬 Light house
webpack-bundle-analyzer

CDN(Contents Delivery Network)

물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술

Image CDN

이미지 CDN은 이미지 최적화에 탁월하다. 이미지 CDN으로 전환하면 이미지 파일 크기를 40 ~ 80% 줄일 수 있다.

이미지 CDN은 이미지 변환, 최적화 및 전달을 전문으로 한다. 사이트에서 사용되는 이미지에 액세스하고 조작하기 위한 API로 간주할 수도 있다. 이미지 CDN에서 로드된 이미지의 경우 이미지 URL은 로드할 이미지뿐만 아니라 크기, 형식 및 품질과 같은 매개변수도 나타낸다. 이를 통해 다양한 사용 사례에 대한 이미지 변형을 쉽게 만들 수 있습니다.

이미지 CDN은 필요에 따라 새 버전의 이미지를 생성한다는 점에서 빌드 시 이미지 최적화 스크립트와 다르다.

자체 관리 이미지 CDN 자체 관리형 CDN은 자신의 인프라를 편안하게 유지 관리할 수 있는 엔지니어링 직원이 있는 사이트에 적합하다.

타사 이미지 CDN 타사 이미지 CDN은 이미지 CDN을 서비스로 제공한다. 클라우드 공급자가 서버 및 기타 인프라를 유료로 제공하는 것처럼 이미지 CDN은 이미지 최적화 및 전송을 유료로 제공한다.

https://cdn.image.com?src=[src]&width=[width]&height=[height]의 형태처럼 이미지를 cdn에 요청하면, cdn에서 이미지를 리사이징하여 응답한다.

unsplash의 경우에도 cdn 기능을 제공한다.

bottleneck 코드 최적화

크롬의 Performance 탭을 통해 분석할 수 있다.

위 사진에서 보면 Article컴포넌트에서 remove..이라는 함수가 굉장히 시간을 많이 잡아먹고 있는 것을 볼 수 있다. 즉, 병목 현상이다. 병목 현상이란 물병의 목처럼 길목이 작아서 시간을 지체하는 현상을 의미한다. 원인을 찾았으니 이제 해결하면 된다. 이처럼 병목 현상은 Performance 탭을 통해 원인을 찾고 이를 개선하면 된다.

Code Splitting

불필요한 코드 혹은 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 하는 것

webpack-bundle-analyzer를 통해 번들링 파일을 많이 차지하는 모듈 분석
페이지별(라우트)로 번들링 파일을 분리(React.lazy, Suspense 사용)
각 페이지의 모듈을 분리하여 번들링 파일을 분리

텍스트 압축하기

html, css, js 파일을 압축하는 것이다.

네트워크 탭을 통해 번들 파일의 응답 헤더를 살펴보면 Content-Encoding이 gzip으로 되어있다. 이는 gzip 압축을 사용했다는 것을 의미한다. 만약 이 헤더가 없다면, gzip 압축을 사용하지 않았다는 것이다.

웹 상에서는 보통 GZIP, Deflate를 사용한다. 서버 코드에 텍스트 압축을 적용하면 된다.

하지만 무분별하게 gzip 압축을 하게 되면 클라이언트가 압축을 해제하는 시간이 걸리기에 오히려 성능이 떨어질 수 있다. 따라서 파일의 크기가 2kb 이상인 경우에만 gzip 압축을 적용하는 것이 좋다.