Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Leading Economist + ... пиктограмма - Как-то Так THIS     Economic literacy and web solutions
All on the topic: what, how and why. Actual things - in their own words.
Turn your quality WITH ME - BUTW !
If you don't like what you get, change what you give. © Carlos Castaneda     KAKTOTAK.BY - economic design and web development services (php/js - telegram, WordPress, Laravel, Vue, SEO)    Cooperation - on an ongoing basis    Be in the topic   -    SUBSCRIBE      My notes are ECONOMICS +  и  WEB Developer's Guide | php+js+seo   в Telegram   telegram  

WordPress Optimization: how to easily and quickly compress a website using Laravel Mix

WordPress Optimization: how to easily and quickly compress a website using Laravel Mix

In today's web space, site loading speed is of critical importance. It not only affects the bounce rate, but also plays an important role in positioning in search engines. One of the ways to achieve high speed is to compress assets such as CSS and JavaScript.

The WordPress CMS has a significant amount of resources, and therefore efficient and fast compression of its files becomes an important task to improve performance.

How using the Laravel Mix tool you can significantly improve the performance of your website on WordPress, and any other CMS.

Laravel Mix provides a convenient and flexible API mechanism for building Webpack for your application. In other words, it compiles and minimizes your project's resources, such as JavaScript, CSS, and images.

How to implement this procedure based on WordPress.

1. Install the necessary dependencies

First you need to install Node.js and npm, if you don't have them installed yet. Then install Laravel Mix in your WordPress project.

Open the terminal in the root folder of your WordPress site and run:

npm init -y
npm install laravel-mix --save-dev

2. Create a file webpack.mix.js

Create a file in the root directory of your WordPress sitewebpack.mix.js . In this file, you will determine which files need to be compressed and processed.

Sample content 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');

Don't forget to replace your-theme with the name of your theme.

3. Create folders for assets

Create the following directory structure in your theme:

/wp-content/themes/your-theme/
    /resources/
        /js/
            app.js
        /sass/
            app.scss

4. Configure Sass and JavaScript files

Create a app.js and app.scss inside the respective folders and add your styles and scripts.

5. Run the build

Assemble your files using Laravel Mix by running the following command:

npx mix

6. Connect compressed files in WordPress

Now connect the compressed files in your filefunctions.php of your theme:

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. Optimization

Don't forget to check your website optimization using tools like Google PageSpeed Insights to make sure everything is working as it should.

Compression of assets is an important step towards improving the performance of your site and improving its position in search engines.

автор - Михаленко Р.
M R. Автор - kaktotak.by Specialization: financial and economic design - modeling of business, investment projects of the real sector, analysis and evaluation of efficiency, optimization of the management decision system.

A wide range of web-based competencies for solving business problems.

Subscribe to my telegram channel - My notes are ECONOMICS +
Там я ничего не втюхиваю и не навязываю. Просто делюсь полезной информацией по экономической грамотности. Повышайте своё качество вместе со мной: что, как и почему в экономике на простом языке. Понятия, алгоритмы, процессы, микро- и макроаспекты и многое другое. Может, будет интересно !

And also - WEB Developer's Guide | php+js+seo
Notes and native solutions to simple local tasks in PHP, JS. Something about Laravel, WordPress, Vue and SEO.

  Personal assistance in economic design and web development:

  • Financial and economic modeling, analysis, accounting, business planning
  • Comprehensive web development/project support on the web (php/js, seo – Laravel, WordPress, Vue, telegram, administration, content, advertising in Yandex Direct

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

Administrator
126
0
Name
E-mail
Rating
Review

Currency Converter
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT- what is it about
ECONOMIC LITERACY
  Simple online solutions to problems of economics and finance  
I Want To Know Everything. Useful Tips