웹 페이지 최적화의 종류

 

최적화의 종류

로딩 성능

서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때 성능

다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 것에 중점, 코드를 분할하여 차등을 두어 다운로드하는 방법 등을 사용

 

렌더링 성능

리소스를 가지고 화면을 그릴 때의 성능

자바스크립트 코드에 크게 영향이 있고 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러움이 달라진다.

브라우저의 기본 동작 원리나 사용하는 프레임워크 라이프사이클 등의 이해가 필요

 

최적화 툴

Squoosh

웹에서 서비스 되는 이미지 압축 도구

간편하게 이미지 포맷이나 사이즈를 변경 가능 (Resize, Compress)

compress의 압축 포맷과 Quality 를 70~80 정도로 변경

 

PurgeCSS

사용하지 않는 CSS를 제거해주는 툴

webpack 같은 번들러에서 플러그인으로 추가하여 사용하거나 npm 으로 설치해줄 수 있다.

 

webpack-bundle-analyzer

webpack을 통해 번들링된 파일이 어떤 코드나 어떤 라이브러리를 담고 있는지 보여주는 툴

Vite 의 경우는 번들러가 Rollup 이므로,

https://www.npmjs.com/package/rollup-plugin-analyzer

이걸 사용해야할 것 같다.

 

해당 패키지는 웹팩을 직접 설정해줘야 하므로 CRA로 만들어서 웹팩을 직접 다루지 못한다면,

cra-bundle-analyzer

를 사용해준다. 번들 사이즈를 분석해줄 수 있는 패키지이다.