Сышышь ты, выходи сюда,
поговорим !

Главная Новости

Как оптимизировать JS и CSS WordPress: ускоряем сайт WordPress

Опубликовано: 01.09.2018

видео Как оптимизировать JS и CSS WordPress: ускоряем сайт WordPress

Как увеличить скорость загрузки сайта (оптимизация фронтенда для Google PageSpeed)



Вступление

Плагины 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

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

Статьи связанные по теме:

rss