Setting up a minifier plugin¶

Introduction¶

Even today, when most of us have quite fast internet connection, page size still matters to over feeling of fast page load and as one of the factors of SEO. For that reason, a good publishing tool, should allow optimizing image size and (less important) page code size optimization. Publisher for MkDocs has that ability, but it does not introduce new optimization algorithms, etc. It's using tools that are created by others and considered stable with a good performance, etc.

Installation¶

To simplify the entire process, below is presented a single way of installation of all the tools. If you just want to use a single tool or learn more about what tool is used for what type of file, please take a look below for a configuration section where it's described.

brew install pngquant oxipng mozjpeg node
npm install -f --no-fund svgo html-minifier-terser postcss cssnano postcss-svgo postcss-cli uglify-js

brew install pngquant oxipng

brew install mozjpeg

brew install node
npm install -f --no-fund svgo

brew install node
npm install -f --no-fund html-minifier-terser

brew install node
npm install -f --no-fund postcss cssnano postcss-svgo postcss-cli

brew install node
npm install -f --no-fund uglify-js

scoop bucket add main
scoop install pngquant oxipng mozjpeg nodejs
npm install -f --no-fund svgo html-minifier-terser postcss cssnano postcss-svgo postcss-cli uglify-js

scoop install pngquant oxipng

scoop install mozjpeg

scoop install nodejs
npm install -f --no-fund svgo

scoop install nodejs
npm install -f --no-fund html-minifier-terser

scoop install nodejs
npm install -f --no-fund postcss cssnano postcss-svgo postcss-cli

scoop install nodejs
npm install -f --no-fund uglify-js

sudo apt update
sudo apt install -y rustc pngquant libjpeg-turbo-progs nodejs
cargo install oxipng
npm install --no-fund -f svgo html-minifier-terser postcss cssnano postcss-svgo postcss-cli uglify-js

sudo apt update
sudo apt install -y rustc pngquant
cargo install oxipng

sudo apt update
sudo apt install -y libjpeg-turbo-progs

sudo apt update
sudo apt install nodejs
npm install --no-fund -f svgo

sudo apt update
sudo apt install nodejs
npm install --no-fund -f html-minifier-terser

sudo apt update
sudo apt install nodejs
npm install --no-fund -f postcss cssnano postcss-svgo postcss-cli

sudo apt update
sudo apt install nodejs
npm install --no-fund -f uglify-js

Configuration¶

To enable the built-in optimization plugin, the following lines have to be added to mkdocs.yml file:

plugins:
  - pub-minifier

Just like that, all optimization tools are enabled with optimal settings (according to my small experiments).

General¶

plugins:
  - pub-minifier:
      cache_enabled: true
      cache_dir: .pub_min_cache
      cache_file: .cache_files_list.yml
      exclude: []
      threads: 0

    .
    ├─ .pub_min_cache/
    │  └─ .cache_files_list.yml
    ├─ docs/
    └─ mkdocs.yml

JPEG optimization¶

JPEG image file size optimizations are done using MozJPEG tool. As we can read on the project website:

Using this tool reduces JPEG image file size up to 30% with almost no visible quality degradation. You can always try to change it by modification of default settings. Please have in mind that default values were set after my personal experiments and not always can be the most optimal one.

plugins:
  - pub-minifier:
    jpeg:
        cache_enabled: true
        enabled: true
        enabled_on_serve: false
        exclude: []
        extensions: [".[jJ][pP][gG]", ".[jJ][pP][eE][gG]"]
        djpeg_path: djpeg
        cjpeg_path: cjpeg
        jpegtran_path: jpegtran
        optimise: true
        progressive: true
        copy_meta: none
        smooth: 10
        quality: 85

Above you can find all possible settings with their default values. You don't have to provide them. Just use them if you want to change some settings. The description of the meaning of given setting, you can find below.

PNG optimization¶

PNG image file size optimizations are done using a combination of 2 tools:

1. pngquant - this is a tool that reduces PNG file size by changing a color palette and alpha channel. Despite those optimizations, generated images are compatible with all web browsers and operating systems.
2. oxipng - this is a tool that reduces PNG file size by a lossless optimized compression algorithm.

