Setka Editor и WordPress Настройка плагина Autoptimize

Настройка плагина Autoptimize

Плагин Autoptimize оптимизирует страницы сайта. Сжимает изображения, кэширует файлы, минифицирует JS и CSS. Это ускоряет загрузку страниц. При формировании страниц, Setka Editor использует специфические CSS и JS файлы. Неправильная оптимизация может нарушить их работу.

Чтобы оптимизация не меняла внешний вид контента Setka Editor, настройте Automtimize в соответствии с этим руководством.

 

Содержание

Какие CSS-файлы использует Setka Editor

Включать ли минификацию файлов?

Варианты настройки Autoptimize

Для Common CSS

Для Standalone CSS

Для Standalone critical CSS

Минификация всех стилей

Минификация всех стилей, кроме стилей Setka

 

Какие CSS-файлы использует Setka Editor

Setka Editor использует следующие CSS-файлы и инлайн-блоки:

 

1. Common CSS — общие правила для всех стилей, хранящихся в аккаунте Setka. 1 CSS-файл.

2. Standalone CSS —  3 CSS-файла со стилями, используемыми только в конкретном посте.

3. Standalone critical CSS — стили первого экрана. Ускоряют отрисовку контента, который пользователь видит в самом начале страницы. 3 inline CSS и 2 CSS-файла.

 

Для Setka Editor важна очередность подключения файлов. Поэтому, при использовании оптимизатора (Autoptimize или любого другого) в режиме Standalone или Standalone critical, важно сохранять последовательность CSS кода: Common CSS всегда должен подключаться первым.

 

Autoptimize оптимизирует только файлы, хранящиеся на вашем сервере. Поэтому,  включать Autoptimize для стилей Setka имеет смысл только если в настройках плагина Setka Editor отключена опция Enable Setka CDN files:

Screenshot-WordPress-Setka-Editor-Settings-CDN.png

 

Включать ли минификацию файлов?

Несмотря на то, что CSS-файлы Setka имеют расширение *.css, а не *min.css, содержимое этих файлов уже минифицировано. Поэтому, в минификации нет необходимости. Учитывайте также, что некоторые минификаторы могут повредить CSS.

 

Варианты настройки Autoptimize

Настройки Autoptimize зависят от того, какой тип вы CSS используете: Common, Standalone или Standalone critical. Чтобы выбрать тип CSS, перейдите в настройки плагина Setka Editor:

mceclip0.png

 

Здесь:

  • Default. Only load styles needed for a specific Setka Editor post. — использует Standalone CSS. Установлен по умолчанию.
  • Inline critical post styles into a page and load the rest of the styles asynchronously. — использует Standalone critical CSS.
  • Legacy. Load a combined CSS file with all your Setka Editor styles. — использует Common CSS. Устаревший вариант. Может замедлить загрузку страницы, и поэтому не рекомендуется.

 

Для Common CSS

Если используется Common CSS, перейдите в настройки плагина Autoptimize и установите следующие опции в блоке CSS Options:

  • Активируйте опцию Aggregate CSS-files.
  • Убедитесь, что в поле Exclude CSS from Autoptimize: нет строки wp-content/uploads/ . Если есть — удалите её.

Screenshot-WordPress-Autoptimize-CSS-Options-Common.png

 

Для Standalone CSS

Если используется Standalone CSS, перейдите в настройки плагина Autoptimize и установите следующие опции в блоке CSS Options:

  • Активируйте опцию Aggregate CSS-files?, если уверены, что CSS-файлы из Setka необходимо объединить со всеми остальными стилями на странице в один файл. В некоторых случаях эта оптимизация избыточна. CSS-файлы Setka уже содержат минимальное количество стилей. При активации опции, на каждой странице здесь будет использоваться разная комбинация из 3-х файлов. Поэтому эффект от ускорения отрисовки первого экрана в некоторых случаях будет перекрываться отсутствием кэша.
  • Убедитесь, что в поле Exclude CSS from Autoptimize: нет строки wp-content/uploads/ . Если есть — удалите её.

Screenshot-WordPress-Autoptimize-CSS-Options-Standalone.png

 

Для Standalone critical CSS

Стили Setka в режиме Standalone critical оптимизированы теми же методами, которые применяет Autoptimize. Поэтому, на стилях Standalone critical применять Autoptimize нет необходимости. Настроить Autoptimize можно двумя способами:

 

Минификация всех стилей

Используйте эти настройки, если необходимо объединить и минифицировать не только стили Setka, но и все остальные стили на странице. Перейдите в настройки плагина Autoptimize и установите следующие опции в блоке CSS Options:

  • Активируйте опцию Aggregate CSS-files?
  • Активируйте опцию Also aggregate inline CSS?
  • Убедитесь, что в поле Exclude CSS from Autoptimize: нет строки wp-content/uploads/ . Если есть — удалите её.

Минификация всех стилей, кроме стилей Setka

Используйте эти настройки, если необходимо объединить и минифицировать все стили, кроме стилей Setka. Перейдите в настройки плагина Autoptimize и установите следующие опции в блоке CSS Options:

  • Активируйте опцию Aggregate CSS-files?
  • Отключите опцию Also aggregate inline CSS?
  • В поле Exclude CSS from Autoptimize: добавьте строку wp-content/uploads/setka-editor/ .