Влияние элемента 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/

← На главную