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

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

Кэти Хемпениус
Кэти Хемпениус
Икс
Уна Кравец
Уна Кравец

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

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

Скриншот примера сайта

Макет

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

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

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

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

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

Аудит Lighthouse «Избегайте больших изменений планировки»

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

Исправить

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

Уведомление о файлах cookie отображается внизу страницы.

До:

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

После:

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

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

Изображений

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

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

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

Диаграмма, показывающая элемент 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 «Элементы изображения имеют явную ширину и высоту».

Аудит 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">
Изображение теперь загружается, не вызывая сдвига макета.

Шрифты

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

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

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

Смена макета

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

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

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

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

Снимок экрана шрифта, отображаемого в DevTools

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

Снимок экрана вкладки «Время» в DevTools

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

Снимок экрана вкладки «Инициатор» в 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> .

Анимации

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

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

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

Аудит Lighthouse «Избегайте некомпозитной анимации»

Исправить

Измените последовательность анимации 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 для большинства пользователей . Дополнительные сведения о веб-показателях см. в разделе «Изучение веб-показателей» .