[최적화] lazy loading 레이지 로딩으로 로딩 속도를 개선해보자

 

 

 

지난 프로젝트 때 만들었던 에어비엔비 클론 사이트

날짜, 인원, 요금 범위를 지정해 원하는 조건의 숙소를 검색하는 기능을 가지고 있다.

 

 

 

 

 

 

처음 메인 화면에서 전체 숙소를 보여주는데,

서버에서 총 2999개의 숙소 데이터가 한번에 넘어온다.

3000개에 가까운 데이터가 한번에 화면에 나오니 당연하게도 로딩 속도가 굉장히 느렸다.

 

 

---

 

Lazy Loading 적용 전

 

 

기나긴 로딩.. 중간에 잠깐 멈추는 듯 하더니 폭발적으로 request를 보낸다..

 

 

총 3010개의 request를 보내고 데이터를 전부 로드하는데 42.11s가 걸렸다

 

 

 

내가 유저라도 이정도로 느린 사이트는 안 쓸 것 같다. 이대로는 안 되겠다.

사용자가 보는 첫화면의 이미지만 미리 로드하고 이후의 이미지는 나중에 로드하는

Lazy Loading(레이지로딩)으로 로딩 속도를 개선해보자!

 

 

 

---

 

Lazy Loading 적용

 

Intersection Observer API

자바스크립트의 Intersection Observer API를 사용해

 

스크롤이 내려가 지정한 컴포넌트에 다다랐을 때, 숙소 데이터를 한번에 9개씩 추가하고

숙소 데이터 컴포넌트가 50%이상 보일 경우에 이미지가 로드되도록 구현하였다.

 

 

---

 

Lazy Loading 적용 후

 

 

눈에 띄게 속도가 빨라진 것을 확인할 수 있다.

 

 

16개의 request를 보내고 데이터를 로드하는데 1.67s가 걸렸다!

 

---

 

Lazy Loading 적용 전,후 비교

 

적용 전 : 빨강 / 적용 후 : 파랑

 

3010 requests → 16 requests

86.1MB resources → 5.9MB resources

Finish 42.11s → Finish 1.67s

DOMContentLoaded 736ms → 477ms

Load 1.05s → 744ms

 

 

3000개가 넘던 request가 16개로 줄어들고,
데이터가 전부 로드되는 시간이 이전에 비해 40초 가까이 줄어들어 1초대가 되었다.

 

 

로딩 속도 개선하기에 성공 !

 

이제 좀 쓸만한 사이트 속도가 됐다
앞으로 lazy loading 말고도 최적화 공부를 더 해봐야겠다 은근히 재밌다

 

 

 

2020.11.23 벨로그에 올렸던 포스팅