Внести вклад
Энциклопедия ошибок

Runtime Performance Warnings

Изображения слишком большого размера (Oversized images)

При загрузке изображений собственный (intrinsic) размер загруженного файла сверяется с фактическим размером изображения на странице. Фактический размер рассчитывается на основе отрисованного размера изображения с примененными CSS-стилями, умноженного на коэффициент плотности пикселей устройства. Если загруженное изображение значительно больше (более чем на 1200px по любому из измерений), срабатывает это предупреждение. Загрузка изображений слишком большого размера может замедлить загрузку страницы и негативно сказаться на показателях Core Web Vitals.

Ленивая загрузка LCP-элемента (Lazy-loaded LCP element)

Самый крупный содержательный элемент на странице во время загрузки считается "LCP-элементом", что относится к Largest Contentful Paint (LCP) — одному из показателей Core Web Vitals. Ленивая загрузка LCP-элемента оказывает сильное негативное влияние на производительность страницы. При такой стратегии браузер должен завершить вычисления макета, чтобы определить, находится ли элемент в области просмотра (viewport), прежде чем начать загрузку изображения. В результате, когда Angular обнаруживает, что LCP-элементу был присвоен атрибут loading="lazy", срабатывает предупреждение.

@debugging Используйте URL изображения, указанный в предупреждении консоли, чтобы найти соответствующий элемент <img>.

Способы исправления изображений слишком большого размера

  • Используйте исходное изображение меньшего размера.
  • Добавьте srcset, если для разных макетов требуются разные размеры.
  • Переключитесь на использование встроенной директивы изображений Angular ( NgOptimizedImage), которая генерирует srcset автоматически.

Способы исправления ленивой загрузки LCP-элемента

Отключение предупреждений о производительности изображений

Оба предупреждения можно отключить по отдельности для всего сайта, используя провайдер в корне вашего приложения:

providers: [
  {
    provide: IMAGE_CONFIG,
    useValue: {
      disableImageSizeWarning: true,
      disableImageLazyLoadWarning: true
    }
  },
],