CSS для веб-показателей

Методы CSS для оптимизации Web Vitals

Katie Hempenius

Una Kravets

То, как вы пишете стили и создаете макеты, может оказать большое влияние на Core Web Vitals . Это особенно справедливо для накопительного смещения макета (CLS) и отрисовки с наибольшим содержанием (LCP) .

В этой статье рассматриваются методы оптимизации Web Vitals, связанные с CSS. Эти оптимизации разбиты по различным аспектам страницы: макету, изображениям, шрифтам, анимации и загрузке. Попутно мы рассмотрим улучшение примера страницы :

Макет

Вставка контента в DOM

Вставка контента на страницу после того, как окружающий контент уже загружен, сдвигает все остальное на странице вниз. Это приводит к сдвигам макета .

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

Идентифицировать

Аудит Lighthouse «Избегайте больших сдвигов макета» выявляет элементы страницы, которые сместились. Для этой демонстрации результаты выглядят так:

Уведомление о файлах cookie не указано в этих выводах, поскольку само уведомление о файлах cookie не меняется при загрузке. Скорее, это приводит к смещению элементов, находящихся под ним на странице (то есть div.hero article ). Дополнительную информацию о выявлении и исправлении сдвигов макета см. в разделе «Отладка сдвигов макета» .

Примечание. Lighthouse анализирует производительность страницы только до события «загрузка страницы». Баннеры, реклама и другие виджеты с использованием файлов cookie иногда не загружаются до тех пор, пока не загрузится страница. Эти изменения макета по-прежнему влияют на пользователей, даже если они не отмечены Lighthouse.

Исправить

Разместите уведомление о файлах cookie внизу страницы, используя абсолютное или фиксированное позиционирование.

До:

.banner {
  position: sticky;
  top: 0;
}

После:

.banner {
  position: fixed;
  bottom: 0;
}

Другой способ исправить этот сдвиг макета — зарезервировать место для уведомления о файлах cookie в верхней части экрана. Этот подход одинаково эффективен. Дополнительную информацию см. в разделе «Рекомендации по уведомлению о файлах cookie» .

Примечание. Уведомление о файлах cookie — это один из нескольких элементов страницы, которые вызывают изменения макета при загрузке. Чтобы помочь нам поближе познакомиться с этими элементами страницы, последующие демонстрационные этапы не будут включать уведомление о файлах cookie.

Изображения

Изображения и наибольшая отрисовка содержимого (LCP)

Изображения обычно являются самым большим элементом Contentful Paint (LCP) на странице. Другие элементы страницы, которые могут быть элементом LCP, включают текстовые блоки и изображения видеопостеров. Время загрузки элемента LCP определяет LCP.

Важно отметить, что элемент LCP страницы может меняться от загрузки страницы к загрузке страницы в зависимости от содержимого, которое видно пользователю при первом отображении страницы. Например, в этой демонстрации фон уведомления о файлах cookie, главное изображение и текст статьи являются одними из потенциальных элементов LCP.

На сайте-примере фоновое изображение уведомления о файлах cookie на самом деле представляет собой большое изображение. Чтобы улучшить LCP, вы можете вместо этого нарисовать градиент в CSS, а не загружать изображение для создания эффекта.

Исправить

Измените CSS .banner , чтобы использовать градиент CSS, а не изображение:

До:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

После:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

Изображения и изменения макета

Браузеры могут определить размер изображения только после его загрузки. Если загрузка изображения происходит после того, как страница была отображена, но для изображения не было зарезервировано место, при появлении изображения происходит сдвиг макета. В демо-версии главное изображение вызывает сдвиг макета при загрузке.

Примечание. Феномен смещения макета изображений более очевиден в ситуациях, когда изображения загружаются медленно — например, при медленном соединении или при загрузке изображения с особенно большим размером файла.

Идентифицировать

Чтобы идентифицировать изображения без явных width и height , используйте аудит Lighthouse «Элементы изображения имеют явную ширину и высоту».

В этом примере как у главного изображения, так и у изображения статьи отсутствуют атрибуты width и height .

Исправить

Установите атрибуты width и height для этих изображений, чтобы избежать смещения макета.

До:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

После:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

Изображение теперь загружается, не вызывая сдвига макета.

Примечание. Другой подход к загрузке изображений — использование атрибутов srcset и sizes в сочетании с указанием атрибутов width и height . Это дает дополнительное преимущество в производительности, позволяя передавать изображения разного размера на разные устройства. Дополнительную информацию см. в разделе «Подача адаптивных изображений» .

Шрифты

Шрифты могут задерживать рендеринг текста и вызывать изменения макета. В результате важно быстро доставлять шрифты.

Задержка рендеринга текста

