이미지 로딩 시간을 줄이는 3가지 방법

🙂 이번 시간에는 이미지 로딩 시간을 줄이는 3가지 방법에 대해 알아보았다!

 

1. 이미지 압축하기

• 첫번째는 이미지를 압축하는 방법으로, 이미지를 압축하여 이미지 로딩 시간을 줄일 수 있다.
• 이미지를 압축하는 방법으로 Imagemin를 사용할 수 있다.

(1) imagemin으로 이미지 압축하기

• 압축할 파일 위치, 압축된 파일 저장 위치 등을 지정하여 이미지를 압축할 수 있다.

import imagemin from 'imagemin';
import imageminJpegtran from 'imagemin-jpegtran';
import imageminPngquant from 'imagemin-pngquant';

const files = await imagemin(
  ['images/*.{jpg,png}'],        // 압축할 이미지 위치
  {
      destination: 'build/images', // 압축한 이미지 저장 위치 
      plugins: [
          imageminJpegtran(),        // jpeg 파일 압축 허용
          imageminPngquant({         // png 파일 압축 허용
              quality: [0.6, 0.8]   
          })
      ]
  });

2. 적절한 이미지 크기로 변경하기

• 두 번째는 Lighthouse를 사용해 성능 향상이 가능한 이미지를 찾는 방법이다.
• Lighthouse > 옵션 > 성능을 실행하여 성능 향상이 가능한 이미지 정보를 받을 수 있다.
• 해당 정보를 토대로 이미지 크기를 조정하면, 이미지 로딩 시간을 줄일 수 있다!

 

(1) Lighthouse로 성능 향상이 가능한 이미지 찾기

• 아래 이미지는 m.naver.com 의 성능 검사 결과이다.
• 제일 먼저 브라우저의 전체적인 성능 정보는 알 수 있다.

 

• 그리고 스크롤을 내려보면, 이미지 크기 적절하게 설정하기 탭이 있다.
• 해당 탭에서 성능 향상이 가능한 이미지 정보(리소스 크기, 가능한 절감 효과)를 확인할 수 있다.
• 우리는 이 정보를 토대로 이미지 크기를 조정하여 로딩 속도를 높일 수 있다.

3. 브라우저 캐싱 & preload 사용하기

(1) 브라우저 캐싱이란?(caching)

• 브라우저 캐싱은 브라우저에서 리소스(이미지, 웹 멀티미디어 등)를 임시 저장하는 기술이다.
• 브라우저 캐시에 접근하는 방식은 그림1과 같다.

1. 브라우저가 서버에 리소스를 처음 요청할 때, 서버에서 검색을 진행한다.
2. 검색을 통해 리소소를 가져오고, 로드된 일부 리소스는 브라우저 캐시에 저장된다.
  (캐싱된 리소스는 캐시 만료 전까지 유효)
3. 다음에 요청시 캐싱된 리소스가 있다면, 브라우저 캐시에서 리소스를 빠르게 로드한다.

🙂 이처럼 브라우저에 리소스(이미지, 웹 멀티미디어 등)를 캐시된 경우, 빠르게 리소스를 가져올 수 있다.
그럼, 로딩이 오래 걸리는 이미지의 경우 미리 로딩하여 캐시로 가져오면 어떨까?

(2) preload로 이미지 로딩 속도 향상시키기

• 이미지 로딩 시간을 줄이는 마지막 방법은 preload이다.
• preload는 요청 전에 이미지를 미리 로딩하여 캐시에 저장하고, 필요할 때 브라우저 캐시에서 가져오는 걸 말한다.
• 아래는 onload event + Promise.all을 사용해 이미지를 preload시키는 코드이다.

function preloadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = src;
    img.onload = resolve;
    img.onerror = reject;
  });
}

function porloadImages(srcs) {
  return Promise.all(srcs.map(preloadImage));
}

// 사용 예시
const fetchAllImages = async () => {
  const { data } = await fetchData();
  await porloadImages(data.srcs);
}

See the Pen image preload by KumJungMin (@kumjungmin) on CodePen.

이번 포스팅에서는 이미지 로딩 시간을 줄이는 3가지 방법에 대해 알아보았다. 첫 번쨰는 압축하기, 두번째는 성능 향상 가능한 이미지 탐색하기, 마지막은 이미지 preload을 소개했다. 이 중에서 어떤 방법이 제일 좋다고 확신할 순 없지만, 만약 이미지 로딩 시간을 줄여야 한다면 preload방식은 어떨까?