Speed Cache: Resources Minification

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

From the dashboard click on Group and minify, enable "File Minification inclusion/exclusion (advanced)" parameter, then the Scan button to list your website files.

 

minification-file-cache

 

You can group all your JS, CSS and fonts files in a single click. The group file features include:

  • HTML minification: Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on
  • CSS minification
  • JS minification
  • Group CSS: Grouping several CSS files into a single file will minimize the HTTP requests number. Use with caution and test your website, it may generates conflicts.
  • Group JS from head only: Grouping several Javascript files into a single file will minimize the HTTP requests number. Group all script present in your head (not the ones from your body). This is the better option to avoid conflicts.  Use with caution and test your website features carefully
  • Group JS in head & body: Grouping several Javascript files into a single file will minimize the HTTP requests number. Group all script present in body and the ones from your head. This is the better option for ultimate performance research but beware and test your website, it may generate conflicts
  • Group fonts and Google fonts: Group local fonts and Google fonts in a single file to be served faster.
  • Defer CSS: Call CSS files at the end of the page load to eliminate render blocking elements
  • Defer JS: Call JS files at the end of the page load to eliminate render blocking elements
  • Exclude inline script: Exclude inline script from minification
  • Exclude inline style: Exclude inline style from minification

 

group-files

 

Content display pre-loading: Choose the effect (Fade effect/Loader) that will be applied before the CSS and JS is loaded to avoid bad display on slow connections
File Group exclusion: To avoid conflict or errors you may exclude files from the group process. Only relative path like in the example.

 

file-group-exclusion

 

By default, the files listed are the CSS, JS and font contained in your template and some from the media. If you want to minify all the files that are loaded on frontend (on all pages), we recommend to list the files and open the settings. You should go to Speed Cache Configuration > Minify & Group tab.

 

minify-listing

 

From here you can select the server folders where your CSS, JS & Fonts are located, for example: media/com_hikashop. Then just hit the minify green switcher or use the Toggle State button.

 

multi-activate-selection