How to compress the generated HTML files?

1

I notice that all my generated files are not compressed. And there still exist comments not deleted.

Even though I make the env var JEKYLL_ENV to production, still no effect. So how do I delete all comments in generated HTML files (and get compressed)

2

Jekyll by itself does not compress. However, consider basing your layouts on this: http://jch.penibelst.de
Works well, though does not play nice with //-style comments in JavaScript; need to convert to
/* … */.
One more thing: If you’re using Sass, config like so:

sass:
  style: compressed # minification of compiled CSS
1 Like
3

you can use a node package to do it - html-minifier. Or Gulp tasks can do the same type of thing. Not sure about the comments, that is probably an option.

I use AWS amplify for a site and have that along with some other stuff minifying things, here is my package.json file.

{
  "name": "jekyll-amplify",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "dependencies": {
    "autoprefixer": "^10.0.2",
    "html-minifier": "^4.0.0",
    "htmlhint": "^0.14.2",
    "postcss": "^8.1.8",
    "postcss-cli": "^8.3.0",
    "uglifyjs-folder": "^2.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:jekyll": "jekyll b",
    "postbuild:jekyll": " npm run htmlhint || exit 0",
    "css:autoprefixer": "postcss -u autoprefixer -r --no-map _site/assets/css/site.css",
    "minify:html": "html-minifier --input-dir _site --output-dir _site --remove-comments --collapse-whitespace --file-ext html",
    "minify:js": "uglifyjs-folder _site/assets/js/ -e -x .js -o _site/assets/js/",
    "htmlhint": "npx htmlhint \"_site/**/*.html\"",
    "deploy": "npm run build:jekyll",
    "postdeploy": "npm run minify:html && npm run minify:js && npm run css:autoprefixer"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": ""
}

if you have node installed, you could add this to your project directory and then do npm i to install the dependencies and then npm run deploy should build your site and miniize all the things. Assuming you have paths setup like I do.

If you are not familiar with node then I probably wouldn’t recommend doing this.

1 Like
4

Not answering your question directly, but I went back and forth on minification a few times. My best experience was with using the minification of the CDN one of my sites is using. But that one also didn’t handle Alpine shorthand well (@click="" :class=""). Then I just search/replaced most of my HTML comments with Liquid comments ({% comment %}). I also use dashes more often: {%- -%}, to remove the leading and trailing spaces.

With GZIP enabled on the server, the remaining spaces really don’t impact performance.