Влияние элемента img на производительность
Эдди Османи написал большую статью про элемент <img>
и его влияние на производительность — "The Humble img Element And Core Web Vitals".
В статье Эдди рассказывает про разные аспекты использования изображений, которые могут оказывать негативный эффект на метрики Core Web Vitals. Например, если у изображений не установлены атрибуты width
и height
, загрузка изображений будет приводить к смещению элементов на странице, ухудшая метрику Cumulative Layout Shift (CLS). Если основное изображение сайта загружается слишком поздно, например, после выполнения клиентского кода, то будет ухудшаться метрика Largest Contentful Paint (LCP). В этом случае нужно добавить изображение в HTML-разметку или загрузить его с помощью preload
, если предыдущий вариант не подходит.
Хорошая статья. Рекомендую почитать всем, кто занимается производительностью.
https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/