В современном веб-пространстве скорость загрузки сайта имеет критическое значение. Она не только влияет на уровень отказов, но и играет важную роль в позиционировании в поисковых системах. Одним из способов достижения высокой скорости является сжатие ассетов, таких как CSS и JavaScript.
CMS WordPress имеет значительный объем ресурсов, и поэтому эффективное и быстрое сжатие его файлов становится важной задачей для повышения производительности.
Как с помощью инструмента Laravel Mix можно значительно улучшить производительность вашего сайта на WordPress, да и любой другой CMS.
Laravel Mix предоставляет удобный и гибкий API механизм сборки Webpack для вашего приложения. Другими словами он выполняет компиляцию и минимизацию ресурсов вашего проекта, таких как JavaScript, CSS и изображения.
Как реализовать эту процедуру на базе WordPress.
1. Установите необходимые зависимости
Для начала вам нужно установить Node.js и npm, если они у вас еще не установлены. Затем установите Laravel Mix в вашем проекте WordPress.
Откройте терминал в корневой папке вашего WordPress-сайта и выполните:
npm init -y
npm install laravel-mix --save-dev
2. Создайте файл webpack.mix.js
В корневой директории вашего WordPress-сайта создайте файл webpack.mix.js
. В этом файле вы будете определять, какие файлы нужно сжать и обрабатывать.
Пример содержимого webpack.mix.js
:
const mix = require('laravel-mix');
mix.setPublicPath('wp-content/themes/your-theme/');
mix.js('wp-content/themes/your-theme/resources/js/app.js', 'js')
.sass('wp-content/themes/your-theme/resources/sass/app.scss', 'css')
.version();
mix.minify('wp-content/themes/your-theme/public/css/app.css');
mix.minify('wp-content/themes/your-theme/public/js/app.js');
Не забудьте заменить your-theme
на название вашей темы.
3. Создайте папки для ассетов
Создайте следующую структуру каталогов в вашей теме:
/wp-content/themes/your-theme/
/resources/
/js/
app.js
/sass/
app.scss
4. Настройте Sass и JavaScript файлы
Создайте app.js
и app.scss
внутри соответствующих папок и добавьте ваши стили и скрипты.
5. Запустите сборку
Соберите ваши файлы с помощью Laravel Mix, запустив следующую команду:
npx mix
6. Подключите сжатые файлы в WordPress
Теперь подключите сжатые файлы в вашем файле functions.php
вашей темы:
function theme_enqueue_scripts() {
wp_enqueue_style('app', get_template_directory_uri() . '/css/app.css', [], null);
wp_enqueue_script('app', get_template_directory_uri() . '/js/app.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
7. Оптимизация
Не забудьте проверить оптимизацию вашего сайта с помощью инструментов, таких как Google PageSpeed Insights, чтобы убедиться, что все работает как должно.
Сжатие ассетов — это важный шаг к повышению производительности вашего сайта и улучшению его позиций в поисковых системах.