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

Иметь лучшую производительность - мечта всех, кто управляет веб-сайтом, группирует и минимизирует ресурсы в WordPress - это одна из лучших вещей, которые мы можем сделать для этого, но это может быть очень сложно. Сгруппируйте все свои ресурсы (в основном, файлы CSS и JS), которые могут открыть ваш сайт, если вы не являетесь разработчиком, поскольку это может привести к конфликту.

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

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

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

Давайте научимся минифицировать JavaScript и 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.

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

• Группировка JavaScript: объединение нескольких файлов 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