How to minify HTML, CSS & JS in ExpressionEngine 3?

Question

With the increasing relevance of website performance on mobile (see Google's upcoming mobile-first index for example) I'm looking for a way to minify the HTML that EE outputs.

I know that there's various plugins available for EE2 (such as https://devot-ee.com/add-ons/minimee) but can't find any for EE3.

Any advice on how others have managed this would be appreciated.

If the solution also manages minification of CSS & JS files that would be a bonus.

Thanks in advance,

Tom

Answer 1

There is a version of Minimee that will run in EE3 - you need to get it from Github rather than Devotee, and I'm not sure it is an official release, but I can confirm it works fine.

https://github.com/johndwells/Minimee/tree/version3

FWIW, it also appears to work OK in EE4

HTH

Answer 2

If you don't found any plugin for EE3, Why don't you just convert EE2 version minimee to EE3?

Do as given below:

1. Download EE2 version of minimee v2.1.13.

2. Create addon.setup.php in plugin folder and put this data inside it.

   <?php
   return array(
       'author' => 'John D Wells',
       'author_url' => 'http://johndwells.com/software/versions/minimee',
       'description' => 'Minimee: minimize & combine your CSS and JS files. Minify your HTML. For EE2 only.',
       'docs_url' => 'http://johndwells.github.com/Minimee',
       'name' => 'Minimee',
       'settings_exist' => true,
       'version' => '2.1.13',
       'namespace'   => 'EllisLab\Addons\Minimee',
   );
   

3. Important step if you are using PHP7 Open each and every PHP files of minimee plugin to remove: $this->EE =& get_instance(); and replace all instance of it from $this->EE to just have ee() (This step is important for PHP7 because PHP7 not accept variable as references.)

4. Open your config file and add below code:

   $base_path = rtrim($_SERVER['DOCUMENT_ROOT'], "/");
   $base_url = "http://" . $_SERVER['SERVER_NAME'];
   $config['minimee'] = array(
       /*Set path to your DOCUMENT_ROOT/cache directory*/
       'cache_path'        => $base_path .'/cache',
       'cache_url'         => $base_url .'/cache',
       'combine_css'       => 'yes',
       'combine_js'        => 'yes',
       // minify JS
       'minify_css'        => 'yes',
       // Minify HTML
       'minify_html'       => 'yes',
       // Minify JS
       'minify_js'         => 'yes',
   
       // Set this parameter to yes if you want to disable minimee (I use this for development purpose)
       'disable'           => 'no',
       'base_path'         => $base_path,
       'base_url'          => $base_url,
       'cachebust'         => '',
       'cleanup'           => 'yes',
       'css_library'       => 'minify',
       'css_prepend_mode'  => 'yes',
       'hash_method'       => 'sha1',
       'js_library'        => 'jsmin',
       'remote_mode'       => 'fgc'
   );
   

   5. Save all files after edits and Install plugin from backend.

   6. You are ready to use minimee now. You can use documentation from this Link

Note: When I try to use template css to minify, It was not working fo me. For an example:

If I use:

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet=includes/style}">

This was not works for me. Then I copy the css under css directory and call it as normal css that works for me:

<link rel="stylesheet" type="text/css" media="all" href="/css/styles.css">