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

Код любого сайта состоит из смеси html-кода, скриптов Java и css для правильного отображения.

Цель любой оптимизации — объединить все JavaScript в один файл и убрать его в конец страницы, объединить все стили CSS в один файл и поместить его в верхнюю часть (head). Что и делает этот плагин Autoptimize.

Плагин Autoptimize

Но тут есть один нюанс, время загрузки сайта складывается из:

  • времени загрузки видимой части
  • + время загрузки оставшейся части.
  • Если, допустим, объединить 15 файлов стилей css в один, то общее время загрузки страницы уменьшится — легче загрузить один (хоть и большой) файл, чем 15 мелких. Но видимую часть вы не увидите, пока не загрузится этот большой файл. Решение этого вопроса рассмотрим в последней части статьи.

    Autoptimize опции JavaScript

    Настройки Autoptimize опции JavaScript

    Оптимизировать код JavaScript? Настройка просто оптимизирует (сокращает) код скриптов.

    На этом этапе (примем его за начальный) на странице нахожу 35 JavaScript.

    Объединить файлы скриптов? Настройка включает объединение файлов JavaScrip в один файл, который будет подгружаться из нижней части сайта. Это хорошо для «пузомерок», но иногда могут проявляться проблемы с отображением некоторых элементов на сайте.

    Autoptimize объединить встроенные JSОбъединить встроенные JS? Этот параметр помещает все ваши скрипты в html. Увеличения производительности я не заметил, но при этом плагин создает значительно больше своих JS файлов с кэшем (и размер общего кэша растет).

    Принудительно загрузить JavaScript в <head>? Некоторым JS скриптам, для корректной работы, необходимо подгружаться именно из верхней части сайта. Для этого и предназначен этот параметр, который добавляет свой скомпонованный JS файл в загрузку в верхней части сайта. Для «пузомерок» это конечно плохо, но один (пусть и блокирующий) файл JS лучше, чем двадцать.

    Исключить скрипты из Autoptimize. Если у вас на сайте перестал работать некоторый функционал, попробуйте исключить используемый им JavaScript из оптимизации. Например, сломался баннер — ищем его скрипт-файл и добавляем.

    Добавить try-catch обертывание? Если какой либо скрипт выдает ошибку, он может прервать работу последующего скрипта. Плагин оборачивает все скрипты, своим тегом, что позволяет пропустить ошибку и подгрузить все остальное правильно.

    Опции CSS

    Настройки Autoptimize опции CSS

    Оптимизировать код CSS? Оптимизация (сокращение) кода стилей CSS.

    Объединить файлы CSS? Опция включает объединение стилей-файлов CSS — они останутся загружаться в «верхней» части сайта, но вместо 10-20 файлов будет один.

    Объединять встроенный CSS? Стили прописанные HTML в разных местах (не файлами css), будут объединены в один кусок HTML.

    Создать данные: URI для изображений? Если у вас в файлах CSS прописываются пути к картинкам размером меньше 4 КБ, они не будут подгружаться как отдельный запрос, а будут идти в загрузке вместе с основным файлом CSS. Уменьшение количества запросов — всегда плюс для «пузомерок». Пример такой картинки — «галочка» в списках.

    Встроить и отложить выполнение CSS? Самый интересный и сложный пункт. Он позволяет интегрировать в HTML только тот CSS код, который используется для отрисовки видимой части сайта. И отложить загрузку всех остальных CSS и, самое главное, переместить их из шапки.

    Рассмотрим этот пункт отдельно ниже.

    Встраивать все CSS? Стили из файлов CSS и HTML прописываются в шапку (head) сайта в виде HTML. Визуально большой блок кода виден в шапке, что на мой взгляд может не понравиться поисковым системам.

    Исключить CSS из Autoptimize. Можно исключить из оптимизации некоторые CSS файлы, если это вызывает проблемы.

    Параметры HTML

    Настройки Autoptimize параметры HTML

    Оптимизировать код HTML? Это позволяет удалить лишние пробелы, переносы и пр. в коде страницы. Значительной производительности пункт не дает, но небольшой плюсик от поисковых систем мы получить возможно сможем.

    Сохранять комментарии HTML? В коде могут присутствовать пометки. Они не нужны для правильной работы кода и служат, в основном, для удобства редактирования, дабы не вспоминать какой код за что отвечает.

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

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

    Это тот пункт который я обещал рассмотреть отдельно. Помещая в шапку сайта только ту часть CSS, которая необходима для отрисовки видимой части первого экрана мы имеем:

    Плюсы
    • ускоренная отрисовка сайта для посетителей;
    • из верхней части сайта удаляется файл CSS.
    Минусы

    • увеличение времени полной загрузки сайта, т.к. сначала подгружается наш интегрированный код, а потом все стили подгружаются снова.

    Этот минус, обычно, никак не сказывается на рейтинге «пузомерок», да и вы скорее не заметите разницу в скорости загрузки сайта. А за удаление из хедера файла CSS, поисковая система погладит нас по головке.

    Я считаю этот пункт наилучшим компромиссом, который может предложить Autoptimize, в данном разделе.

    Как найти код для интеграции в критический CSS?

    После активации плагина Autoptimize убедитесь, что у Вас включены пункты:

  • Оптимизировать код CSS?
  • Объединить файлы CSS?
  • 1. Перейдите на любую станицу, нажмите правую кнопку мыши «просмотр кода страницы» или ctrl+u (для Google Chrome). Найдите css-файл созданный плагином, для этого воспользуйтесь поиском по странице (ctrl+F), введите: autoptimize.

    Название примерно такое: autoptimize_6f0ee70cc9b84a1d501e9aee91e4e9a6.css. Откройте этот файл и скопируйте его содержимое.

    2. Воспользуйтесь сервисом Critical Path CSS, во второй раздел которого поместите код всех стилей, скопированный ранее.

    3. В первое поле введите URL любой записи вашего сайта и нажмите «Create Critical Path CSS».

    4. После чего мы наконец получим, критический CSS для той страницы, URL которой Вы вводили. Осталось дело за малым, вставить полученный код в Autoptimize и сохранить настройки.

    Позже нашел более простой способ для подготовки «критического CSS» — сервис Critical Path CSS Generator. Закиньте основную страницу и получите стиль CSS в минифицированном виде (стили, которые потребуются для отображения первого экрана).

    Отзывы

    Неприятно удивило то, что на pagespeed/insights цифры стали хуже, чем были. Сейчас плагин отключила, но скриншоты сделала. Показательно — два огромных файла Autoptimize (JS и CSS) кушают ресурсов больше, чем куча мелких.

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

    В настоящее время использую Fast Velocity Minify, который на дефолтных настройках показывает примерно те же результаты.

    По мотивам https://blogforest.ru/nastroyka-autoptimize-plagina-sokrashhaem-i-obedinjaem-html-js-css.html



    Оцените, пожалуйста, статью, я старался :)

    Задайте вопрос в комментариях