(번역) 지연 로딩 적절하게 사용하자

원문 : https://blog.bitsrc.io/effects-of-too-much-lazy-loading-on-performance-4dbe8df33c37

 

최근 회사에서 개발 문화를 만들고자 노력중이다.. 그 중에 하나인 일주일에 하나씩 IT 기사를 보고 간단하게 발표하는 시간을 갖고 서로 읽은 내용을 공유하자는 문화이다. 좋은 개발 문화라는 것은 딱 정해진 게 없어서 좋을지 안좋을지 모르겠지만 이렇게 좋은 문화를 만들기 위해서 다양한 시도를 하는 것은 좋은거 같다.

그래서 읽은 기사거리를 정리할 겸 포스팅을 작성하고자 한다.

오늘은 지연 로딩을 적절하게 사용하여 웹 성능 향상에 기여하는 포스팅을 읽고 정리하고자 한다.

 

지연 로딩이란?

필요한 리소스가 필요할 때까지 리소스를 가져오기를 일시적으로 연기하여 웹 페이지의 데이터 사용을 줄이는 편리한 기술이다.

웹 페이지에 많은 리소스가 있을 때 현재 사용자에게 보여주지 않는 리소스까지 다 불러다가 보여줄 필요없기 때문에 웹 성능 향상을 시킬 수 있다.

위 이미지처럼 스크롤 내릴때마다 필요한 리소스를 불러와서 로드하기 때문에 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있다.

하지만, 지연 로딩이 항상 애플리케이션의 성능을 보장하지는 않는다.

 

지연 로딩의 성능 효과

• 페이지 로딩 시간 감소(PLT) : 리소스 로딩을 지연시킴으로써 초기 페이지 로드 시간을 줄일 수 있다. (필요한 리소스만 로드하기 때문에)
• 리소스 사용 최적화 : 리소스를 지연 로드하여 시스템 리소스 사용을 최적화 할 수 있다. 이 효과는 처리 기능이 낮고 메몰가 적은 모바일 장치에서 효과적으로 적용된다. 

지연 로딩의 역효과

• 빠른 스크롤 속도 저하 : 빠른 스크롤로 인해서 아직 로드되지 않은 리소스들을 로드해야 되기 때문에 애플리케이션 성능 뿐만 아니라 사용자 경험에 문제가 될 수 있다.
• 컨텐츠 이동으로 인한 지연 : 지연 로딩 이미지가 너비와 높이 속성이 정의 되지 않은 경우 이미지 렌더링 프로세스 중에 눈에 띄는 지연이 발생할 수 있다. 그 이유로는 리소스가 초기 페이지 로드 시 다운로드 되지 않기 때문에 브라우저는 페이지 레이아웃에 맞는 콘텐츠 크기를 알 수 없다.
• 컨텐츠 버퍼링 : 리소스가 아직 다운로드 되는 동안 사용자가 빠르게 아래로 스크롤하게 되면 컨텐츠 버퍼링이 발생한다. 이 상황은 특히 느린 대역폭의 연결에서 발생할 수 있으며 웹 페이지 렌더링 속도에 영향을 미친다.

즉, 위 단점들을 종합해보자면 필요한 리소스를 필요할 때마다 불러오기 때문에 발생하는 문제점들이다.(빠른 스크롤, 컨텐츠 이동)

 

지연 로딩을 적합하게 사용해야 된다.

1. 적절한 위지에 적절한 리소를 지연 로드 : 리소스가 많은 웹 페이지가 있는 경우 지연 로딩 추가를 고려한다. 단, 백그라운드 작업을 실행하는데 필요한 리소스를 절대 지연 로딩하면 안된다.
2. 웹 페이지 사용을 방해하지 않는 컨텐츠를 지연 로딩 : 중요도가 높은 리소스보다 낮은 리소스는 지연 로딩을 하는 것이 좋다. 또한, 아직까지는 모든 플랫폼이 지연로딩을 지원하는 것이 아니기 때문에 오류 처리를 잊으면 안되며 예상치 못하게 지연 로딩이 동작하지 않는 경우 중요도가 낮은 리소스가 로드되지 않는 것이 더 좋은 사용자 경험임을 잊지 말자.
3. 검색엔진 최적화(SEO)에 중요하지 않은 컨텐츠를 지연 로딩 : 지연 로딩은 모든 컨텐츠를 포함하고 있지 않으므로 SEO 인덱싱을 사용할 때는 지연 로딩이 장점이 되지 않습니다. (SEO 인덱싱은 사이트를 크롤링하여 페이지 인덱싱을 위한 웹사이트 데이터를 찾기 때문에 지연 로딩시에는 일부 리소스만 로드되어 있기 때문에 부정적인 효과를 볼 수 있다.)

즉, 지연 로딩을 사용할 때는 리소스 중요도와 어디에 적용할 지 잘 판단해서 사용해야 된다.