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

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

  1. Объединяет все скрипты в один файл;
  2. объединяет все стили в один файл;
  3. оптимизирует CSS и JS;
  4. сжимает html;
  5. переносит скрипты и стили в подвал.

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

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

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

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

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

plagin-autoptimize

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

setting-autoptimize

  1. Первое это включение оптимизации JS, следующие пункты доступны в расширенных настройках, они открываются кнопкой в правом верхнем углу (Hide advansed setting);
  2. Загружать скрипты в голове документа, это уменьшит возможность ошибок, но замедлит загрузку страницы;
  3. так же как и в предыдущем варианте перетянет JS встроены в html в голову;
  4. исключение JS из списка оптимизации, вы можете перечислить скрипты, которые плагин трогать не должен;
  5. перезагрузить скрипт при JS-ошибке;

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

autoptimize-wordpress

  1. Включаем оптимизацию CSS, при необходимости идем к дополнительным настройкам;
  2. включает небольшие фоновые изображения в CSS, а не в отдельной загрузке;
  3. удалить шрифты Google;
  4. оптимизация встроенного CSS в html;
  5. переносит CSS в хедер, загружает CSS после загрузки страницы;
  6. встраивание всех CSS;
  7. исключения файлов, которые не нужно оптимизировать.

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

autoptimize-plagin-setting

  1. Указываете расположение картинок используемых на странице, если они находятся на другом сервере;
  2. каталог где будут расположены оптимизированные файлы;
  3. ДА? Наверное ДА)
  4. количество и характеристика файлов с которыми будет работать плагин;
  5. Сохраняет оптимизированные файлы как статические.

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

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