Как группировать и минифицировать ресурсы в 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 > SpeedUp > Group & Minify, и вы увидите меню со всеми параметрами минимизации. Бесплатная версия плагина включает опцию группировки и минимизации, но визуальное исключение файлов доступно только в версии PRO Addon.

В PRO-версии дополнения доступны следующие опции: Исключение встроенных скриптов (исключение встроенных скриптов из процесса минификации), перемещение скриптов в футер (позволяет ускорить работу сайта, переместив все минифицированные скрипты в футер), группировка шрифтов и шрифтов Google (группировка локальных шрифтов и шрифтов Google в один файл для более быстрой загрузки) и расширенное исключение файлов.
 
Как видите, вы можете минифицировать JS, CSS и HTML. Просто активируйте эти опции, нажмите «Сохранить», и все ваши ресурсы будут минифицированы немедленно. Возможны некоторые проблемы, поскольку это расширенная конфигурация, но все можно исправить, исключив некоторые фрагменты кода и файлов (с помощью PRO-дополнения).

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

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

С помощью этого плагина мы позволим WordPress оптимизировать CSS и JS, просто включив параметры группировки на панели управления. Перейдите в WP Speed of Light > SpeedUp > Group & Minify, и вы увидите панель управления с параметрами группировки CSS и JS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 
Чтобы отобразить список скриптов, загруженных на вашем сайте, 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