Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Ведущий экономист + ... пиктограмма - Как-то Так THIS     Экономическая грамотность и web-решения
Всё по теме: что, как и почему. Актуальные вещи - своими словами.
Повышайте своё качество WITH ME - СПЭМ !
Если тебе не нравится то, что ты получаешь, измени то, что ты даешь. © Карлос Кастанеда     KAKTOTAK.BY - услуги по экономическому проектированию и web-разработке (php/js - telegram, WordPress, Laravel, Vue, SEO)    Кооперация - на постоянной основе    Будь в теме   -    ПОДПИШИСЬ      Мои заметки - ЭКОНОМИКА +  и  Справочник WEB-разработчика | php+js+seo   в Telegram   telegram  

Оптимизация WordPress: как легко и быстро сжать сайт с помощью Laravel Mix

Оптимизация WordPress: как легко и быстро сжать сайт с помощью Laravel Mix

В современном веб-пространстве скорость загрузки сайта имеет критическое значение. Она не только влияет на уровень отказов, но и играет важную роль в позиционировании в поисковых системах. Одним из способов достижения высокой скорости является сжатие ассетов, таких как 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, чтобы убедиться, что все работает как должно.

Сжатие ассетов — это важный шаг к повышению производительности вашего сайта и улучшению его позиций в поисковых системах.

автор - Михаленко Р.
M R. Автор - kaktotak.by Специализация: финансово-экономическое проектирование - моделирование бизнеса, инвестиционных проектов реального сектора, анализ и оценка эффективности, оптимизация системы управленческих решений.

Широкий спектр web-компетенций для решения задач бизнеса.

Подписывайтесь на мой телеграмм канал - Мои заметки - ЭКОНОМИКА +
Там я ничего не втюхиваю и не навязываю. Просто делюсь полезной информацией по экономической грамотности. Повышайте своё качество вместе со мной: что, как и почему в экономике на простом языке. Понятия, алгоритмы, процессы, микро- и макроаспекты и многое другое. Может, будет интересно !

А так же - Справочник WEB-разработчика | php+js+seo
Заметки и нативные решения простых локальных задач на PHP, JS. Кое-что про Laravel, WordPress, Vue и SEO.

  Персональная помощь в экономическом проектировании и веб-разработке:

  • Финансово-экономическое моделирование, анализ, учёт, бизнес-планирование
  • Комплексная web-разработка/поддержка проекта в сети (php/js, seo – Laravel, WordPress, Vue, telegram, администрирование, контент, реклама в Яндекс Директ

  telegram или форма обратной связи

Administrator
306
0
Имя
E-mail
Рейтинг
Отзыв

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
Хочу Всё Знать. Полезные Советы