В разделе «Возможности» вашего отчета Lighthouse перечислены все изображения на вашей странице, размер которых не соответствует, а также потенциальная экономия в кибибайтах (КиБ) . Измените размер этих изображений, чтобы сохранить данные и сократить время загрузки страницы:
Как Lighthouse рассчитывает изображения большого размера
Для каждого изображения на странице Lighthouse сравнивает размер визуализированного изображения с размером фактического изображения. Размер визуализированного изображения также учитывает соотношение пикселей устройства. Если отображаемый размер как минимум на 4 КБ меньше фактического размера, изображение не проходит проверку.
Стратегии правильного размера изображений
В идеале на вашей странице никогда не должны отображаться изображения, размер которых превышает размер версии, отображаемой на экране пользователя. Все, что превышает это значение, приводит к потере байтов и замедлению загрузки страницы.
Основная стратегия предоставления изображений соответствующего размера называется «адаптивными изображениями». При использовании адаптивных изображений вы создаете несколько версий каждого изображения, а затем указываете, какую версию использовать в своем HTML или CSS, используя медиа-запросы, размеры области просмотра и т. д. Кроме того, RespImageLint — это полезный букмарклет для определения оптимальных значений srcset и sizes для ваших изображений. См . раздел «Подача адаптивных изображений», чтобы узнать больше об этих атрибутах.
CDN изображений — еще одна основная стратегия обслуживания изображений соответствующего размера. Вы можете думать о CDN изображений как об API-интерфейсах веб-сервисов для преобразования изображений.
Другая стратегия — использовать векторные форматы изображений, такие как SVG. При ограниченном объеме кода изображение SVG можно масштабировать до любого размера. Дополнительную информацию см. в разделе Замена сложных значков на SVG .
Такие инструменты, как gulp-response или Response-images-generator, могут помочь автоматизировать процесс преобразования изображения в несколько форматов. Существуют также CDN изображений, которые позволяют создавать несколько версий либо при загрузке изображения, либо при запросе его со своей страницы.
Рекомендации для конкретного стека
AMP
Используйте поддержку srcset компонента amp-img , чтобы указать, какие ресурсы изображения использовать в зависимости от размера экрана. См. также Адаптивные изображения с набором исходных данных, размерами и высотой .
Угловой
Рассмотрите возможность использования утилиты BreakpointObserver в комплекте разработчика компонентов (CDK) для управления точками останова образа.
Друпал
Убедитесь, что вы используете собственные адаптивные стили изображений, предоставленные Drupal . Используйте адаптивные стили изображений при рендеринге полей изображений в режимах просмотра, представлениях или изображениях, загруженных через редактор WYSIWYG.
Гэтсби
Используйте плагин gatsby-image для создания нескольких изображений меньшего размера для смартфонов и планшетов. Он также может создавать заполнители изображений SVG для эффективной отложенной загрузки.
Джумла
Рассмотрите возможность использования плагина адаптивных изображений .
WordPress
Загрузите изображения непосредственно через медиа-библиотеку, чтобы убедиться, что необходимые размеры изображений доступны, а затем вставьте их из медиа-библиотеки или используйте виджет изображения, чтобы убедиться, что используются оптимальные размеры изображений (в том числе для адаптивных точек останова). Не используйте Full Size изображения, если их размеры не соответствуют их использованию. См. раздел «Вставка изображений в сообщения и страницы» .