[사용성 개선] Lazy loading with react, typescript

Lazy loading

웹에서 이미지는 필수적으로 사용되어야 하지만 동시에 이미지를 로드하는 비용이 많이 들어간다. lazy loading을 통해 뷰포트에 보이는 이미지만 load 해서 성능을 향상시키고 통신 비용을 줄일 수 있다. 

 

Lazy loading시 주의할 점

1. 이미지가 로드되기 전에 보여질 placeholder를 적절하게 사용해야 한다.

• 방법1: 저화질의 이미지로 placeholder를 사용한다.
• 방법2: 주요 색상을 placeholder로 사용한다.

2. 이미지를 로드 하기 위해 미리 이미지를 로드하기 위한 시간을 준다.

• 사용자가 스크롤을 빠르게 내릴 경우 이미지가 로드되는데 시간이 걸릴 것을 대비해서 사용자가 해당 이미지보다 더 높은 스크롤 위치에 있을 때부터 미리 로드를 진행하게 한다.

3. 이미지를 감싸는 container의 공간을 미리 지정한다.

• 이미지가 로드되기 전 container의 공간을 미리 지정하지 않는 경우 아무것도 없던 공간에 갑자기 이미지가 생성되어 다른 요소들이 밀리는 현상이 발생하여 사용성이 떨어질 수 있다.
• 이러한 문제를 예방하기 위해 미리 container에 해당 이미지의 크기를 지정하여 밀림 현상을 방지해야 한다.

4. 모든 이미지에 lazy loading을 적용할 필요는 없다. 

• 스크롤이 많이 않은 경우나 첫 화면에서부터 lazy loading을 사용할 경우 오히려 사용성이 떨어지게 된다.

 

React에서 lazy loading 사용하기

lazy-loading을 사용하기 위해 다양한 라이브러리가 있는데 그 중에서 react-lazyload 라이브러리를 사용하였다. 

 

Properties

• height : placeholder property가 없는 경우 container의 높이를 미리 설정한다.
• offset: 뷰포트로부터 얼마나 떨어져있는 경우부터 load할지 알려준다.
• once: 한번만 이미지를 load하고 신경쓰지 않는다.
• placeholder: 아직 이미지가 로드되지 않는 경우 component를 추가해서 loading중임을 보여줄 수 있다. 

 

react-lazyload 추가하기

yarn add react-lazyload 
//typescript를 사용하는 경우
yarn add @types/react-lazyload

 

react에서 적용

import LazyLoad from 'react-lazyload';

const PlaceHolder = () =>{
	return <div>loading...</div>
}

const LazyLoader = () => {
    return (
        <LazyLoad height={200} offset={500} placeholder={<PlaceHolder/>}>
            <img src="https://picsum.photos/id/230/500/500"/>
        </LazyLoad>
    )
}

export default LazyLoader;

 

보다 더 디테일한 내용은 아래에서 확인 할 수 있다.

https://www.npmjs.com/package/react-lazyload

react-lazyload

 

Reference

https://helloinyong.tistory.com/297

https://www.syncfusion.com/blogs/post/top-5-react-lazy-loading-libraries-for-2022.aspx

https://www.npmjs.com/package/react-lazyload

react-lazyload