용량이 큰 이미지가 많은 사이트에 접속을 하면 페이지는 이미 로드 되었는데 이미지가 아직 로드 되지 않아서 빈 화면으로 보이는 경우가 생긴다. 이런것들이 쌓이면 완성도가 떨어지고 UX에도 좋지 않기 때문에 해결해야 한다.
네트워크 상태를 Fast 3G로 설정하고 미디움에 접속해보았다. 사이트와 텍스트는 로드 되었지만 이미지가 아직 로드 되지 않아서 흰 화면이 보이는것을 볼 수 있다. 페이지의 로딩 속도가 구글 검색 알고리즘에도 영향을 미친다고 하니 최적화를 해야한다.
해결책
배경 이미지 압축
보통 웹에서 1MB이하의 이미지를 사용한다. 우선 이미지의 사이즈는 반드시 줄여야한다.
Placeholder image
실제 이미지를 표시하기 전에 매우 작은 사이즈의 이미지를 먼저 보여준다. 이것을 Placeholder Image라고 한다. 예를들어 원본 이미지가 4000x2000이라면 이것을 40x20정도로 줄여서 먼저 표시하고 원본 이미지 로드가 완료되면 교체하는 방법이다.
(() => {
// 페이지가 로드되면 asyncImage 클래스명을 가진 노드를 가져온다.
const objects = document.getElementsByClassName('asyncImage'); Array.from(objects).map((item) => {
const img = new Image();
// src="작은사이즈 이미지URL" data-src="원본이미지URL"가 들어있다.
// src를 원본 이미지URL로 교체한다.
img.src = item.dataset.src;
img.onload = () => {
item.classList.remove('asyncImage');
return item.nodeName === 'IMG' ?
item.src = item.dataset.src :
item.style.backgroundImage = `url(${item.dataset.src})`;
};
});
})();이미지 객체를 새로 하나 만들고 item에 붙어있던 data-src(축소 이미지URL)을 넣어준다음, 백그라운드에서 이미지 로드가 완료되면 실제 item에 data-src를 src로 교체해준다. 여기서 이미지 객체는 백그라운드에서 이미지를 로드하기 위해서만 존재한다. 로드가 끝나고는 버려진다.
<div class="asyncImage" data-src="/images/background.jpg" />
<img
class="asyncImage"
src="/images/background-min.jpg"
data-src="/images/background.jpg">img태그인경우와 그렇지않은 경우 모두에 적용할 수 있다.
