Один из ключевых моментов в работе сайта это скорость загрузки страниц. В этом деле не стоит пренебрегать всеми возможными средствами — быстрый хостинг, оптимизация CSS и JS, а так же сжатием передаваемых документов.
Сегодня речь пойдет о простом и полезном плагине Autoptimize, который поможет справиться с большим количеством задач по оптимизации документов и ускорении загрузки страниц.2761″ />
Плагин 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. Если что-то было не понятно спрашивайте в комментария.