Using those tools together, can reduce PNG image file size by up to 70% with almost no visible quality degradation. You can always try to change it by modifying of default settings. Please have in mind that default values were set after my personal experiments and not always can be the most optimal one.

plugins:
  - pub-minifier:
    png:
        cache_enabled: true
        enabled: true
        enabled_on_serve: false
        exclude: []
        extensions: [".[pP][nN][gG]"]
        pngquant_enabled: true
        pngquant_path: ongquant
        pngquant_speed: 1
        pngquant_quality: 95
        oxipng_enabled: true
        oxipng_path: oxipng
        oxipng_max_compression: true
        strip: true

Above you can find all possible settings with their default values. You don't have to provide them. Just use them if you want to change some settings. The description of the meaning of given setting, you can find below.

SVG optimization¶

SVG vector image file size optimizations are done using SVGO tool. This is a Node.js-based tool. As we can read on the project website:

Using this tool reduces SVG vector image file size by up to 70% with no visible quality degradation. This tool has multiple plugins that impact the effectiveness of an optimization. At this time, the pub-minifier plugin doesn't allow changing the default settings of used SVGO plugins.

plugins:
  - pub-minifier:
    svg:
        cache_enabled: true
        enabled: true
        enabled_on_serve: false
        exclude: []
        extensions: [".[sS][vV][gG]"]
        svgo_path: svgo
        multipass: true

Above you can find all possible settings with their default values. You don't have to provide them. Just use them if you want to change some settings. The description of the meaning of given setting, you can find below.

HTML optimization¶

HTML file size optimizations are done using html-minifier tool. This is a Node.js-based tool. As we can read on the project website:

Using this tool reduces HTML file size by up to 30%. You can always try to change it by modification of default settings. Please have in mind that default values were set after my personal experiments and not always can be the most optimal one.

plugins:
  - pub-minifier:
    html:
        cache_enabled: true
        enabled: true
        enabled_on_serve: false
        exclude: []
        extensions: [".[hH][tT][mM]", ".[hH][tT][mM][lL]"]
        html_minifier_path: html-minifier
        case_sensitive: true
        minify_css: true
        minify_js: true
        remove_comments: true
        remove_tag_whitespace: false
        collapse_whitespace: true
        conservative_collapse: true
        collapse_boolean_attributes: true
        preserve_line_breaks: true
        sort_attributes: true
        sort_class_name: true
        max_line_length: 1024

Above you can find all possible settings with their default values. You don't have to provide them. Just use them if you want to change some settings. The description of the meaning of given setting, you can find below.

CSS optimization¶

CSS file size optimizations are done using PostCSS tool and some plugins:

• PostCSS CLI - this is a Command Line Interface for this tool,
• cssnano - compression tool plugin,
• postcss-svgo - inline SVG files optimization plugin using an SVGO tool (the same we are using for an SVG file optimization).

This is a Node.js based tool. As we can read on the project website:

Using this tool reduces CSS file size by up to 30%. At this time, the pub-minifier plugin doesn't allow changing the default settings of cssnano.

plugins:
  - pub-minifier:
    css:
        cache_enabled: true
        enabled: true
        enabled_on_serve: false
        exclude: []
        extensions: [".[cC][sS][sS]"]
        postcss_path: postcss
        skip_minified: true

Above you can find all possible settings with their default values. You don't have to provide them. Just use them if you want to change some settings. The description of the meaning of given setting, you can find below.

JS optimization¶

JS file size optimizations are done using UglifyJS tool. This is a Node.js-based tool. As we can read on the project website:

Using this tool reduces JS file size by up to 20%. At this time, the pub-minifier plugin doesn't allow changing the default settings.

plugins:
  - pub-minifier:
    js:
        cache_enabled: true
        enabled: true
        enabled_on_serve: false
        exclude: []
        extensions: [".[jJ][sS]"]
        uglifyjs_path: uglifyjs
        skip_minified: true

Above you can find all possible settings with their default values. You don't have to provide them. Just use them if you want to change some settings. The description of the meaning of given setting, you can find below.

Backlinks: