Оптимизация CSS и JS в WordPress

Несколько дней подряд работаю над шаблоном, который недавно поменял. До этого стоял фиксированный шаблон, как бы я не бился с ним, адаптированным сделать я его не смог, поэтому пришлось поступить иначе – установить уже адоптированный шаблон и переделать его под себя. Сделал всю работу и решил проверить скорость загрузки сайта в PageSpeed, результаты меня, мягко говоря, поразили. Счетчик скорости показывал всего лишь 22/100, так никуда не годиться, что-то надо делать и я начал все оптимизировать. В итоге результат смог улучшить до 65/100, но и на этом я не собираюсь останавливаться. Своими методами, я с радостью поделюсь с вами, так что подписывайтесь на обновления в низу статьи и будьте всегда в курсе.


В этой статье мы рассмотрим плагин Autoptimize, вклад, конечно, он внес не большой, но все-таки немного помог, увеличив хоть как-то показатели. Перед показом страницы, плагин собирет все JS файлы в один и выводит в конце страницы, то же самое происходит и с CSS файлами. Кроме этого вдобавок он еще оптимизирует и код HTML. Рекомендаций его обязательно ставить, я не даю, но и не ставить тоже. В общем, выбор за вами, а за мной описание настроек.

Проходим стандартный процесс установки, после чего в настройках у вас появиться новый пункт Консоль > Настройки > Autoptimize


Основные настройки.

Отмечаем обязательно эти пункты:

  • Оптимизировать код HTML
  • Оптимизировать код JavaScript
  • Оптимизировать код CSS

Сохранять комментарии HTML – если в коде страницы есть какие-то важные комментария о работе плагинов (например, Super Cache выдает инфорцию на сколько страница стала загружаться быстрее) то нужно отметить этот пункт, в других же случаях отмечать его не стоит.

Generate data: URIs for images – что делает эта настройка, я так до конца не понял, какие-то изображения станут фоновыми, что в свою очередь тоже должно ускорить сайт.

Можно отметить, но толку большого не будет.

autoptimize


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

В вверху страницы есть кнопочка под названием “Show advanced settings”, после ее нажатия, всплывут дополнительные настройки.

Force JavaScript in <head> – плагин подключает JavaScript в конце страницы, но из-за этого могут появляться различные ошибки, при подобных проблемах просто отметьте этот пункт.

Look for scripts only in <head> — работать только со скриптами в <head> . Использовать желательно с предыдущей настройкой.

Exclude scripts from Autoptimize – список скриптов которые нужно исключить. Эти настройки лучше вообще не трогать.

Add try-catch wrapping – исключать нерабочие скрипты. Если вы не уверены в работоспособности скриптов на вашем сайте, отметьте этот пункт, и они будут исключены.

Look for styles only in <head> — производить работу только со стилями расположенными в <head>. Не понимаю, зачем вообще данная опция.

Inline and Defer CSS – стили CSS будут загружаться после загрузки HTML. Опять что-то странное, естественно не отмечаем.

Inline all CSS – встраивает стили CSS в HTML документ. Вес HTMLстраниц очень сильно увеличиться, активировать, тоже не стоит.

Exclude CSS from Autoptimize – та же история что и с исключением скриптов, только на этот раз со стилями. Как и в прошлый раз, советую вам ничего не изменять.

CDN Options – это тоже лучше не трогать.

Информация о КЭШе – при активации дополнительных настроек вылезает еще и статистика. Показывается место хранение кеша, сколько файлов храниться в кеше (на скрине подчеркнул). Если их количество превышает 80, то советую насторожиться, хорошо проверить ваш сайт и удалить плагин.

Save aggregated script/css as static files – отметить если у вас есть подозрение что сервер не правильно обрабатывает и сжимает файлы. Было отмечено по умолчанию, так решил и оставить.

Ну и самое веселое это странный вопрос – “Начнем?” И ответ “Да”. Конечно, я понимаю, что это, скорее всего информация, что плагин работает, но все равно выглядит забавно.

autoptimize2


Создавайте хорошие сайты. До встречи.

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

Комментарии (0)