크롬 최적화) 이미지가 많은 페이지 조금 더 빠르게 로딩하기

lazy image loading

이름은 생소할수있다.

아주 쉽게 정리하면, 이미지 위치가 아직 안보이는 위치라면 로딩을 안하고

보이기 직전에 로딩하여 한번에 로딩할때보다 부하를 줄여준다.

 

 

크롬에서 설정 방법

수정) 최신버전의 크롬에는 자동으로 적용되어있습니다. 별도로 적용하지 않으셔도 됩니다.

먼저 다음 주소로 이동한다.

chrome://flags/#enable-lazy-image-loading

 

설정을 사용함(Enable)로 변경한다.

 

아래에 재시작 버튼이 뜨며, 재시작을 누르게 되면 활성화됨으로 표시됩니다.

 

 

테스트로 구글에 "스압"을 검색한 이후 lazy-loading을 사용하지 않는 사이트를 대상으로 테스트 해보았다.

적용 전

적용 전

화면을 약 3초동안 로딩하였고,

이미지 등 리소스를 추가로 다운받느라 약 26초가 더 걸렸다.

이 사이트는 최적화가 안되어있어서 메인 배경사진이 로딩되기까지 20초가 걸렸다..

적용 후

적용 후

화면을 약 4초동안 로딩하였고,

이미지 등 리소스를 추가로 다운받느라 약 20초가 더 걸렸다.

 

사이트의 이미지 전송속도에는 차이가 없어서 로딩속도는 둘다 느리지만,

몇번 더 테스트한 결과 15%~30%(여기에서는 5~10초) 가량 빠르게 로딩되었다.

 

측정해보면서 알게된점은 생각보다 lazy-loading을 이미 적용한 사이트가 많다.

 

GNU보드 같은 CMS로 만든 경우 제외하고, 중형이상 사이트는 거의 되어있다.