SEO With Hugo (11) Minifying Html

HTML minification is the process of removing unnecessary or redundant data from an HTML file without affecting its functionality. This can include removing white space, comments, and shortening variable and function names. The goal of minification is to reduce the size of the HTML file, which can speed up page load times.

There are several benefits to minifying HTML:

• Faster page load times: Minified HTML files are smaller in size, which means they can be downloaded and parsed by the browser faster. This can result in a better user experience for visitors to your website.
• Reduced bandwidth usage: Minifying your HTML files can reduce the amount of data that needs to be transferred from the server to the browser, which can save on bandwidth costs.
• Improved SEO: Search engines like Google use page load times as a factor in determining search rankings. Minifying your HTML can help improve your website’s search engine optimization.
• Better code maintainability: By removing unnecessary data, minified code is easier to read and understand, making it easier to maintain and update in the future.
• There are many tools available to minify HTML, some of them are online, some of them are browser extensions, and others are command line tools. It’s important to test the minified code to ensure that it doesn’t break any functionality of the page and to validate the code using W3C validator.

To enable HTML minification in Hugo we need to add the following to config/_default/config.yaml:

minify:
  tdewolff:
    html:
      keepWhitespace: false

This will only minify HTML, it won’t touch CSS and JavaScript. To check if this is working you’ll have to run the Hugo server in production mode. You can double check if it is working correctly by looking at the file generated in the Hugo public folder.