Как ускорить загрузку JS скриптов, CSS и HTML сайта WordPress: плагин Autoptimize


Вступление

Плагины WordPress, отличные инструменты улучшить функционал сайта, имеющие один существенный недостаток. Плагины увеличивают, а в некоторых случаях, значительно увеличивают, скорость загрузки страниц сайта.

Почему плагины увеличивают скорость загрузки

Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.

Особенно «ругается» на это поисковик Google, а на сервисе проверок скорости загрузки сайта (//developers.google.com/speed/pagespeed/insights/), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.

Как решается проблема стилей и JS на WordPress

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

Плагин Autoptimize «обучен»  сжимать JS скрипты стили объединив их в один файл.

Принцип работы плагина Autoptimize (оптимизировать JS и CSS WordPress)

Плагин Autoptimize помогает оптимизировать JS и CSS WordPress следующим образом. Перед выводом страницы, плагин обходит HTML код страницы и находит все js файлы. Найдя их, он их вырезает и пишет их в общий файл. Ссылку на этот файл плагин размещает в конце страницы. То же действо плагин проводит с фалами стилей css, но ссылки на них плагин ставит в начале страницы.

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

Все слепки с оптимизируемых файлах плагин хранит в кэше плагина [wp-content/cache/autoptimize]. Со временем эта папка разбухает и может наблюдаться обратный эффект, скорость загрузки начинает расти. Я такую проблему не замечал, но читал на некоторых сайтах.

Более того, по умолчанию размер кеш-папки плагина ограничена и приходится её часто чистить. На особо посещаемых сайтах я увеличил эту папку до 10Гб (об этом чуть ниже), увеличение скорости загрузки не вижу.

Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe.

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

Я уверен, вы знаете, как установить плагин. Страница плагина: https://ru.wordpress.org/plugins/autoptimize. Настройки плагина элементарные, но всё-таки пройдемся по ним.

  • После активации плагина, для удобного доступа к настройкам плагина в меню консоли «Настройки» появиться отдельный пункт.
  • Вверху страницы есть маленькая ссылка, она откроет дополнительные настройки.

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

Важно! Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.

  • Если у вас много комментариев, есть кнопка сохранения HTML комментариев.
  • Особо интересна, бесплатное использование CDN Options. Если вы используете CDN технологии, можно указать ваш //cdn.example.com/.

Важно! Я не привожу советов по тонким настройкам плагина, потому что, на каждом шаблоне, сервере плагин может вести себя по-разному. Экспериментировать с настройками придется самостоятельно. В экспериментах, не забывайте чистить кеш плагина и учитывать, что ускорение не моментальное, кеш должен накопиться.

оптимизировать JS и CSS WordPress: Настройки плагина Autoptimize

Как увеличить размер cash хранилища Autoptimize

Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.

Решение проблемы вы можете найти на сайте автора. Я его озвучу и подтвержу из практики.

Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:

Устанавливают плагин «Code Snippets» (https://ru.wordpress.org/plugins/code-snippets/). Он нужен для простого добавления произвольного кода на свой сайт WordPress, без добавления пользовательских фрагментов в файл functions.php.

С помощью плагина вставляю следующий Snippet (на выбор):

Размер кеша 1Гб

add_filter('autoptimize_filter_cachecheck_maxsize','change_maxsize');

function change_maxsize() {

return 10*1024*1024;

}

Размер кеша 10Гб

add_filter('autoptimize_filter_cachecheck_maxsize','change_maxsize');

function change_maxsize() {

return 10*1024*1024*1024;

}

Этим я увеличиваю размер cash хранилища Autoptimize до 1 Gb или до 10 Gb.

размер cash хранилища Autoptimize
Было
увеличенный размер cash хранилища Autoptimize
Стало

Альтернативные плагины (плохо обновляются)

  • JS & CSS Script Optimizer (https://wordpress.org/plugins/js-css-script-optimizer/)
  • Better WordPress Minify (https://wordpress.org/plugins/bwp-minify/)

На этом всё! Я надеюсь вам удалось оптимизировать JS и CSS WordPress и ускорить его загрузку.

©www.wordpress-abc.ru

Статьи по теме


Отправить ответ

2 Комментарий на "Как ускорить загрузку JS скриптов, CSS и HTML сайта WordPress: плагин Autoptimize"

Уведомлять
500
Сортировать по:   новейший | прошлые

При активации Autoptimize перестает работать слайдер и некорректно отображается главная страница сайта