Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.

We continue today our tutorial on W3TC. You probably already know that it's a cache plugin, which allows you, among other things, to speed up your blog (improves its performance).

This tutorial is broken down into several parts. We have since started with the introduction to the cache and made some preliminary adjustments. You can see the different chapters below:

Part 2: Configuring minification

We are still in the configuration W3TC, but now let's talk about file compression.

Before accessing the menu Minify ", You must first activate" Minify In the general settings. If you have enabled the compression mode, and if it works properly on your site, then the settings for " minification That you see in this menu will be a simplified version of what is shown in the screenshots below.

In this tutorial, we cover the compression process ( minifying ) with W3TC. The " minification And the combination of JS and CSS are the essence of what we will see in this tutorial.

Minify: General

General settings in the menu Minify Has three options.

minify-general-w3tc-plugin-wordpress

The module " URL Rewrite "Should be enabled by default and you should leave this option as such, unless you prefer to see your CSS and JS files fetched using" http GET "headers rather than the normal URL structure.

Disable " minification For logged in users should not be changed. It is recommended not to provide logged in and disconnected users with different CSS and JS files.

Error notification " Minify Must be set for administrator notifications. This will allow them to be informed when there is an error.

The following sections " All minify ", Combine and move the" page components "option. This can break the presentation of your site. You should enable preview mode and keep an eye on your site as you make changes to make sure you don't damage your site layout.

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

Minify: HTML & XML

The section " HTML and XML From the Minify menu is simple. The checkboxes are intended to allow " minification ", of the' " inline CSS and JavaScript, omit minification streams, and allow breaking newlines.

minify-html-w3tc

With the exception of the option " Do not minify feeds Which must remain unchecked, your site speed should improve.

The text box of Ignored comments steams Is used to identify HTML comments that should not be removed when HTML is "compressed". Some linked comments will be in this domain by default in order to ensure that comments associated with Google AdWords and readers are not deleted. If your HTML code contains additional comments and you want to stay in the " minified Of HTML, add a term in this text box, so any comments with this expression will not be deleted.

Minify JS

If you have enabled compression JavaScript & CSS " in the menu " General Settings You will only be able to work with all the JavaScript resources at once and the menu you see will be a simplified version of the image below.

minify-js-w3tc

Do you want to sell your products on the internet?

Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.

If you have selected the manual method, you must scroll to the top of the menu Minify And select the wizard button. The latter lists the JavaScript and CSS files detected by W3TC. Select check all boxes for both JavaScript and CSS file types and click on " Apply And close. This will add the JavaScript and CSS files in the menu " Minify So that you can work with these manually.

Look at the box named " Operation in areas ". In this section, you can control whether JavaScript resources are " minified And combined with the option Minify Or if they are simply combined. The type " Embed Offers some options on how JavaScript resources are loaded. You can try each of the options of " nonblocking Until you find one that doesn't break your site's presentation, but if none of the options work, leave the defaults.

If you have selected the manual compression method in the general settings, you can work with each file individually by assigning it to a single template or to all templates and moving it to the " header ", the " body "Or below" body For granular control over where each file appears in the HTML document and how it is loaded. You can also " drag and drop »Files, to rearrange the order in which they are loaded in case some files depend on previous files to load correctly.

minify-js-compression

The optimal setting is to move the files from " header And load them one of the options of nonblocking "(Non-blocking). However, there is a very good chance that by doing this, the appearance of your site will be affected.

There is really no way around this by going through each file once, testing them in different places, and making sure the site loads correctly.

Minify CSS

There are four settings to reduce the available CSS files:

minification-css options

  • Enable : Enables minfication and the combination of CSS files.
  • combine only : Combine CSS files, but do not belittle them.
  • Preserved how removal : Removes comments from combined CSS files.
  • Line break removal: Removes newlines in combined CSS files.

Start by selecting all options except for " combines Only ". If the presentation of the site is different, uncheck " Preserved how removal " and " Line break removal ". If that does not correct the site, then use " combines Only ».

For the @import option, select " Process ».

If you selected " Car As a method of minification "General settings, then you will only see the first two sections of this menu. However, if you have the minification Manual, then you will see a CSS file management section.

If you haven't already added CSS files that will be managed, select the "Help" wizard, and select all the CSS files for your themes. Then rearrange the order of the files so that the most critical files are loaded first.

Minify: Advanced settings

In most cases, the default settings in the advanced section do not need much editing. However, you can use them to adjust the frequency with which JavaScript and CSS files are updated, the frequency with which expired files are deleted from the cache, and more.

tuning-of-the expiration des-files w3tc

The advanced section includes three fields to exclude specific pages, JS files and CSS files from the " minification ". If you find that some JS or CSS resources should never be compressed, you can isolate them by adding them to these domains. If you need help with the correct syntax, see " Use: General From the FAQ for instructions.

That's it for the minification options on W3 Total Cache, we will continue with the database cache.

2 shares
Share
tweet
Save2