Как оптимизировать JS и CSS WordPress: ускоряем сайт WordPress
Опубликовано: 01.09.2018
Вступление
Плагины WordPress, отличные инструменты улучшить функционал сайта, имеющие один существенный недостаток. Плагины увеличивают, а в некоторых случаях, значительно увеличивают, скорость загрузки страниц сайта.
Почему плагины увеличивают скорость загрузки
Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.
Ускорение WordPress сжатие и объединение скриптов и стилей плагин Autoptimize
Особенно «ругается» на это поисковик Google, а на сервисе проверок скорости загрузки сайта ( https://developers.google.com/speed/pagespeed/insights/ ), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.
Оптимизация скорости сайта на #WordPress. Серия #6. Ускоряем виджеты
Как решается проблема стилей и 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.
Было СталоАльтернативные плагины (плохо обновляются)
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