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

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

    Tags

    Похожие статьи

    Добавить комментарий

    Закрыть