Как группировать и минифицировать ресурсы в WordPress

Достичь наилучшей возможной производительности - это мечта всех, кто управляет веб-сайтом. Группировка и минификация ресурсов на WordPress - это одно из лучших действий, которые мы можем предпринять для этого, но это может быть действительно сложно. Группировка всех ваших ресурсов (в основном файлов css и js) может подвергнуть ваш сайт риску, если вы не являетесь разработчиком, поскольку это может вызвать конфликты.

WP Speed of Light - это лучшее решение для оптимизации вашего сайта на WordPress, поскольку у него есть множество опций, позволяющих сделать загрузку сайта быстрой с действительно удобной панелью управления, и да, одна из этих опций - группировка и минификация ресурсов. Включение/исключение отдельных файлов из процесса группировки и минификации является ключом к индивидуальной оптимизации без конфликтов.

Мы будем использовать пример сайта на WordPress для этого блога, и мы научимся делать это, чтобы процесс настройки всего был проще.

Как выполнить минификацию JS и CSS в WordPress

Давайте узнаем, как сделать минификацию JS и CSS в WordPress, но сначала нам нужно знать, что означает минификация «Минификация относится к процессу удаления ненужных или избыточных данных без влияния на то, как ресурс обрабатывается браузером - например, комментарии к коду и форматирование, удаление неиспользуемого кода, использование более коротких имен переменных и функций и так далее».

Теперь, что мы собираемся сделать, это провести тест скорости нашей страницы, чтобы увидеть изменения, для этого примера мы используем сайт с WooCommerce и некоторыми продуктами, поэтому в первый раз он загрузится немного медленно.

Да, 2,79 секунды для загрузки страницы, неплохо, но можно лучше, просто минифицируйте js и CSS и посмотрите разницу, перейдите к WP Speed of light > Ускорение > Группировка и минификация , вы сможете увидеть меню со всеми вариантами минификации. Бесплатная версия плагина включает опцию группировки и минификации, но визуальное исключение файлов доступно только в версии PRO Addon.

Опции дополнения PRO: Исключить встроенный скрипт (Исключить встроенный скрипт из минификации), переместить скрипты в нижний колонтитул (это позволяет ускорить ваш сайт, переместив все минифицированные скрипты в нижний колонтитул), Группировать шрифты и шрифты Google (Группировать локальные шрифты и шрифты Google в один файл для более быстрой доставки) и Расширенное исключение файлов.
 
У вас есть возможность минифицировать, как вы видите, JS, CSS, а также HTML, теперь просто активируйте эти опции, нажмите кнопку "Сохранить", и все ваши ресурсы будут минифицированы сразу же, это может вызвать проблемы, поскольку это расширенная конфигурация, но все можно исправить, исключив некоторый код и файлы (с помощью дополнения pro).

Теперь вся работа разработчика, которая могла занять часы, выполняется всего за несколько секунд.

Следующий шаг, оптимизация CSS и JS в WordPress

С помощью этого плагина мы позволим WordPress оптимизировать CSS и js, просто включив групповые опции на панели управления, перейдите к WP Speed of Light > Ускорение > Группировка и минификация, вы сможете увидеть панель управления с опциями для группировки CSS и js.

Эти опции позволяют вам:

• Группировка JS: Группировка нескольких файлов Javascript в один файл минимизирует количество запросов HTTP
• Группировка CSS: Группировка нескольких файлов CSS в один файл минимизирует количество запросов HTTP.

HTTP-запросы: это запросы, которые отправляются на сервер каждый раз, когда мы выбираем что-то или переходим на другую страницу на том же сайте, поэтому если мы сможем уменьшить количество этих запросов, время загрузки уменьшится.

Чтобы проверить, сколько файлов и скриптов можно сгруппировать на вашем сайте, просто откройте консоль браузера (правый клик > Проверить или F12) и откройте панель сети.

Затем вы можете перечислить все файлы, загруженные по типу, здесь в этом примере я кликнул только на список файлов JS.

Теперь, когда мы находимся в этих настройках, просто включите групповые опции (Групповой CSS и Групповой JS) и нажмите сохранить, имейте в виду, что эти опции должны использоваться с осторожностью и вам придётся протестировать вашу страницу, потому что это может вызвать конфликты.

Давайте серьёзно подойдём к оптимизации веса шрифта

Что? Другая оптимизация? Да! Вы сможете оптимизировать вес шрифта, и это будет так же просто, как включить эту опцию в настройках, просто перейдите в WP Speed of Light > Ускорение > Группировка и минификация > Группировка шрифтов и Google Fonts опция.
Опция группировки шрифтов и шрифтов Google позволит вам сгруппировать их в один файл для более быстрой доставки, это довольно удобно, поскольку большинство тем и макетов WordPress по умолчанию содержат 2 или более шрифтов со всеми начертаниями (обычный, жирный, курсив...)

Просто включите эту опцию, нажмите кнопку «Сохранить», и все шрифты будут сгруппированы.

Теперь, когда мы активировали все опции для минификации и группировки ресурсов, мы должны увидеть разницу во времени загрузки нашего сайта. Давайте проверим скорость.

Какая разница! С 2.8 до 0.56 секунд! Как мы вам сказали в начале этого поста, мы можем улучшить время загрузки ;)

Как использовать исключение минификации файлов

Минификация может вызвать проблемы на вашем сайте, в основном это происходит, когда вы группируете определенные файлы, содержащие ошибки в синтаксисе или подобные переменные, имена классов. Вот почему с помощью опции “исключение минификации файлов” вы сможете исключить файлы из процесса минификации и группировки, перейдите к WP Speed of Light > Ускорение > Группировка и минификация, вы сможете увидеть Расширенное исключение файлов опцию.

Чтобы использовать расширенное исключение файлов, вам нужно сначала запустить сканирование, включить опцию и нажать кнопку «Запустить сканирование».

  Чтобы иметь возможность перечислить скрипты, загруженные на вашем сайте, WP Speed of Light необходимо просканировать вашу папку, чтобы составить их список. Обычно они все содержатся в вашей папке /wp-content, которая группирует все ваши плагины и тему. Выберите эту папку (как минимум) и нажмите на “Сканировать сейчас”

Будет запущено сканирование, и когда оно будет завершено, нажмите на просмотр результатов.

Список файлов, классифицированных по типу (Все, JS, CSS, Шрифт), должен отображаться ниже. Если вы определили файл, вызывающий проблемы при активации группировки и минификации файлов, вы можете исключить его отсюда, используя простой переключатель ВКЛ/ВЫКЛ.

Это поможет вам исключить файлы и, таким образом, легко решить любую проблему, которая может возникнуть при минификации ресурсов… Процесс группировки и минификации все еще требует некоторой работы, особенно при тестировании, но это определенно стоит усилий, и вы всегда сможете проверить, как это работает, запустив тест скорости напрямую из WP Speed of Light.
 
Попробуйте WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light