Lighthouse 보고서의 기회 섹션에는 페이지의 모든 오프스크린 이미지 또는 숨겨진 이미지와 함께 KiB 단위의 잠재적 절감 효과가 나열됩니다. 상호 작용까지 시간을 낮추기 위해 모든 중요한 리소스가 로드를 완료한 후에 이러한 이미지를 지연 로드하는 것이 좋습니다.
lazysizes codelab을 사용한 오프스크린 이미지 지연 로드도 참조하세요.
스택별 지침
AMP
amp-img로 이미지를 자동으로 지연 로드합니다. 이미지 가이드를 참조하세요.
Drupal
이미지를 지연 로드할 수 있는 Drupal 모듈을 설치합니다. 이러한 모듈은 성능을 향상시키기 위해 오프스크린 이미지를 지연시키는 기능을 제공합니다.
Joomla
오프스크린 이미지를 지연시키는 기능을 제공하는 lazy-load Joomla 플러그인을 설치하거나 해당 기능을 제공하는 템플릿으로 전환합니다. Joomla 4.0부터 "콘텐츠 - 이미지 로딩 지연" 플러그인을 통해 전용 지연 로딩 플러그인을 사용할 수 있습니다. AMP 플러그인 사용도 고려해 보세요.
Magento
웹 플랫폼의 지연 로드 기능을 사용하도록 제품 및 카탈로그 템플릿을 수정하는 것이 좋습니다.
WordPress
오프스크린 이미지를 지연시키는 기능을 제공하는 lazy-load WordPress 플러그인을 설치하거나 해당 기능을 제공하는 테마로 전환합니다. AMP 플러그인 사용도 고려해 보세요.
리소스
Updated on • Improve article