웹 성능을 최적화하는 쉽고 간단한 방법? ( feat. 이미지 )

웹사이트에서 평균적으로 용량을 가장 많이 차지하는 것은 무엇일까요?

용량을 많이 차지하는 것은 바로 이미지입니다.

그 뜻은 이미지의 용량을 줄이게 되면 웹 페이지 성능을 상당히 좋게 만들 수 있다는 뜻입니다.

일단 이미지의 용량을 줄이는 가장 빠른 방법은 이미지의 크기를 줄이는 것입니다.

이미지의 크기를 줄이시면 됩니다.

 

...?

 

하지만 현재 이미 필요한 만큼 딱 맞춰서 넣어놓은 상태이기 때문에 

현 상태에서 이미지의 크기를 줄이라는 것은 적절하지 못한 방법이라고 생각합니다.

 

그럼 이제 어떤 방법들을 사용해야 할까요?

 

---

1.  Lazy Load를 사용하기

첫 번째는 lazy load를 사용하는 것입니다.

 

일단 lazy load의 기본 원리는 사용자가 보고 있는 영역이 이미지가 있는 영역에 왔을 때 이미지를 로딩하는 것입니다.

 

맨 처음 사용자가 페이지에 들어왔을 때 모든 이미지를 한꺼번에 로딩하는 것이 아니라,

그 이미지가 필요할 때 로딩하는 것이기 때문에

사용자가 페이지를 처음 방문했을 때 사이트 로딩 속도가 훨씬 빨라지게 됩니다.

 

사용자가 보고 있는 높이 영역 : 0px ~ 1080px

이미지가 있는 높이 영역 : 2000px ~ 2600px

 

위와 같은 상황이라고 가정했을때,

사용자가 보고 있는 높이 영역이 2000px에 도달하게 될때 이미지를 로딩하는 방식입니다.

즉, 뷰포트가 이미지의 위치에 맞닿았을때 이미지를 로딩하는겁니다.

 

사용하는 방법은 아래와 같습니다.

<img src="https://waterworkcode.tistory.com/" loading="lazy" width="200" height="200" alt="이미지" />

이미지의 크기를 정해주어야 이미지가 로딩 되었을때의 밀림현상을 방지할 수 있습니다.

 

위 방법은 Native Lazy Loading 방식입니다.

HTML 에서 지원하는 속성을 사용해서 넣는 방식이고 사용 방법또한 아주 쉽습니다.

 

그러나 많은 브라우저가 지원하고 있지만 지원하지 않는 브라우저 또한 존재하기 때문에

지원하지 않는 브라우저에서 Lazy Loading 을 적용하고 싶다면 JavaScript 를 사용해서 넣어주어야 합니다.

 

하지만 대부분 프론트엔드 코드를 작성할때 프레임워크를 많이 사용하실 겁니다.

그 중에서도 React를 가장 많이 사용하실텐데요

 

React 에서 Lazy Loading 을 쉽게 사용할 수 있게해주는 라이브러리도 있고,

Next를 사용하신다면 Next/Image 지원으로 쉽게 사용하실 수 있습니다.

 

Lazy Loading 기술은 이미지에서 적은 페이지에서 사용하기보다 이미지가 많은 페이지에서 사용하는것을 권장합니다 :)

 

---

2. 이미지 크기 정해주기

두번째 방법은 이미지의 크기를 미리 정해주는것입니다.

 

이미지의 width, height 을 정해주는 것은 이미지 최적화에 도움이 됩니다.

정확히는 이미지의 크기를 정해주어 Reflow 를 방지하는 행위 입니다.

 

Reflow 란?

Action, Event을 발생시켜 요소의 크기나 위치 등을 변경하면

해당 요소의 하위 / 상위 요소들을 포함하여 Layout 을 다시 그립니다.

변경하려는 특정 요소의 위치 / 크기 그리고 연관된 요소들의 위치 / 크기를 다시 계산을 하는것 입니다.

 

이미지가 들어가는 부분에 크기를 정해주지 않으면 똑같은 일을 2번 해서 속도가 느려지기 때문에

일을 1번만 하게 해주기 위해서 크기를 정해준다고 생각하는게 쉬울것 같습니다.

 

---

3. <Picture> 태그를 이용해서 webp, avif 확장자 사용하기

세번째 방법은 jpg, png 보다 가벼운 webp, avif 확장자의 이미지를 사용하는것 입니다.

 

png -> jpg -> webp -> avif 

보통 위 순서로 이미지의 크기가 가벼워집니다.

확장자가 바뀌면서 50배로 가벼워지는 이미지도 있고, 2배정도만 가벼워지는 이미지도 있습니다.

가끔 정말 이상하게 무거워지는 이미지도 있어서 사용하기전에 크기 한번씩 확인해주시면 더 좋을것 같습니다 :)

 

이미지 변환은 구글에 "webp 변환" 검색하시면 다양한 유료 / 무료 사이트가 나오는데 골라서 사용하시면 됩니다.

 

webp, avif 이미지를 <Picture> 태그를 써서 아래와 같이 사용할겁니다.

<picture>
	<source srcset="./imgs//code-is-fun.avif" type="image/avif" />
	<source srcset="./imgs//code-is-fun.webp" type="image/webp" />
	<img src="./imgs//code-is-fun.jpg" alt="code is fun!!" />
</picture>

<!-- 
<picture>
	<source srcset="이미지 경로 또는 주소" type="이미지 주소의 확장자" />
	ex) <source srcset="블라블라.avif" type="image/avif" />
	<img src="이미지 경로 또는 주소" alt="이미지 설명" />
</picture>

 접속한 브라우저가 source의 타입을 지원하지 않으면 다음 source를 확인합니다.
 차근 차근 내려가면서 허용하는 타입의 source가 없으면 img 태그의 경로를 넣습니다.
 -->

 

위 코드를 적용하면 아래처럼 나오게 됩니다.

 

 

avif 파일이 적용된게 보이시나요?

저는 크롬으로 확인을 했고, 크롬은 avif 형식의 파일을 지원하기 때문에 avif 파일을 보여주고있습니다.

 

위 코드에서 loading="lazy" 또한 넣을 수 있습니다.

제가 변형한 파일들은 평균적으로 avif 파일이 png 파일보다 약 20배정도 가벼웠습니다.

 

위 세가지 방법 말고도 다른 방법들이 더 존재하긴 합니다.

저는 일단 HTML 단계에서 제목처럼 쉽고 간단하게 해결 가능한 방법만 가져와 봤습니다.

 

그래도 저는 두번째와 세번째 방법만 적용해도 벌써 페이지가 전보다 빨라졌다는 느낌을 받았습니다.

다른 방법들을 사용하면 또 얼마나 빨라질까요...?

 

페이지 최적화 쉬운단계부터 차근차근 진행해보자구요 !!

 

 

 

 

 

 

 

참고 사이트 : 

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Lazy loading - Web Performance | MDN

http://www.tcpschool.com/html-tags/picture

코딩교육 티씨피스쿨