Хотите ли вы минифицировать файлы на своем сайте WordPress?
Минификация CSS и JavaScript файлов WordPress может ускорить их загрузку и ускорить ваш сайт WordPress.
В этом руководстве мы покажем вам, как легко минифицировать CSS/JavaScript файлы в WordPress для повышения производительности и скорости работы.
Что такое минификация и когда она необходима?
Термин «минифицировать» используется для описания метода, который делает размер файлов вашего сайта меньше. Это делается путем удаления пробелов, строк и ненужных символов из исходного кода.
Вот пример обычного кода CSS:
тело < margin:20px; padding:20px; color:#333333; background:#f7f7f7; >h1
После минификации кода он будет выглядеть следующим образом:
тело h1
Обычно рекомендуется минифицировать только те файлы, которые отправляются в браузеры пользователей. Это относится к файлам HTML, CSS и JavaScript.
Вы можете минифицировать и PHP-файлы, но их минификация не улучшит скорость загрузки страницы для ваших пользователей. Это потому, что PHP — это серверный язык программирования, то есть он работает на сервере до того, как что-либо будет отправлено в веб-браузер посетителя.
Преимуществом минификации файлов является повышение скорости и производительности WordPress, поскольку компактные файлы быстрее загружаются.
Однако некоторые эксперты считают, что улучшение производительности для большинства сайтов очень незначительно и не стоит того, чтобы тратить на это время. Минификация удаляет только несколько килобайт данных на большинстве сайтов WordPress. Вы можете уменьшить время загрузки страницы, оптимизировав изображения для веба.
Если вы пытаетесь достичь 100/100 баллов на Google Pagespeed или GTMetrix, то минификация CSS и JavaScript значительно улучшит ваш результат.
Сказав это, давайте рассмотрим, как легко минифицировать CSS/JavaScript на вашем сайте WordPress.
Мы рассмотрим 3 варианта, которые вы можете выбрать:
- Способ 1. Минификация CSS/JavaScript в WordPress с помощью WP Rocket (рекомендуется)
- Метод 2. Минификация CSS/JavaScript в WordPress с помощью SiteGround
- Метод 3. Минимизация CSS/JavaScript с помощью Autoptimize
Готовый? Давайте начнем с нашего наиболее рекомендуемого метода.
Метод 1. Минимизация CSS/JavaScript в WordPress с помощью WP Rocket
Этот метод проще и рекомендуется для всех пользователей. Он работает независимо от того, какой WordPress хостинг вы используете.
Во-первых, вам нужно установить и активировать плагин WP Rocket. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
WP Rocket — лучший плагин кэширования WordPress на рынке. Это позволит вам легко добавить кэширование в WordPress и значительно улучшить скорость сайта и время загрузки страниц.
Для более подробной информации смотрите наше руководство о том, как установить и настроить WP Rocket в WordPress.
После активации, вам необходимо посетить сайт Настройки » WP Rocket страницу и перейдите на вкладку «Оптимизация файлов».
Здесь вам нужно отметить опцию Minify CSS files (минимизировать файлы CSS).
WP Rocket покажет вам предупреждение о том, что это может нарушить работу вашего сайта. Далее нажмите на кнопку «Активировать минимизацию CSS». Вы всегда можете деактивировать эту опцию, если она вызывает какие-либо проблемы с вашим сайтом.
Далее, вам нужно прокрутить вниз до раздела JavaScript Files ниже.
Здесь просто установите флажок рядом с опцией ‘Minify JavaScript files’.
Опять же, вы увидите предупреждение о том, что это может нарушить работу вашего сайта. Перейдите и нажмите на кнопку «Активировать минимизацию JavaScript».
После этого не забудьте нажать на кнопку Сохранить изменения, чтобы сохранить ваши настройки.
WP Rocket начнет минифицировать ваши CSS и JavaScript файлы. Вы можете очистить кэш в настройках плагина, чтобы убедиться, что он начнет использовать минифицированные CSS и JavaScript для следующего посетителя сайта.
Способ 2. Минимизация CSS/JavaScript в WordPress с помощью SiteGround
Если вы используете SiteGround в качестве хостинг-провайдера WordPress, то вы можете минифицировать файлы CSS с помощью SiteGround Optimizer.
SiteGround Optimizer — это плагин для оптимизации производительности, который работает на их собственной платформе. Он хорошо работает с их Ultrafast PHP для улучшения времени загрузки вашего сайта.
Просто установите и активируйте плагин SiteGround Optimizer на своем сайте WordPress. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После этого вам нужно нажать на меню SG Optimizer в боковой панели администратора WordPress.
Это приведет вас к настройкам SG Optimizer.
Далее вам нужно нажать на кнопку ‘Go To Frontend’ в разделе ‘Other Optimizations’.
На следующем экране вам нужно включить тумблер рядом с опцией ‘Minify CSS files’.
Далее вам нужно переключиться на вкладку JavaScript и включить тумблер рядом с опцией ‘Minify JavaScript Files’.
Вот и все! Теперь вы можете очистить кэш WordPress и посетить свой сайт, чтобы загрузить минифицированные версии CSS и JS файлов.
Способ 3. Минимизация CSS/JavaScript с помощью Autoptimize
Этот метод рекомендуется для пользователей, которые не находятся на SiteGround и не используют WP Rocket.
Во-первых, вам нужно установить и активировать плагин Autoptimize. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
После активации вам необходимо посетить раздел Настройки » Автооптимизация страница для настройки параметров плагина.
Отсюда, сначала вам нужно отметить опцию ‘Optimize JavaScript Code’ в разделе JavaScript Options.
После этого вам нужно прокрутить вниз до опций CSS и поставить галочку напротив опции ‘Оптимизировать код CSS’.
Не забудьте нажать кнопку Сохранить изменения, чтобы сохранить настройки.
Затем вы можете нажать кнопку Empty Cache, чтобы начать использовать минифицированные файлы. Плагин также можно использовать для исправления блокирующих рендеринг JavaScript и CSS в WordPress.
Надеемся, что эта статья помогла вам минимизировать CSS и JavaScript на вашем сайте WordPress. Вы также можете ознакомиться с нашим руководством по оптимизации основных веб-функций в WordPress и следовать нашему руководству по производительности WordPress.
Источник: www.wpbeginner.com