Lighthouse 보고서의 추천 섹션에는 페이지의 화면 밖 또는 숨겨진 이미지가 모두 표시되고 키비바이트 (KiB)의 잠재적 절감 효과도 표시됩니다. 모든 중요 리소스의 로드가 완료된 후 이러한 이미지를 지연 로드하여 상호작용 시작 시간을 줄이는 것이 좋습니다.
lazysizes로 화면 밖 이미지 지연 로드 Codelab도 참고하세요.
스택별 안내
AMP
amp-img를 사용하여 이미지를 자동으로 지연 로드합니다.
이미지 가이드를 참조하세요.
Drupal
이미지를 지연 로드할 수 있는 Drupal 모듈을 설치합니다. 이러한 모듈은 오프스크린 이미지를 지연하여 성능을 개선하는 기능을 제공합니다.
Joomla
지연 로드 Joomla 플러그인을 설치하면 모든 오프스크린 이미지를 연기하거나 이 기능을 제공하는 템플릿으로 전환할 수 있습니다. Joomla 4.0부터 'Content - Lazy Loading Images' 플러그인을 사용해 전용 지연 로드 플러그인을 사용 설정할 수 있습니다. AMP 플러그인 사용도 고려해 보세요.
Magento
웹 플랫폼의 지연 로드 기능을 사용하도록 제품 및 카탈로그 템플릿을 수정하는 것이 좋습니다.
WordPress
지연 로드 WordPress 플러그인을 설치하면 모든 오프스크린 이미지를 연기하거나 이 기능을 제공하는 테마로 전환할 수 있습니다. AMP 플러그인 사용도 고려해 보세요.