Кусочки опыта: Уменьшение CLS при рендеринге изображений

Сайты Kentico Xperience позволяют маркетологам и контент-менеджерам создавать авторский контент и создавать страницы, на которых отображается текст, изображения и все остальное, что поддерживает HTML 😁.

Существует несколько способов добавления изображений в контент в Xperience:

Вставка в насыщенный текст
Пользовательский компонент конструктора страниц (виджет или секция)
Рендеринг с помощью Razor в представлении страницы или шаблоне.

Эти изображения могут быть получены из нескольких источников:

Медиатека
Вложения
Мета-файлы (для SKU)
Представления формы

Независимо от того, какой подход к рендерингу или комбинацию источников контента мы используем для изображений на наших сайтах, мы должны убедиться, что мы всегда отображаем эти изображения с соответствующими атрибутами HTML, и в наши дни это включает атрибуты width и height.

Но почему 🤔?

Содержание

📚 Что мы узнаем?
🌊 Кумулятивный сдвиг макета (CLS)
Уменьшение CLS с помощью изображений и HTML-атрибутов width и height
Получение размеров изображения в Xperience
Размеры изображений и медиафайлы
Всегда извлекайте полное изображение!
🏁 Заключение
Ссылки
#kentico
#xperience

📚 Что мы узнаем?

Что такое кумулятивный сдвиг макета (CLS)?
Как атрибуты width и height предотвращают сдвиг макета?
Как получить эту информацию программно?
Почему мы всегда должны получать содержимое изображения из базы данных?

🌊 Кумулятивный сдвиг макета (CLS)

Слышали ли вы когда-нибудь о кумулятивном сдвиге макета? Он определяется (Google) следующим образом:

CLS – это показатель наибольшего всплеска оценок сдвига макета для каждого неожиданного сдвига макета, который происходит в течение всего срока жизни страницы.

Сдвиг макета происходит каждый раз, когда видимый элемент меняет свое положение от одного фрейма рендеринга к другому. (Подробнее о том, как рассчитываются отдельные баллы за сдвиг макета, см. ниже).

Мы все сталкивались с этим на веб-сайтах. Что-то на странице наконец загружается, и кнопка перемещается, или текст, который мы читаем, смещается за пределы области просмотра.

Это не только чрезвычайно раздражает 😖, но и используется Google в качестве показателя качества сайтов. Большее количество CLS означает худший пользовательский опыт, и Google учитывает это при подсчете баллов в PageSpeed Insights, а значит, это влияет на поисковое ранжирование 😮.

Итак, теперь, когда ясно, что мы хотим уменьшить CLS на наших сайтах, как это влияет на отображение изображений в Kentico Xperience?

Уменьшение CLS с помощью изображений и HTML-атрибутов `width` и `height`

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

Теперь должно быть понятно, почему мы не должны рендерить изображения в Xperience только с атрибутом src:

<img src="@Model.ImagePath">

Вход в полноэкранный режим Выход из полноэкранного режима

Это практически гарантирует CLS в большинстве ситуаций 😭.

Однако браузеры уже некоторое время используют атрибуты width и height для предварительного распределения пространства для изображений 🧐.

Посмотрите эту замечательную статью на Smashing: Setting Height And Width On Images Is Important Again и ее продолжение How To Fix Cumulative Layout Shift (CLS) Issues.

Если мы знаем значения width и height для изображения и добавляем эти атрибуты/значения при его рендеринге, мы можем предотвратить CLS, сообщая браузеру, сколько места (по вертикали) потребуется изображению, основываясь на соотношении сторон изображения, вычисленном на основе этих двух значений 👏🏾.

Получение размеров изображения в Xperience

К счастью, Xperience хранит все размеры загруженного изображения в базе данных 🙏🏽. Однако, поскольку существует несколько способов хранения и отображения изображений в Xperience, нам понадобится несколько методов для получения размеров изображения.

Примечание: Xperience не рассматривает файлы .svg как изображения, что означает, что нам нужно настроить его поведение для получения размеров SVG изображений, когда они загружаются на сайт.

Мы можем использовать библиотеку Xperience SVG Media Dimensions, чтобы сделать это для нас автоматически!

Размеры изображений и медиафайлы

Библиотека Media Library, вероятно, является лучшим местом для хранения и управления изображениями в Xperience, поэтому мы будем использовать ее в качестве примера 👍🏿.

Чтобы выбрать файлы из медиатеки для полей типа страницы, вы, вероятно, будете использовать элемент управления Media Selection Form:

Это отобразит путь на вкладке Содержание страницы для этого элемента управления и предварительный просмотр изображения:

Получение изображения из медиатеки по полному пути не очень удобно для разработчиков, поэтому, к счастью, @mattnield несколько лет назад написал Regex, который способен получить FileGUID медиафайла из пути 💪🏼.

Получив FileGUID, мы можем запросить содержимое изображения из базы данных:

HomePage? page = (await pageRetriever.RetrieveAsync<HomePage>(
   query => query.TopN(1), 
   cancellationToken: token))
   .FirstOrDefault();

if (page is null || 
    string.IsNullOrWhiteSpace(page.Fields.HeroImageMediaFilePath))
{
   return;
}

string pattern = @"[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}";

Guid mediaFileGUID = Regex.Match(
    page.Fields.HeroImageMediaFilePath, 
    pattern, 
    RegexOptions.IgnoreCase).Value;

MediaFileInfo? file = (await mediaFileInfoProvider.Get()
    .WhereEquals(
        nameof(MediaFileInfo.FileGUID), 
        mediaFileGUID)
    .GetEnumerableTypedResultAsync(cancellationToken: token))
    .FirstOrDefault();

if (file is null)
{
   return;
}

// use Media File values ...

Войти в полноэкранный режим Выход из полноэкранного режима

Теперь, когда у нас есть полная MediaFileInfo, мы можем использовать все ее данные для рендеринга нашего элемента <img> 🙌.

Предположим, что у нас есть класс ImageViewModel, определенный следующим образом:

public class ImageViewModel
{
    public ImageViewModel(
        MediaFileInfo file,
        IMediaFileUrlRetriever urlRetriever)
    {
        Path = urlRetriever.Retrieve(file).RelativePath;
        AltText = file.FileDescription;
        Title = file.FileTitle;
        Width = file.FileImageWidth;
        Height = file.FileImageHeight;
    }

    public string Path { get; }
    public string AltText { get; }
    public string Title { get; }
    public int Width { get; }
    public int Height { get; }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Мы можем визуализировать наше изображение в Razor следующим образом:

<img src="@Model.Path"
     alt="@Model.AltText"
     title="@Model.Title"
     width="@Model.Width"
     height="@Model.Height">

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Потрясающе! Сдвиг макета предотвращен, а CLS уменьшен! 🎉🥳🎊

Всегда извлекайте полное изображение!

Вы можете подумать: “Это имеет смысл для изображений в верхней части страницы, но как насчет изображений в нижней части? Они не будут влиять на CLS, так что это много лишней работы для небольшой пользы”.

Во-первых, если мы отображаем изображение как часть виджета, мы не знаем, в каком месте страницы будет добавлен этот виджет, а видовые экраны разных устройств могут разместить этот контент в разных местах страницы. Мы должны разрабатывать защитный код и всегда получать эти значения из базы данных 😊.

Во-вторых, что гораздо важнее, мы должны всегда получать полное содержимое изображения из базы данных для обеспечения доступности 😎!

Все изображения в Xperience имеют поля Title и Description, которые переводятся в HTML атрибуты title и alt. Если мы хотим иметь доступные сайты (я бы сказал, что доступность – это одна из 7 вещей, которые нельзя упускать при создании сайта), то мы должны включать эти значения в каждое информационное изображение, которое мы отображаем (фоновые изображения, которые предназначены для дизайна, не имеют таких же требований).

Это означает, что нам все равно придется получить содержимое изображения 🤷🏽♀️, поэтому получить значения width и height не составит труда.

🏁 Заключение

Кумулятивный сдвиг макета (Cumulative Layout Shift, CLS) – это “мера наибольшего всплеска оценок сдвига макета для каждого неожиданного сдвига макета, который происходит в течение всего срока жизни страницы”. Это измерение отражает часть пользовательского опыта посетителей при посещении страницы и может негативно повлиять на поисковый рейтинг нашей страницы (SEO) 🙄.

Браузер не знает, сколько места выделить для изображений, пока они полностью не загрузятся, поэтому изображения часто влияют на CLS на сайтах. Чтобы предотвратить сдвиг макета для изображений, мы можем добавить значения width и height изображения в качестве HTML-атрибутов к элементу <img>. Это указывает браузеру, сколько места выделить для изображения на основе соотношения сторон 🧠.

Чтобы добавить эти значения на сайт Kentico Xperience, нам потребуется получить содержимое изображения из базы данных (в отличие от пути к изображению).

Чтобы улучшить доступность наших сайтов, мы хотим включить в изображения текст alt. Этот текст, автором которого являются контент-менеджеры и маркетологи, хранится в содержимом изображения в базе данных 🤗.

Поэтому, хотя добавление значений width и height в <img> может добавить некоторую сложность в наш код, мы все равно должны извлекать содержимое изображения из базы данных, чтобы обеспечить доступность наших сайтов 😉!

Как всегда, спасибо за прочтение 🙏!

Ссылки

Твиттер: Джен Симмонс – Изображения и CLS
Smashing Magazine: Установка высоты и ширины для изображений снова важна
Smashing Magazine: Как исправить проблемы с кумулятивным сдвигом макета (CLS)
Kentico Xperience: Медиатека
Kentico Xperience: Отображение содержимого из медиабиблиотек
MDN: Свойство Aspect-ratio CSS

Мы составили список ресурсов для разработчиков на GitHub-аккаунте Kentico. Ознакомьтесь с ним!

Если вы ищете дополнительные материалы по Kentico, проверьте теги Kentico или Xperience здесь, на DEV.

#kentico

#xperience

Или мою серию блогов о Kentico Xperience, например:

Kentico Xperience Xplorations
Эксперименты с виджетами Kentico Xperience MVC
Паттерны проектирования Kentico Xperience