프로젝트 진행하면서 최적화 진행을 시작하려고 한다.
lighthouse를 이용해 올바르게 진행되고 있는지 확인하였다.
이미지 크기 설정
먼저 성능을 보면,, 41점이다..!
이 프로젝트를 시작하면서 기능 구현에 초점을 두었기 때문에 렌더링 크기가 굉장히 비효율적으로 돌아갔다.
그래서 이부분을 바로 잡아주었다.
성능이 2 올라갔다.
렌더링된 크기에 가깝게 해주어서 작업 시간을 줄여주었다.
lazy loading
프로젝트는 메인 화면에서 인피니티 스크롤을 사용한다.
초반에는 10개를 보여주고 이후에 받아오는 형식인데,
여기서 불러오는 2개의 이미지에 priority를 넣어주었다.
페이지 특성상 스크롤을 내려야 보이는 것들이 더 많고
뷰포트에는 2개의 이상형 월드컵 밖에 보이지 않아서
priority를 제거하고 레이지 로딩을 넣으려고 하였다.
수정 전
수정 후
하지만 사용해보니 Largest Contentful Paint (LCP) 0.8초 감소하였지만,
Total Blocking Time (TBT)가 150 밀리초 감소하였다.
(610 밀리초는 0.61초이다.)
Largest Contentful Paint (LCP) : 웹페이지를 불러오는데 걸리는 시간
Total Blocking Time (TBT) : 사용자와 페이지 상호 작용 지연 시간
디버깅을 해보니 LCP는 뷰포트가 아닌 곳까지 업데이트하고 있어서
TBT가 더 중요하다고 생각하여서 priority를 놔두기로 결정하였다.
(priority에서 lazy loading으로 가려했으나 성능 비교를 통해 priority로 결정하였다.)
