Autoptimize — плагин для сжатия скриптов, стилей и html на WordPress

Описание работы плагина Autoptimize

плагины вордпресс

Принцип работы

Как сообщает разработчик плагина, Autoptimize используется для оптимизации сайтов и делает он это очень легко и просто. Он объединяет все скрипты и стили, сжимает их, кэширует и перемещает всё в верхнюю часть документа. Кроме того, он объединяет все .js файлы и встроенные скрипты (<script>) и помещает их в конец документа. Он также оптимизирует сам HTML-код, что делает страницы сайтов более легкими, а значит он увеличивает скорость загрузки его страниц. Для того, что бы производительность Autoptimize была более высокой, необходимо (или желательно) в «довесок» к нему использовать плагины кэширования, такие как WP Super Cache или HyperCache.

Работает плагин так: перед тем как вывести HTML код страницы, он находит и вырезает все .js файлы, оптимизирует и уменьшает их, записывает их в единый файл, сохраняет файл на сервере и размещает ссылку на этот единый файл в самом конце страницы, пред тегом </body>.  Выглядят эти оптимизированные файлы примерно вот так:

<script type=«text/javascript» defer src=«http://ogend.ru/wp-content/cache/autoptimize/autoptimize_ca5ef19f1f6407e7e07eaff51df2fe80.js»></script>

Аналогичная операция проводится и с .css файлами, только помещаются они в начало страницы.

<link type=«text/css» media=«all» href=«http://ogend.ru/wp-content/cache/autoptimize/autoptimize_62f7bd2b0c59ec523a3ee58f4b4afc5b.css» rel=«stylesheet» />

 

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

Настроек у плагина две. Основная и дополнительная. Разберем вначале основную настройку.

Основная настройка

После загрузки и активации плагина, из контекстного меню «Настроек» в админке выбираем наш плагин и открываем окно настроек.

По моим исследованиям и советам более опытных вебмастеров, установить в основных настройках можно такие опции (остальные необязательно).

  1. Оптимизировать код HTML
  2. Оптимизировать код JavaScript
  3. Оптимизировать код CSS
  4. Пожалуй еще Generate data: URIs for images (этот параметр используется для включения небольших фоновых изображения в самой CSS, а не в отдельной загрузке).

Основные настройки плагина Autoptimize

На этом, после сохранения, основные настройки плагина будут завершены.

Дополнительная настройка

Для того, чтобы открыть окно дополнительной настройки, вверху окна нужно кликнуть на «Show advanced settings». Теперь в основном окне настроек Autoptimize появятся дополнительные опции. Разберемся в них.

дополнительные опции настройки плагина Autoptimize

Force JavaScript in <head>?

Помещать javascript в <head>? — для лучшей производительности нужно помещать скрипты в конец HTML документа, но иногда из-за этого скрипты не работают. Опция полезна для тем на jQuery.

Look for scripts only in <head>?

Искать скрипты только в <head>? — особенно полезная опция в комбинации с предыдущей, когда используются темы на основе jQuery.  Данная опция может помочь держать размер кэша под контролем.

Exclude scripts from Autoptimize:

Опция предлагает исключить скрипты из обработки — часть названия скрипта или часть кода скрипта, если это встроенный в HTML скрипт.  Честно говоря я не понял ее сущность, но более опытные вебмастера рассказывают о ней вот на этом примере: если указать captcha, то подобные скрипты не будут затронуты:

<script src='http://site.ru/my_captcha.js'></script>

<sctipt>
	var foo;
	function foo_captcha(){
		// код
	}
</script>

Не понимаешь, лучше ничего в этой опции не трогать 🙂

Add try-catch wrapping?

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

Look for styles only in <head>?

Опция предлагает искать стили только в <head>? Это означает, что плагин обработает стили встречающиеся только в <head> части документа. Здесь я не устанавливал галочку.

Inline and Defer CSS?

Отложить загрузку css? — стили будут загружены после полной загрузки HTML. Зачем? Галочку не устанавливал.

Inline all CSS?

Встроить все CSS? — стили будут встроены в HTML документ. Если посетители вашего сайта в среднем просматривают не более одной страницы, то включить эту опцию можно, так как не будет лишнего запроса на получения css файла.  Но тогда увеличится размер HTML документа. Эту опцию тоже не активировал.

Exclude CSS from Autoptimize:

Исключить CSS из обработки: в окне по умолчанию (так же как и для скриптов — Exclude scripts from Autoptimize)  нужно указать тут часть названия файла, которые не нужно объединять. Ничего не изменял.

CDN Base URL

«Введите ваш корневой URL блога каталогов CDN, если вы хотите, чтобы CDN для изображений, упоминаемых в CSS». Ничего не понял, ничего не вводил.

Save aggregated script/css as static files?

По умолчанию файлы сохраняются как статические CSS / JS, снимите этот флажок, если ваш веб-сервер не правильно обрабатывать сжатие и окончания срока действия. Решайте сами. Я снял эту галочку.

