🖋️ Lazy Loading 의 올바른 사용

사용자 경험과 성능 최적화를 향상시키기 위한 기술

웹 페이지 또는 애플리케이션에서 리소스(이미지, 비디오, 스크립트 등)를 초기 로드 시점이 아닌, 필요할 때 로드하는 방식

초기 로딩 시간을 줄이고, 네트워크 대역폭을 절약하며, 사용자 경험을 개선

⭐ 올바른 사용법

• "필요할 때만 리소스 로드하기"

  • 사용자가 실제로 볼 가능성이 있는 컨텐츠만 로드
    
    
  • 예시 ) 스크롤을 통해 나중에 보게 될 이미지는 초기 로드 시점에서는 로딩하지 않고, 해당 이미지가 화면에 나타날 때 로딩

• "우선순위 설정"

  • 중요한 컨텐츠(예: 텍스트 콘텐츠)는 먼저 로드
  • 상대적으로 중요도가 낮은 리소스(예: 이미지, 비디오)는 나중에 로드
    
    
  • 사용자가 주요 정보를 빠르게 접근할 수 있게 하며, 전체적인 사용자 경험을 향상

• "스켈레톤 스크린 활용"

  • 리소스가 로드되는 동안 사용자에게 로딩 인디케이터나 스켈레톤 스크린을 보여주어 로딩 중임을 알리기

📰 예시

• 뉴스 기사에서 이미지 뒤로 로딩하기
  
  
  • 즉시 텍스트 컨텐츠를 제공
  • 이미지는 사용자가 해당 섹션에 도달했을 때 로드하는 것을 추천
  • 이 방식은 텍스트 기반 정보의 접근성을 우선시
  • 네트워크 사용량과 초기 페이지 로드 시간을 단축
    
    
• 쇼핑몰 제품 리스트에서 Lazy Loading 사용하기
  
  
  • 쇼핑몰에서 제품 리스트를 표시할 때
  • 사용자가 스크롤하지 않고 보지 않을 제품 이미지를
    모두 초기에 로드하는 것은 리소스 낭비
    
    
  • 대신, 사용자가 스크롤하여 해당 제품에 도달할 때 이미지를 로드
  • 더 나은 사용자 경험과 성능 최적화를 달성
    
    
• 댓글 섹션에서 Lazy Loading 사용하기
  
  
  • 인기 있는 글이나 기사에서 수백 개의 댓글 존재
  • 페이지 로드 시 모든 댓글을 한 번에 로드 NO!
    
    
  • 대신, 사용자가 댓글 섹션에 도달하거나 "더 보기" 버튼을 클릭할 때
    추가 댓글을 로드하는 방식을 선택