지연 로딩이란?
지연 로딩은 리소스가 필요할 때까지 리소스를 가져오기를 일시적으로 연기하여 웹 페이지의 데이터 사용을 줄이는 편리한 기술이다.
요즘은 지연 로딩이 웹 표준이며, 대부분의 주요 웹 브라우저는 loading = "lazy" 속성을 사용하여 지연 로딩을 지원한다. 지연로딩을 사용하면 컨텐츠가 필요한 위치로 스크롤 되었을때 리소스를 가져와 컨텐츠를 볼 수 있게 한다.
지연 로딩의 성능 효과
지연로딩의 장점
- 페이지 로딩 시간 감소(PLT) : 리소스 로딩을 지연시킴으로써 초기 페이지 로드 시간을 줄일 수 있다. (최근 개발하고 있는 실전 프로젝트에서는 posts 페이지에서 전체게시물을 불러와서 무한스크롤로 사용자에게 보여주는데, 이는 성능저하를 일으킬 수 있다고 본다. 지연로딩을 병합 적용한다면 초기 페이지 로드 시간을 줄일 수 있을 것 같다는 생각)
- 리소스 사용 최적화 : 리소스를 지연 로드하여 시스템 리소스 사용을 최적화 할 수 있다. 이 효과는 처리 기능이 낮고 메모리가 적은 모바일 장치에서 효과적으로 작용한다.
지연로딩의 단점
- 빠른 스크롤 속도 저하 : 애플리케이션에 지연 로딩을 사용하면 데이터가 로드될 때까지 기다려야 하므로 스크롤 속도가 느려질 수 있다. 이렇게 하면 애플리케이션 성능이 저하되고 사용자 경험이 문제가 될 수 있다. (초기 페이지 로드시간이 오래 걸릴때와 이후 스크롤 속도 저하 중에서 어떤 부분이 사용자의 경험에 더 안 좋은 영향을 줄 것인지 비교하는 것이 필요할 듯)
- 컨텐츠 이동으로 인한 지연: 지연 로딩 이미지가 너비와 높이 속성이 정의 되지 않은 경우, 리소스가 로드되고 사용자가 특정 뷰포트로 스크롤 되면 브라우저는 컨텐츠를 처리하고 페이지 레이아웃을 다시 변경 해야한다. 이렇게 되면 기존에 로드된 리소스들이 다시 이동하는 등 변화가 생기면서 사용자 경험에 안좋은 영향을 줄 수 있다.
- 컨텐츠 버퍼링: 리소스가 로딩되는 동안 사용자가 계속해서 스크롤 등의 동작을 할때, 컨텐츠 버퍼링이 발생가능하다.
지연로딩 사용가이드
- 적절한 위치에 적절한 리소스 지연로딩: 리소스가 많은 긴 웹 페이지가 있는 경우 지연 로딩을 추가하는 것을 고려할 수 있다. 단, 스크롤을 해야 볼 수 있는(below the fold)부분이나 사용자 시점 밖에 있는 컨텐츠에 대해서만 지연 로딩을 추가한다. 백그라운드 작업을 실행하는데 필요한 리소스를 절대 지연 로딩하면 안된다. 예를 들어, 자바스크립트 컴포넌트, 배경 이미지 또는 기타 멀티미디어 컨텐츠의 경우 지연로딩을 적용하기에 적합하지 않은 요소이다. 크롬 브라우저의 Lighthouse 도구를 이용하여 검사하여 가능한 리소스를 구별하여 지연 로딩 속성을 추가할 수 있다.
- 웹페이지 사용을 방해하지 않는 컨텐츠 지연로딩: 예상치 못하게 지연 로딩이 동작하지 않는 경우 중요도가 낮은 리소스가 로드되지 않는 것이 더 좋은 사용자 경험임으로, 지연로딩을 사용하게 된다면 중요도가 높은 것 보다는 낮은 컨텐츠에 사용하는 것이 좋다. 지연로딩이 모든 곳에서 지원되는 기능이 아직 아니기에 이러한 부분도 고려해야할 부분이다.
- 검색엔진 최적화에 중요하지 않은 컨텐츠 지연로딩: SEO 인덱싱이 진행 중일 때 검색 엔진은 사이트를 크롤링 하여 페이지 인덱싱을 위한 웹사이트 데이터를 찾는다. 하지만 지연 로딩으로 인해 웹 크롤러는 모든 페이지 데이터를 볼 수 없는 상황이 생긴다. 사용자가 페이지와 상호작용을 하지 않아 데이터가 로드 되지 않기 때문이다. 필수적인 비지니스 데이터를 놓치는 것은 치명적인 결함이기에, 키워드, 비즈니스 정보와 같은 SEO대상 컨텐츠에는 지연로딩을 사용하지 않는 것이 중요하다.
마무리하며
실전프로젝트에서 디자이너분이 보여주신 figma 디자인에서 게시물 전체 목록의 게시물에서 대표이미지가 지연로딩 기능을 사용하거나 로딩 스피너처럼 작동해야할 것 같아서 정리하게 된 아티클이다. 최근 기능을 사용하는데 있어 최소한 왜 사용하는지를 알고 어떻게 사용하는지를 배워서 사용하는 것이 필요하다는 생각이 많이 든다.
Reference
원문
https://blog.bitsrc.io/effects-of-too-much-lazy-loading-on-performance-4dbe8df33c37
번역본
https://velog.io/@lky5697/effects-of-too-much-lazy-loading-on-performance
'자료 > article' 카테고리의 다른 글
| useMemo 그리고 useCallback 이해하기 (0) | 2022.11.24 |
|---|---|
| It’s 2022, Please Don’t Just Use “console.log” Anymore (0) | 2022.09.11 |
| 변경에 대해 의사소통하기 (0) | 2022.09.08 |
| 리엑트는 언제 리렌더링 하는가. (0) | 2022.08.31 |
