🙋🏻♂️로딩성능 최적화 vs 렌더링 성능 최적화
👉🏻 로딩성능 최적화
리소스들을 빠르게 로드할 것인가를 의미한다
ex. 이미지 사이즈 최적화, code spliting, 텍스트 압축하기
👉🏻 렌더링 성능 최적화
브라우저에 화면을 얼마나 빠르게 그릴 수 있는 것인가를 의미한다
ex. Bottleneck 코드 최적화
🙋🏻♂️ 이미지 사이즈 최적화
아래와 같이 chrome light house를 통해 성능을 확ㅇ니해보면 image size를 너무 크게 불러올 경우, size를 조절하라는 항목을 볼 수 있다.
👉🏻 CDN이란?
Content Delivery Network의 줄임말로 서버에서 다운을 받을 때 멀리 떨어진 거리로 인해, 시간과 비용이 많이 들기 때문에 일정 공간에 복제해 놓은 것을 말한다. 즉, CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화하는 것을 말한다. CDN은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달한다.
이미지 사이즈 최적화에서 CDN을 언급하는 이유는, 로컬에 저장된 이미지를 불러오는 경우도 있지만, 대부분 CDN을 통해 네트워크상에 있는 이미지를 다운 받는 경우가 제일 많이 있다. 이때 아래와 같이 이미지 크기를 적절하게 조절해주면 로딩 시에 시간을 효율적으로 사용할 수 있다.
🙋🏻♂️ Code Spliting
아래처럼 chrome performance 탭에서보면 js파일이 유독 다운로드하는 데 오래걸리는 것을 볼 수 있다. 이때 code Splitting 과 lazy load를 통해 사용 할 때 다시로드를 해, js 다운로드로 인해 렌더링이 늦어지는 것을 방지 할 수 있다.
공식 사이트 내 code splitting 예제에도 아래와 같이 route를 기준으로 code spliting을 하고 있는 것을 볼 수 있다. (공식 페이지)
아래와 같이 일반적인 import가 아니라 lazy(()=>import)를 해주면 ListPage와 View Page가 나뉘어서 필요시에 다운로드가 된다.
const ListPage = lazy(() => import('./pages/ListPage/index'));
const ViewPage = lazy(() => import('./pages/ViewPage/index'));
function App() {
return (
<div className='App'>
<Suspense fallback={<h1>loading...</h1>}>
<Switch>
<Route path='/' component={ListPage} exact />
<Route path='/view/:id' component={ViewPage} exact />
</Switch>
</Suspense>
</div>
);
}
export default App;분석 결과를 보면 다음과 같이 chunk.js 파일이 나누어져 있는 것을 확인할 수 있다.
👉🏻 컴포넌트 lazy loading
컴포넌트 별로 사이즈가 큼에도 불구하고, 처음부터 로드할 필요 없는 컴포넌트들을 lazy loadg 해줄 수 있다.
const LazyImageModal = lazyWithPreload(() => import('./components/ImageModal'));
function lazyWithPreload(importFunction) {
const Component = React.lazy(importFunction);
Component.preload = importFunction;
return Component;
}👉🏻 컴포넌트 preloading
Image객체를 사용한다
javascript에서 제공하는 image 객체는 html에 이미지 태그의 src 부분 이미지 url을 변수를 통해 동적으로 제어할 필요성이 있거나, 웹브라우저에는 당장 표시하지않고 나중을 위해 이미지를 미리 로딩하려 할때나 이미지의 크기를 바로 구할 때 쓰일 수 있다.
아래 예제에서는 화면이 mount 된 이후에 image의 첫장을 preload해 놓는다.
useEffect(() => {
LazyImageModal.preload();
const img = new Image();
img.src =
'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-01.jpg?interpolation=lanczos-none&resize=*:800';
}, []);🙋🏻텍스트 압축
CRA를 이용할 시에 최종적으로 build 되었을 때와, dev 환경에서 돌릴 때의 차이가 있기 때문에 실제로 build 된 상황에서도 확인을 해봐야한다. build 페이지에서 lighthouse를 돌리게 되면 아래와 같은 추가 항목을 볼 수 있다.
파일의 크기가 2Kb이상이되면 인코딩을 해서 전달을 하고, 그 이하의 파일은 인코딩을 하지 않는다. 왜냐하면 디코딩을 하는데도 또 시간이 필요하기 때문에 인코딩을 하는 것이 더 시간이 오래 걸리게 된다.
텍스트 압축은
npm run build && node ./node_modules/serve/bin/serve.js -s build,build 명령어 상에 압축을 하는 것으로 명령만 해주면, 자동으로 압축을 해준다
