웹사이트의 일반적인 페이로드에서 이미지 및 동영상의 비율이 상당할 수 있습니다. 안타깝게도 프로젝트 이해관계자는 기존 애플리케이션에서 미디어 리소스를 줄이고 싶어 하지 않을 수 있습니다. 이러한 교착 상태는 특히 모든 관련 당사자가 사이트 성능을 개선하고 싶지만 그 방법에 대한 의견이 수렴되지 않는 경우에 혼란을 야기합니다. 다행히 지연 로드는 초기 페이지 페이로드 및 로드 시간을 낮추면서도 콘텐츠를 채우지 않는 솔루션입니다.
지연 로드란?
지연 로드는 페이지 로드 시 중요하지 않은 리소스의 로드를 지연시키는 기술입니다. 대신 이러한 중요하지 않은 리소스는 필요한 순간에 로드됩니다. 이미지의 경우 '중요하지 않음'은 종종 '화면 밖'과 동의어입니다. Lighthouse를 사용하고 몇 가지 개선 기회를 검토했다면 이 영역에서 화면 밖 이미지 연기 감사 형식의 안내를 확인했을 수 있습니다.
지연 로드를 이미 본 적이 있을 것입니다. 지연 로드는 다음과 같습니다.
- 페이지에 도달하여 콘텐츠를 읽으면서 스크롤하기 시작합니다.
- 특정 시점에 자리표시자 이미지를 표시 영역으로 스크롤합니다.
- 자리표시자 이미지가 갑자기 최종 이미지로 대체됩니다.
이미지 지연 로드의 예는 인기 게시 플랫폼인 Medium에서 확인할 수 있습니다. 이 플랫폼은 페이지 로드 시 간단한 자리표시자 이미지를 로드하고 표시 영역으로 스크롤될 때 지연 로드 이미지로 교체합니다.
지연 로드에 익숙하지 않은 경우 이 기법의 유용성과 이점에 대해 궁금할 수 있습니다. 자세히 알아보려면 계속 읽어보세요.
이미지나 동영상을 단순히 로드하는 대신 지연 로드하는 이유는 무엇인가요?
사용자가 볼 수 없는 것을 로드할 수 있기 때문입니다. 이것이 문제가 되는 이유는 다음과 같습니다.
- 데이터를 낭비합니다. 사용자가 실제로 볼 수 있는 다른 리소스를 다운로드하는 데 귀중한 대역폭을 사용할 수는 있지만 무제한 연결에서는 최악의 일이 아닙니다. 그러나 제한된 데이터 요금제에서는 사용자에게 전혀 표시되지 않는 항목을 로드하면 비용 낭비가 될 수 있습니다.
- 처리 시간, 배터리, 기타 시스템 리소스를 낭비합니다. 미디어 리소스가 다운로드된 후 브라우저는 표시 영역에서 콘텐츠를 디코딩하고 렌더링해야 합니다.
이미지 및 동영상을 지연 로드하면 성능에 긍정적인 영향을 미치는 초기 페이지 로드 시간, 초기 페이지 가중치, 시스템 리소스 사용량을 줄일 수 있습니다.
지연 로드 구현
지연 로드를 구현하는 방법에는 여러 가지가 있습니다. 지원하는 브라우저와 지연 로드하려는 대상을 고려해야 합니다.
최신 브라우저는 이미지 및 iframe에서 loading 속성을 사용하여 사용 설정할 수 있는 브라우저 수준의 지연 로드를 구현합니다.
이전 브라우저와의 호환성을 제공하거나 기본 제공 지연 로드가 없는 요소에 지연 로드를 실행하려면 자체 JavaScript로 솔루션을 구현하면 됩니다.
이 작업을 지원하는 기존 라이브러리도 많이 있습니다.
이러한 모든 접근 방식에 대한 자세한 내용은 이 사이트의 게시물을 참조하세요.
또한 지연 로드의 잠재적 문제와 구현 시 주의해야 할 사항 목록을 정리해 두었습니다.
결론
주의해서 사용하면 이미지 및 동영상을 지연 로드하면 코어 웹 바이탈을 비롯한 사이트의 초기 로드 시간과 페이지 페이로드를 크게 줄일 수 있습니다. 느린 연결에서 발생하는 네트워크 경합을 비롯한 불필요한 네트워크 활동이 사용자에게 발생하지 않으며 사용자가 보지 못할 수도 있는 미디어 리소스의 처리 비용은 발생하지 않지만 원하는 경우 이러한 리소스를 계속 볼 수 있습니다.
성능 개선 기법에 관한 한 지연 로드는 논란의 여지가 없습니다. 사이트에 인라인 이미지가 많이 있는 경우 불필요한 다운로드를 줄일 수 있습니다. 사이트 사용자와 프로젝트 이해관계자도 기뻐할 것입니다.