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

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

Вступление

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

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

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

Особенно «ругается» на это поисковик Google. На сервисе проверок скорости загрузки сайта (https://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 и WP Speed of Light.

Настройка плагина 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.

Было

Стало

Проблема чистки кэш плагина Autoptimize

08-04-2020. Со времени написания статьи плагин значительно изменился. Добавлена функция ленивой загрузки изображений и работа по оптимизации изображения не стороннем сервере. Плагин стал вновь радовать работой, но осталась проблема автоматической читки кеша.

Решить её можно так. Рекомендую, пока работает, использовать плагин “Autoclear Autoptimize Cache”. Он чистит именно кеш этого плагина по настройкам объёма. Работает гарантированно.

Второй вариант можно попробовать через код. Опять используем описанный выше плагин Code Snippet и делаем с его помощью такой сниппет:

//* Чистка по достижении кеша 512MB 
if (class_exists('autoptimizeCache')) {
    $secnewsMaxSize = 512000; 
    $statArr=autoptimizeCache::stats(); 
    $cacheSize=round($statArr[1]/1024);
    
    if ($cacheSize>$secnewsMaxSize){
       autoptimizeCache::clearall();
       header("Refresh:0");
    }
}