Плагин Autoptimize — оптимизация CSS, JS, HTML

17.03.2018

Один из ключевых моментов в работе сайта это скорость загрузки страниц. В этом деле не стоит пренебрегать всеми возможными средствами — быстрый хостинг, оптимизация CSS и JS, а так же сжатием передаваемых документов. Сегодня речь пойдет о простом и полезном плагине Autoptimize, который поможет справиться с большим количеством задач по оптимизации документов и ускорении загрузки страниц.

Плагин Autoptimize прост в использовании и имеет не большое количество настроек, в то же время он выполняет огромную работу. В чем же преимущества использования плагина Autoptimize:

Объединяет все скрипты в один файл;

объединяет все стили в один файл;

оптимизирует CSS и JS;

сжимает html;

переносит скрипты и стили в подвал.

Эти 5 важных действия производит плагин без особых вмешательств со стороны вебмастера. Все возможные настройки плагина Autoptimize рассмотрим далее.

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

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

Установили и активировали, теперь перейдем к настройкам, для этого с административной панели переходим в пункт меню Настройки/Autoptimize.

Первым делом включаем сжатие HTML, кстати о способах включения сжатия на сайте WordPress я детально писал тут.

Первая галочка включит сжатие html документов;
вторая удалит комментарии, что также облегчит вес документа.

Первое это включение оптимизации JS, следующие пункты доступны в расширенных настройках, они открываются кнопкой в правом верхнем углу (Hide advansed setting);

Загружать скрипты в голове документа, это уменьшит возможность ошибок, но замедлит загрузку страницы;

так же как и в предыдущем варианте перетянет JS встроены в html в голову;

исключение JS из списка оптимизации, вы можете перечислить скрипты, которые плагин трогать не должен;

перезагрузить скрипт при JS-ошибке;

С html и JS разобрались, переходим к CSS.

Включаем оптимизацию CSS, при необходимости идем к дополнительным настройкам;

включает небольшие фоновые изображения в CSS, а не в отдельной загрузке;

удалить шрифты Google;

оптимизация встроенного CSS в html;

переносит CSS в хедер, загружает CSS после загрузки страницы;

встраивание всех CSS;

исключения файлов, которые не нужно оптимизировать.

Следующие настройки для более продвинутых пользователей:

Указываете расположение картинок используемых на странице, если они находятся на другом сервере;

каталог где будут расположены оптимизированные файлы;

ДА? Наверное ДА)

количество и характеристика файлов с которыми будет работать плагин;

Сохраняет оптимизированные файлы как статические.

После всех настроек сохраняем изменения и смотрим на полученные результаты. Как я и говорил настроек мало, но их вполне достаточно для оптимизации HTML, CSS и JS. Если что-то было не понятно спрашивайте в комментария.

Так же рекомендую изучить другую статью по ускорению сайта на WordPress.