Как минимизировать информацию CSS/JavaScript в WordPress (3 стратегии)

Вы хотите минимизировать документы на своей веб-странице WordPress?

Сокращение информации о WordPress CSS и JavaScript может ускорить их загрузку и ускорить работу вашего сайта WordPress.

В этом руководстве мы покажем вам, как просто минимизировать файлы CSS/JavaScript в WordPress, чтобы улучшить производительность и скорость.

Что такое минификация и когда она вам понадобится?

Выражение «уменьшить» используется для описания системы, которая уменьшает размер файла вашего веб-сайта. Он делает это, избавляясь от пробелов, линий и нежелательных людей из кода ресурса.

Вот пример стандартного кода CSS:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

После минимизации кода это будет выглядеть так:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

Как правило, рекомендуется минимизировать только те документы, которые отправляются в браузеры пользователей. Это файлы HTML, CSS и JavaScript.

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

Преимущество минимизации файлов данных заключается в улучшении скорости WordPress и общей производительности, учитывая, что компактная информация загружается быстрее.

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

Если вы пытаетесь достичь рейтинга 100/100 в программном обеспечении Google Pagespeed или GTMetrix, то минимизация CSS и JavaScript значительно повысит ваш балл.

Упомянув об этом, давайте взглянем на то, как без особых усилий минимизировать CSS/JavaScript на вашей веб-странице WordPress.

Мы предложим более 3 различных вариантов, которые вы можете выбрать:

Все готово? Давайте начнем с нашего лучшего предложенного процесса.

Процесс 1. Минимизируйте CSS/JavaScript в WordPress с помощью WP Rocket

Эта методика проще и предлагается для всех потребителей. Он работает независимо от того, какой хостинг WordPress вы используете.

Сначала вам необходимо установить и активировать плагин WP Rocket. Дополнительные сведения см. в нашем поэтапном руководстве по настройке плагина WordPress.

WP Rocket — лучший плагин кэширования WordPress на рынке. Это позволяет вам очень легко внедрить кэширование в WordPress и значительно увеличить скорость веб-сайта и время загрузки веб-сайта.

Для получения дополнительной информации см. Наше руководство по установке и настройке WP Rocket в WordPress.

После активации вы хотите проверить веб-страницу « Настройки» »WP Rocket и перейти на вкладку «Оптимизация файлов».

Отсюда вам нужно будет взглянуть на решение для документов Minify CSS.

Затем WP Rocket отобразит вам предупреждение о том, что это может привести к разделению точек на вашем веб-сайте. Просто нажмите кнопку «Активировать Minify CSS». Вы можете постоянно деактивировать этот выбор, если он вызывает какие-либо проблемы с вашим интернет-сайтом.

После этого вам нужно будет прокрутить вниз до части документов JavaScript внизу.

Здесь просто установите флажок рядом с возможностью «Уменьшить файлы JavaScript».

Опять же, вы увидите предупреждение о том, что это может привести к поломке вашего веб-сайта. Просто нажмите кнопку «Активировать Minify JavaScript».

Сразу после этого никогда не игнорируйте нажатие кнопки «Сохранить настройки», чтобы сохранить настройки.

Теперь WP Rocket начнет минимизировать вашу информацию CSS и JavaScript. Вы можете очень очистить кеш в настройках плагина, чтобы убедиться, что он начинает использовать минимизированный CSS и JavaScript для будущего посетителя веб-страницы.

Техника 2. Минимизируйте CSS/JavaScript в WordPress с помощью SiteGround

Если вы применяете SiteGround в качестве поставщика услуг веб-хостинга WordPress, вы можете минимизировать файлы CSS, работая с SiteGround Optimizer.

SiteGround Optimizer — это плагин для общей оптимизации производительности, который работает в их собственной системе. Он хорошо работает с их сверхбыстрым PHP, чтобы увеличить периоды загрузки вашего сайта.

Просто установите и активируйте плагин SiteGround Optimizer на своем сайте WordPress. Для получения дополнительной информации ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.

После этого вам нужно щелкнуть меню SG Optimizer на боковой панели администратора WordPress.

Это просто приведет вас к настройкам SG Optimizer.

В этой статье вам нужно нажать кнопку «Перейти к внешнему интерфейсу» меньше, чем «Другие оптимизации».

На следующем мониторе вам нужно переключить переключатель на решение «Минифицировать файлы CSS».

В дальнейшем вам нужно будет переключиться на вкладку JavaScript и включить переключатель рядом с выбором «Минифицировать файлы JavaScript».

Это все! Теперь вы можете очистить кеш WordPress и посмотреть на свой сайт, чтобы загрузить уменьшенные версии документов CSS и JS.

Подход 3. Сократите CSS/JavaScript с помощью Autoptimize

Этот метод предлагается для потребителей, которые не находятся на SiteGround и не работают с WP Rocket.

Изначально необходимо настроить и активировать плагин Autoptimize. Дополнительные сведения см. в нашем поэтапном руководстве по установке плагина WordPress.

При активации вам нужно взглянуть на веб-страницу Options » Autoptimize , чтобы настроить параметры плагина.

Из этой статьи сначала вам нужно проверить параметр «Оптимизировать код JavaScript» в разделе «Параметры JavaScript».

После этого вам нужно прокрутить вниз до «Выбора CSS» и проверить поле рядом с опцией «Оптимизировать код CSS».

Никогда не забывайте нажимать кнопку «Сохранить настройки», чтобы сохранить настройки.

Затем вы можете просто нажать кнопку «Освободить кэш», чтобы начать работу с вашими мини-файлами данных. Плагин также можно использовать для борьбы с блокировкой рендеринга JavaScript и CSS в WordPress.

Мы надеемся, что эта публикация помогла вам минимизировать CSS и JavaScript на вашей веб-странице WordPress. Вы также можете ознакомиться с нашим руководством по оптимизации основных сетевых жизненно важных функций в WordPress и ознакомиться с нашим лучшим руководством по общей производительности WordPress.

Если вам понравилась эта публикация, не забудьте подписаться на наш канал YouTube для учебных пособий по фильмам WordPress. Вы также можете найти нас в Twitter и Facebook.