Оптимизация веб-производительности — это комплексное усилие, которое обеспечивает комфорт для пользователя на всех этапах его взаимодействия с веб-сайтом, выходя за рамки простого добавления нескольких строк кода или повышения уровня сжатия изображений. На этом пути разработчики часто упускают из виду, но эффект возникает от простых HTML-свойств. Речь идет о явном указании свойств <img> тега — width и height. Давайте подробнее рассмотрим, как эти свойства играют критическую роль в улучшении веб-производительности, в частности, в Core Web Vitals, таких как LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift).

Core Web Vitals: новый стандарт оценки пользовательского опыта

Core Web Vitals, введенные Google, представляют собой набор ключевых метрик для измерения качества пользовательского опыта на веб-сайте. Эти метрики также влияют на позиции в поисковых системах, поэтому разработчики должны обязательно их понимать и оптимизировать.

  • LCP (Largest Contentful Paint): метрика, измеряющая производительность загрузки страницы. Она указывает время, необходимое для рендеринга самого большого элемента контента в видимой области. Этот элемент обычно является основным контентом страницы (например, крупное изображение, большой блок текста, видеопостер и т.д.), а чем быстрее отображается LCP, тем быстрее пользователи воспринимают страницу как загруженную. Цель — 2,5 секунды или меньше.

  • CLS (Cumulative Layout Shift): метрика, измеряющая визуальную стабильность страницы. Она показывает общее количество неожиданных сдвигов макета (Layout Shift), которые происходят. Типичным примером будет ситуация, когда изображение загружается с задержкой, и текст или кнопки, находящиеся рядом, смещаются. Это может вызвать ошибки при нажатии или путаницу у пользователей. Цель — меньше чем 0.1.

  • FID (First Input Delay): метрика, измеряющая интерактивность страницы. Она определяет время, необходимое для того, чтобы браузер начал реагировать на первое взаимодействие пользователя со страницей (такие как нажатие кнопки или касание ссылки). Цель — 100 мс или меньше.

Из всех этих метрик свойства width и height особенно сильно влияют на LCP и CLS.

Проблемы при отсутствии свойств width, height

Если свойства width и height не указаны в изображении, браузер не может знать, какое пространство займет изображение, пока оно не будет загружено. Это может приводить к следующим проблемам.

  1. Задержка LCP: Браузер должен загружать и парсить изображение, чтобы узнать его размер. Это блокирует главный поток и задерживает расчеты макета страницы, что в конечном итоге приводит к увеличению LCP. Контент, который пользователю наиболее важен, появляется слишком поздно.

  2. Проявление CLS (сдвиг макета): Когда изображение загружается с задержкой, браузер поздно освобождает пространство для изображения. В этом процессе пустое пространство, где должно быть изображение, внезапно заполняется, и весь контент — текст, кнопки, другие изображения — смещается вниз, вызывая 'сдвиг макета'. Это серьезно ухудшает пользовательский опыт и может вызвать случайные нажатия. Например, когда вы читаете статью, и изображение загружается, прокрутка сдвигается вниз, или вы находитесь на грани нажатия кнопки, и вдруг появляется другой элемент, на который вы случайно нажимаете.

Волшебный эффект указания свойств width, height

Указание свойств width и height в теге <img> кажется очень простым, но оно в корне меняет способ, которым браузер рендерит изображение.

<img src="your-image.jpg" alt="Описание вашего изображения" width="800" height="600">

Добавление этих свойств позволяет достичь следующих оптимизационных эффектов.

  1. Улучшение LCP: Браузер может предсказать конечный размер изображения на основе указанных значений width и height, и заранее зарезервировать необходимое пространство. Это позволяет расчетам макета продолжаться без ожидания загрузки изображения. В итоге браузер может более эффективно управлять процессом рендеринга страницы и быстрее показывать пользователю основной контент, включая элемент LCP.

  2. Предотвращение CLS: Поскольку пространство для изображения заранее зарезервировано, при его загрузке не происходит сдвигов макета, и окружающий контент не смещается. Это обеспечивает визуально стабильный и комфортный опыт для пользователей и значительно улучшает балл CLS.

Использование расчетов соотношения сторон браузером:

Современные браузеры внутренне рассчитывают соотношение сторон (aspect-ratio) изображения на основе свойств width и height, предоставляя возможность CSS автоматически регулировать высоту при указании только ширины, тем самым поддерживая соотношение сторон. Это значительно помогает сохранить стабилизацию CLS при обработке изображений в адаптивном дизайне. Важно указывать width и height в HTML, даже если в CSS используется width: 100%; height: auto;

 

Тукс измеряет ширину и высоту Мона Лизы

Практические советы по применению

  • Применяйте ко всем <img> тегам: Убедитесь, что все теги <img> на веб-странице имеют указанные свойства width и height. Это должно применяться без исключений, начиная от аватаров пользователей и заканчивая крупными изображениями в герое. В средах серверного рендеринга (SSR), таких как Django, вы можете использовать библиотеку обработки изображений, такую как Pillow, чтобы получить ширину и высоту изображения в функции представления, а затем передать эти значения в шаблон для динамического отражения в HTML.

  • Используйте реальные размеры изображения: Указанные значения width и height должны основываться на оригинальных пиксельных размерах файла изображения. Даже если вы корректируете этот размер через CSS, HTML-свойства должны следовать фактическим пиксельным значениям.

  • Согласование с адаптивным дизайном: Используйте CSS свойства max-width: 100%; height: auto;, чтобы изображения подстраивались под родительский элемент. В этом случае HTML width и height предоставляют информацию о оригинальном соотношении сторон, необходимом для резервирования пространства браузером.

<style>
  .responsive-image {
    max-width: 100%;
    height: auto; /* поддерживает соотношение сторон при использовании с width/height */
  }
</style>
<body>
  <img src="responsive-example.jpg" alt="Адаптивное изображение" width="1200" height="800" class="responsive-image">
</body>
  • Использование тега <picture>: При использовании srcset и тега <picture> для предоставления изображений с различным разрешением и форматом, обязательно указывайте свойства width и height в внутреннем <img loading="lazy"> теге.

Заключение: небольшие усилия, значительное улучшение производительности

Указание свойств width и height в тегах изображений является одним из способов оптимизации веб-производительности, который дает 'наибольшее влияние при наименьших усилиях'. Эта простая привычка улучшает LCP веб-сайта и предотвращает ненужные сдвиги макета, снижая CLS и, в конечном итоге, обеспечивая пользователям более быстрый и визуально стабильный опыт. Если вы хотите улучшить показатели Core Web Vitals и повысить удовлетворенность пользователей как разработчик, сделайте добавление свойств width и height ко всем тегам <img> своей приоритетной задачей уже сегодня.