Стили делятся на две категории:
- Критичные
Они должны быть загружены перед содержимым главной страницы, чтобы обеспечить правильную её отрисовку.
- Некритичные
Их можно загружать после содержимого главной страницы.
В большинстве случаев все стили критичные, как вы можете видеть по настройкам по умолчанию. Но иногда отдельные стили следует настраивать индивидуально.
Основные#
- Оптимизировать загрузку
Оптимизация путем встраивания в соответствии с подпараметрами. Поскольку большинство стилей критичные, встраивание увеличивает скорость страницы за счет уменьшения количества запросов к нашему серверу.
- Вставлять в тело как источник
Вставлять тело стиля в атрибут
src
вместо того, чтобы заменить его тегомstyle
. - Группировать критичные, группировать некритичные
Группировка увеличивает скорость страницы за счет уменьшения количества запросов к серверу, но не все стили совместимы с такой операцией. Если активен автоматический режим для некритических, то группирование для критических всегда безопасно.
- Выделять импорты
Извлекать и обрабатывать стили, включенные в другие стили директивой
@import
. - Минимизировать
Оптимизирует код CSS для уменьшения размера.
- Исправление структуры
Исправление некорректно вложенных блоков.
Шрифты#
- Оптимизировать загрузку
Просто добавляет CSS-атрибут
font-display: swap
к шрифтам, который откладывает их загрузку и увеличивает скорость загрузки содержимого страницы. - Включать в критичные стили
На некоторых сайтах браузер может некорректно отображать отложенные шрифты, объявленные в отдельном файле CSS. Это можно исправить с помощью включения этой опции.
Некритичные#
- Автоматически
Часть некритических стилей будет автоматически отделена от критических. Также, указанные селекторы CSS могут быть исключены, чтобы стать частью критических стилей.
- Вручную
- Инлайн
Включает все встроенные стили.
- Внутренние
Включает в себя все внутренние (собственные, размещенные на нашем сайте) стили.
- Внешние
Включает все внешние (размещенные на других сайтах) стили.
- Исключая
Стили с URL-адресами, идентификаторами или телами, соответствующие указанным регулярным выражениям, будут рассматриваться как критические. Добавлять можно сразу несколько выражений, размещая каждое на новой строке.
- Включая только
Только стили с URL-адресами, идентификаторами или телами, соответствующие указанным регулярным выражениям, будут считаться некритическими. Добавлять можно сразу несколько выражений, размещая каждое на новой строке.
- Инлайн
Ненужные#
Стили с URL-адресами, идентификаторами или телами, соответствующие указанным регулярным выражениям, загружаться не будут. Добавлять можно сразу несколько выражений, размещая каждое на новой строке.
Корректировки для отложенной загрузки скриптов#
На некоторых сайтах верстка зависит от скриптов. Поэтому, когда загрузка скриптов отложена, может потребоваться настройка верстки. Это раздел для определения различных стилей для корректной загрузки верстки перед загрузкой основных скриптов. По умолчанию уже есть некоторые предопределенные элементы, связанные с определенными компонентами сайта, которые могут быть использованы как примеры.
Эти стили добавляются на конкретную страницу только в том случае, если включена отложенная загрузка скриптов и страница не предназначена для AMP.
Это список стилей, которые будут добавлены на сайт в заданном порядке. Каждый элемент имеет следующие параметры:
- Включить
Это позволяет отключить элемент вместо его удаления.
- Необязательное описание для опознавания
Позволяет распознать цель заданных стилей. Например, какую конкретную проблему он решает.
- Код стиля
Код стиля. В селекторах можно использовать специальный класс тела для управления областью применения стилей:
- seraph-accel-js-lzl-ing
Этот класс удаляется из тега
body
при загрузке некритических скриптов. Таким образом, он позволяет применять стили только в период загрузки. - seraph-accel-view-XXX
Этот класс добавляется к тегу
body
, когда виды активны. Таким образом, он позволяет применять стили только для определенного вида, например, только на мобильных устройствах. XXX может бытьcmn
(означает общий вид, компьютер) или конкретным ярлыком, например,mobile
из заданных видов.
- seraph-accel-js-lzl-ing