дополнительные опции настройки плагина Autoptimize

На этом, дополнительные настройки плагина Autoptimize заканчиваются.  Сохраните изменения и очистите кэш.

Испытайте плагин некоторое время. Но через время просмотрите, что происходит в информации о кэше.

Достоинства и недостатки плагина Autoptimize

1. Дело в том, что, как отмечают некоторые вебмастера, Autoptimize, обладает не только положительными качествами, но и недостатками и некоторые из них отказались от него. А причина в том, что динамические скрипты создают сборную копий для каждого изменения. В итоге для каждого динамического скрипта создается огромный js файл до тех пор, пока не очистится кэш.  Это, конечно же, «грузит» сайт.

Динамические скрипты можно исключать, как вы поняли, в дополнительных настройках плагина. Хуже всего, когда таких динамических скриптов в вашем сайте много. Проверить же все можно, как я указывал немного выше — просмотреть работу плагина и информацию о кэше через пару дней. Если вы ничего не изменяли в дополнительных настройках (исключение скриптов) и файлов в кэше окажется много (более ста, например), нужно что-то предпринимать. Если не умеете или муторно это все — откажитесь от плагина.

кэш

2. Давайте обратимся к сервису Google Developers — «PageSpeed Insights». Уточните, как ваш сайт будет лучше работать (скорость загрузки страниц) — если у вас установлен и настроен  плагин Autoptimize или без него. Но вот беда, если плагин не работает, появляются предупреждения о необходимости сжатие ресурсов. Блокирующие ресурсы — коды JavaScrip, тпа _http://ogend.ru/…-includes/js/jquery/jquery.js?ver=1.11.1  и CSS — _http://ogend.ru/…wp-content/themes/ipin/css/bootstrap.css.

Если плагин активирован, появляются сообщения уже не о необходимости сжатия не  кодов JS и CSS, а страниц. Тех самых страниц, которые образуются в кэше.

_ http://ogend.ru/…ize_11cda2a8246e25006d08cf7eb77571da.php и т.п.

Чем их будет больше (а это зависит от количества запросов к сайту) — тем будут хуже грузиться его страницы.

Результаты исследований на одном из моих сайтов, показали, что скорость загрузки его страниц немного лучше, когда Autoptimize активирован. Но незначительно.

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

9 thoughts on “Autoptimize — плагин для сжатия скриптов, стилей и html на WordPress

  1. Роман:

    По опыту скажу что Better WordPress Minify лучше работает чем Autoptimize, больше настроек, да и не такой глюкавый со скриптами

  2. Геннадий:

    Отзывы о Better WordPress Minify разные: и положительные, и отрицательные. Но испытать можно. Установил и активировал. Будем посмотреть 🙂

  3. Максим:

    Спасибо, полезно.
    Понял, что лучше не ставить.
    Так не удобно картинки у тебя увеличивать, поставь simple-lightbox
    Или лучше не делай их активными.

  4. Геннадий Михайлюта:

    Поставил подобный плагин. Но в этой странице картинки максимальны и их не увеличишь. Переделывать неохота 🙂

  5. Надежда Хачатурова:

    Не дождусь, когда долбанет разработчиков вордпресс по башке, что нужно изначально как-то оптимизировать скрипты и стили. Да еще темы! Чем они навороченнее, тем больше грузят сайт. Причем, засунуто туда все, что надо и не надо. Несколько плагинов перепробовала, в том числе, и упомянутый в комментарии Better WordPress Minify, результат улучшается самую малость. А один плагин (сложное название Js & css (как-то так начинается) сам выдал при проверке столько скриптов, что вызвал нарекания у гугла!
    Простите, Геннадий, в сердцах высказалась! Пора менять движок, видимо, или хотя бы шаблон на современный, интегрируемый с магазином. Сайт большой, без ubermenu не обойтись никак, а там все на скриптах.

  6. Геннадий Михайлюта:

    JS & CSS Script Optimizer — установлен на моих блогах… Еще сжимаю картинки (Compress JPEG & PNG images), помимо того, что предварительно редактирую в проге сам. Да, вордпресс тоже не совершенен, а статью-инструкци, упомянутую Вами в FB, я тоже читал, но все равно, сам, того, что рекомендуют, не сделаю (малограмотный еще :)) — помочь ничем не могу.
    У себя оставил, уж давно все как и есть. А магазина нет, потому не напрягаюсь. Возможно скоро вообще блоги законсервирую или удалю. Надоело…

  7. Глеф:

    Надежда, а причём тут команда из WP, если у вас точно стоит левая тема, которая никак не связана с «гладкой» настройкой самого движка?
    Всё ручками и головой дописывается и вылизывается.

  8. андроид:

    НЕ знаю, я удалил этот плагин, не заметил никаких улучшений с ним.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *