이미지 최적화를 통한 웹 성능 개선

🤔 이미지 최적화 왜 필요할까?

진행하던 프로젝트의 성능을 분석하다 보니 lightHouse 결과 웹 성능이 대체로 60-70점 언저리인것을 발견했다.

성능 저하의 원인에는 여러 원인이 있지만 그 중 이미지를 집중적으로 먼저 개선해보려 한다!

해결법으로 이미지 최적화를 추천해주는 lightHouse..

 

이미지 최적화에 들어가기 전 먼저 현재 우리 사이트에 이미지 관련 어떤 문제가 있는지 살펴보기 위해 Network 를 통해 트래픽 속도를 측정해보니 아래와 같은 문제점들을 발견했다.

• 불러오는 이미지의 수가 많음
• 매페이지 공통으로 사용하는 이미지 매번 불러옴
• 압축이 적은 이미지 유형

다른 문제도 있지만 위 문제점들로 인해 로딩속도가 저하되는거 같은데 페이지 로딩 시간은 웹 성능을 최적화 하는데 있어 중요한 부분중 하나이다. 페이지 로딩에서 100밀리 초만 지연되더라도 전환율이 7% 감소된다고 한다. 특히 페이지 로딩시간을 감소하기 위해선 이미지 최적화의 역할이 많은 부분 차지하기도 한다. 

 

그렇다면 페이지 로딩속도를 줄이면 어떤 이점들이 있을까?

1. 빠른 다운로드를 통한 로드 시간 단축
2. 1번의 이유로 인한 페이지 이탈륨 감소와 사용자 경험 향샹
3. 모바일 또는 느린 인터넷 속도에서도 빠르게 로드 가능
4. 검색엔진 순위에 긍정적인 영향을 미침

 

👩‍🏫 이미지 최적화 방법론.

 

1. 클라이언트가 업로드하는 이미지 압축하여 받기

우리사이트는 대체로 사용자가 이미지를 업로드하는 SNS 성 사이트이다. 애초에 로드되는 이미지를 압축하여 받기 위해 

brower-image-compression을 이용하여 이미지를 서버에 업로드하기 전에 크기를 줄여 jpeg, png, webp 이미지를 압축하는 모듈을 사용하였다.

const resizingBlob = await imageCompression(file, { maxSizeMB: 0.5 });
const resizingFile = new File([resizingBlob], file.name, {
  type: file.type,
});

위는 압축전 아래는 압축후 이미지

 

2. 사이트에서 제공하는 이미지 압축

사이트의 시각적인 요소를 위한 배경이미지의 경우 1mb 를 넘어가는 이미지들이 몇개 있어 아래 사이트에서 압축하는 작업을 거쳤다.

https://imagecompressor.com/ko/

온라인 이미지 최적화기

3. reflow 발생 줄이기

width, height 값이 없는 이미지들은 Reflow를 발생시켜 페이지 로딩 시간을 저하시키기 때문에 이를 해결하기 위해 이미지 요소에width와 height속성을 둘다 적용

 

4. image sprites 기법

웹페이지에 자주 사용되는 아이콘, 버튼 같은 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지 파일로 통합한 후 배경 이미지로 만들어 놓고 postiion값으로 각각의 이미지를 불러오는 것이 css sprite기법으로 네비게이션 단에서 공통으로 불러오는 요소에 해당 기법 사용.

https://www.toptal.com/developers/css/sprite-generator

CSS Sprites Generator Tool | Toptal®

 

위와 같은 방법으로 이미지의 크기를 줄이다보니 이전 보다 성능이 많이 올라간것을 확인할 수 있었다!