WordPress как на ладони
wordpress jino

Сжатие стилей, скриптов и html с помощью Autoptimize

Первое что нужно сделать для оптимизации скорости загрузки страницы - это уменьшить количество http запросов. Один из способов сделать это в WordPress - это собрать все подключаемые скрипты и стили в один. Такая операция называется конкатенация (объединение, сцепление). Сделать такое объединение поможет плагин Autoptimize или его аналог. Об этом поговорим ниже.

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

Вам рекомендую поставить Autoptimize. По прошествии пары дней, зайти в настройки и посмотреть сколько там файлов в кэше. Если мало, то все отлично! Если много (100+), то рекомендую поискать другой плагин.

В качестве замены рекомендую отличный плагин от Котельницкого Евгения: JS & CSS Script Optimizer. Чтобы плагин работал, обязательно корректное подключение JS и CSS файлов.

Еще одна альтернатива: Better WordPress Minify. Поделились в комментариях, я его не пробовал.

Autoptimize объединяет все .css стили на странице в один файл и помещает его вверх документа. Также, объединяет все .js файлы и встроенные скрипты (<script>) и помещает их в конец документа. И есть возможность сжать саму HTML страницу (удалить лишние пробелы и переносы строк).

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

<link type="text/css" media="all" href="http://wptest.ru/wp-content/cache/autoptimize/autoptimize_62f7bd2b0c59ec523a3ee58f4b4afc5b.css" rel="stylesheet" />
<script type="text/javascript" defer src="http://wptest.ru/wp-content/cache/autoptimize/autoptimize_ca5ef19f1f6407e7e07eaff51df2fe80.js"></script>

С Autoptimize я познакомился недавно, плагин мне понравился и теперь я использую его везде. До недавнего времени мне как-то не удавалось найти общий язык с подобными плагинами, а вот Autoptimize подошел отлично - с ним почти ничего не ломается. До этого я пользовался своими наработками для объединения и сжатия скриптов. Но использовать этот плагин продуктивнее и удобнее.

Аutoptimize - последняя версия
Скачать последнюю версию Аutoptimize с каталога плагинов WordPress.org
Скачано: 350, размер: 166.5 KB, дата: 3.2 года назад

Плагин в каталоге WordPress →

После установки плагин ничего не сжимает, все функции нужно включать отдельно. Для этого нужно зайти на страницу настроек плагина (Настройки > Autoptimize). Она переведена на русский, правда, почему-то, частично, но этого достаточно чтобы разобраться. Настроек у плагина не много:

Страница настроек autoptimize

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

Решения проблем

Если возникли проблемы с работой скриптов или стилей, то можно попробовать настроить плагин. Для этого на странице настроек нажимаем на кнопку "Show Advansed Settings" и нам откроются дополнительные настройки.

autoptimize1

Forse 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?

Добавить обертку try-catch? - обернет каждый добавляемый в единый файл скрипт в комбинацию try{ }catch(e){ }. Нужно это чтобы нерабочий скрипт (с ошибкой) не прерывал работу нижеследующего кода.

autoptimize2

Genegate data: URLs for images?

Создавать data:УРЛы для картинок? - при включении маленькие background картинки в CSS будут встроены в создаваемый CSS файл в виде data: строки. Это позволит уменьшить запросы к серверу из css файла. Что-то у меня эта функция не заработала...

Look for styles only in <head>?

Искать стили только в <head>? - плагин обработает стили встречающиеся только в <head> части документа.

Defer CSS loading?

Отложить загрузку css? - стили будут загружены после полной загрузки HTML. Сложно представить в каких случаях это может пригодится...

Inline all CSS?

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

Exclude CSS from Autoptimize:

Исключить CSS из обработки: - также как для скриптом, указываем тут часть названия файла, которые не нужно объединять.

П.С. Автор плагина работает над своим детищем постоянно и совсем скоро ожидается новая версия 1.9.0.

Сжатие стилей, скриптов и html с помощью Autoptimize 45 комментариев
Полезные 8 Вопросы 2 Все
  • Сергей cайт: starper55plys.ru

    Спасибо. Очень интересный плагин. Вот только как быть с Huper Ceche? Сколько не экспериментирую, не могу понять: совместимы эти два плагина или взаимозаменяемы. На шаблоне twetiteen они совместно дали отличный результат - 89 для мобил по Page Speed. А на другом сайте, шаблон Fluid Blue, наоборот, совместно сажают сайт. Очень бы хотелось бы узнать Ваше мнение по этому поводу

    1
  • Самый нормальный и до ужаса прост в использовании плагин кеширования - WP Fastest cashe, только (использовать Pro версию), которую можно нагуглить на форумах. Потому как в не про урезан функционал. По гугл паже спиж выдает тот же результат, что и долгая и муторна настройка W3 Total Cache, использование которого к тому же ведет к периодическим лагам страниц.

    1
  • Руслан cайт: blogadmina.com

    Спасибо за описание плагина, сейчас испробую -)

    1
  • Александр cайт: bloogit.ru @

    Попробовал использовать плагин, однако показатели совсем не изменились? Почему такое может быть?

    Ответить2 месяца назад #

Здравствуйте, !

Ваш комментарий
Предпросмотр