По умолчанию браузер не будет сразу отображать текстовый элемент, если связанные с ним веб-шрифты еще не загружены. Это сделано для предотвращения «вспышки нестилизованного текста» (FOUT) . Во многих ситуациях это приводит к задержке First Contentful Paint (FCP) . В некоторых ситуациях это приводит к задержке отрисовки наибольшего содержимого (LCP).

Примечание. По умолчанию браузеры на базе Chromium и Firefox блокируют рендеринг текста на срок до 3 секунд, если соответствующий веб-шрифт не загружен; Safari будет блокировать рендеринг текста на неопределенный срок. Период блокировки начинается, когда браузер запрашивает веб-шрифт. Если к концу периода блокировки шрифт все еще не загружен, браузер отобразит текст с использованием резервного шрифта и заменит веб-шрифт, как только он станет доступен.

Смена макета

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

В этом примере замена шрифта привела к смещению элементов страницы вверх на пять пикселей.

Идентифицировать

Чтобы просмотреть шрифты, загружаемые на определенной странице, откройте вкладку «Сеть» в DevTools и отфильтруйте их по шрифту . Шрифты могут представлять собой большие файлы, поэтому использование меньшего количества шрифтов, как правило, повышает производительность.

Чтобы узнать, сколько времени потребуется на запрос шрифта, нажмите вкладку «Время» . Чем раньше будет запрошен шрифт, тем быстрее его можно будет загрузить и использовать.

Чтобы просмотреть цепочку запросов шрифта, перейдите на вкладку «Инициатор» . Вообще говоря, чем короче цепочка запросов, тем быстрее можно будет запросить шрифт.

Исправить

В этой демонстрации используется API Google Fonts. Google Fonts предоставляет возможность загружать шрифты с помощью тегов <link> или оператора @import . Фрагмент кода <link> включает подсказку о ресурсе preconnect . Это должно привести к более быстрой доставке таблицы стилей, чем при использовании версии @import .

На очень высоком уровне подсказки ресурсов можно рассматривать как способ намекнуть браузеру, что ему необходимо установить определенное соединение или загрузить определенный ресурс. В результате браузер будет определять приоритет этих действий. При использовании подсказок ресурсов имейте в виду, что установка приоритета определенного действия отнимает ресурсы браузера у других действий. Таким образом, подсказки ресурсов следует использовать обдуманно и не для всего. Дополнительную информацию см. в разделе Как можно раньше установить сетевые подключения, чтобы улучшить воспринимаемую скорость страницы .

Удалите следующий оператор @import из таблицы стилей:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

Добавьте следующие теги <link> в <head> документа:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Эти теги ссылок инструктируют браузер установить раннее соединение с источниками, используемыми Google Fonts, и загрузить таблицу стилей, содержащую объявление шрифта для Montserrat и Roboto. Эти теги <link> следует размещать как можно раньше в <head> .

Примечание. Чтобы загрузить только подмножество шрифтов из Google Fonts, добавьте параметр API ?text= . Например, ?text=ABC загружает только те символы, которые необходимы для отображения «ABC». Это хороший способ уменьшить размер файла шрифта.

Анимации

Основной способ влияния анимации на веб-показатели — это изменение макета. Существует два типа анимации, которых следует избегать: анимации, запускающие макет , и «анимационные» эффекты, перемещающие элементы страницы. Обычно эти анимации можно заменить более производительными эквивалентами, используя свойства CSS, такие как transform , opacity и filter . Дополнительные сведения см. в разделе «Как создать высокопроизводительную CSS-анимацию» .

Идентифицировать

Аудит Lighthouse «Избегайте некомпонованных анимаций» может быть полезен для выявления неэффективных анимаций.

Внимание: аудит Lighthouse «Избегайте некомпозитных анимаций» выявляет только непроизводительные CSS-анимации ; Анимации, управляемые JavaScript (например, использование setInterval() для «анимации» элемента) вредны для производительности, но не будут отмечены этим аудитом.

Исправить

Измените последовательность анимации slideIn , чтобы использовать transform: translateX() вместо перехода свойства margin-left .

До:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

После:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

Критический CSS

Таблицы стилей блокируют рендеринг. Это означает, что браузер обнаружит таблицу стилей и прекратит загрузку других ресурсов до тех пор, пока браузер не загрузит и не проанализирует таблицу стилей. Это может задержать LCP. Чтобы повысить производительность, рассмотрите возможность удаления неиспользуемого CSS , встраивания критического CSS и отсрочки некритического CSS .

Заключение

Хотя еще есть возможности для дальнейших улучшений (например, использование сжатия изображений для более быстрой доставки изображений), эти изменения значительно улучшили веб-показатели этого сайта. Если бы это был реальный сайт, следующим шагом был бы сбор данных о производительности от реальных пользователей, чтобы оценить , соответствует ли он пороговым значениям Web Vitals для большинства пользователей . Дополнительные сведения о веб-показателях см. в разделе «Изучение веб-показателей» .