최적화(3) - Intersection Observer

Jin·2022년 5월 10일
0

최적화

목록 보기
3/5

1. Intersection Observer를 이용한 lazy loading

상황

  • 사이트의 첫 메인화면에 영상이 재생이 되고 아래에는 이미지들이 존재.
  • 이미지가 다운로드 다 된 이후에 영상이 다운로드 시작되므로 영상 재생이 조금 늦어질수 있음

해결 방법

  1. 이미지를 빠르게 다운
  2. 이미지는 당장 눈에 보이는 요소가 아니니깐, 비디오 부터 먼저 다운하고 나중에 이미지 다운

이미지를 빠르게 다운하는것은 영상이 어쨌든 영상 다운이 후순위가 되기에 2번 방안 선택.

Intersection Observer를 사용해 특정 엘리먼트가 화면에 들어오는것을 감지하여 해당 이미지들이 화면에 나오면 이미지를 다운로드 하도록 설정. 브라우저가 제공하는 기능이기에 성능의 이득을 얻을 수 있음

Intersection Observer 더 알아보기


	const imgRef = useRef()
	useEffect(() => {
		const options = {};
		const callback = (entries, observer) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting) {
					entry.target.src = entry.target.dataset.src;
					observer.unobserve(entry.target);
				}
			});
		};
		const observer = new IntersectionObserver(callback, options);

		observer.observe(imgRef.current);
	}, []);

	<img data-src={props.img} ref={imgRef} />

코드 설명

한번만 실행시키기위해 useEffect에 빈 dependency로 구현하였고
observer 또한 한번만 관찰하도록 한번 실행이 된 이후에 observer.unobserve(target) 을 입력하여 관찰을 그만두게 해주었다. 또한 entry.isIntersecting으로 화면에 노출 여부를 확인하는 조건을 줌으로써, 이 이미지가 브라우저내에 표시가 될때를 감지하였다.

또한 리액트에서 DOM을 직접 조작하기 위해 useRef를 사용하였다.

2. 이미지 사이즈 최적화

  • png - 무손실 압축으로 용량이 크다
  • jpg - 압축을 조금 함으로서,용량이 png에 비해서 작지만 약간의 화질 저하가 있다.
  • webp - 구글에서 만든 이미지 포맷.jpg보다 더 좋은 이미지 포맷. 지원하지 않는 브라우저가 꽤 있음
  • 사진 압축 웹사이트 : https://squoosh.app

webp 지원 안되는 브라우저도 있으므로 picture를 이용하여 처리해줘야한다. picture tag는 타입뿐 아니라 브라우저 크기 등 다른것으로도 조건을 줄수 있으므로 picture 자세히 알아보기 여기서 자세히 읽어보도록하자.
webp를 먼저 불러오고 이를 지원하지 않는 브라우저면 아래 img태그로 jpg 파일을 불러오도록 한다.

<picture>
  <source data-srcset={webpImg} type="image/webp"/>
  <img src={jpgImg} />
</picture>
if (entry.isIntersecting) {
					entry.target.src = entry.target.dataset.src;
  entry.target.previousSibling.srcset= entry.taget.previousSibling.dataset.srcset;
					observer.unobserve(entry.target);
				}

코드 설명

webp를 먼저 불러오고 이를 지원하지 않는 브라우저면 아래 img태그를 이용함

useEffect에 source도 lazy loading을 처리해주기 위해 entry.trget.previousSibling.srcset코드 추가

출처 : 프론트엔드 개발자를 위한, 실전 웹 성능 최적화 part2

profile
내가 다시 볼려고 작성하는 블로그. 아직 열심히 공부중입니다 잘못된 내용이 있으면 댓글로 지적 부탁드립니다.

0개의 댓글