The Complete Guide To Compressing HTML On Any Server

Compressing your HTML traffic can have tremendous impact on benefitting your website. It creates a better user experience, and has been proven to keep readers longer on your site.

How to compress HTML on your web server depends on what technology it is running on. This complete HTML compression guide will show you how to do it on a number of popular systems.

Many servers today run on NodeJS and Express. So our first example will cover that.

How to compress HTML using Express.js compression middleware

To compress HTML using compression middleware in Node.js Express, you can use the compression module. To use this module, you need to first install it in your project by running the following command:

npm install compression

Once you have installed the compression module, you can use it in your Express app by requiring it and using it as a middleware. Here's an example:

const express = require('express');
const compression = require('compression');

const app = express();

// Use the compression middleware
app.use(compression());

// Your other app code here...

This will enable compression for all responses in your Express app.

Note that you need to use this middleware before any other middleware that sends a response, such as the app.use(express.static(...)) middleware that serves static files.

Alternatively, you can also use the compress option in the express.static middleware to enable compression for static files only. Here's an example:

app.use(express.static('public', { compress: true }));

This will enable compression for all static files served by the express.static middleware.

Using gzip compression on Apache server

To enable Gzip compression on an Apache server, you can add the following lines to your server's configuration file (usually called httpd.conf or apache2.conf):

# Enable mod_deflate

LoadModule deflate_module modules/mod_deflate.so
# Set the compression level

DeflateCompressionLevel 9
# Enable compression for the following MIME types

AddOutputFilterByType DEFLATE text/html text/plain
text/css text/xml application/javascript application/x-javascript

Make sure the last line doesn't have any line breaks. In this example a line break was added (where you should just use a space,) just so the value can fit into source code example.

So what's going on here?

This will enable the mod_deflate module, which allows Apache to compress responses using Gzip. The DeflateCompressionLevel directive sets the level of compression (from 1 to 9, where 9 is the highest).

The AddOutputFilterByType directive specifies which MIME types should be compressed. In this example, we are enabling Gzip compression for HTML, plain text, CSS, XML, and JavaScript files.

After adding these lines to your Apache configuration file, you need to restart the Apache server for the changes to take effect. To do this, you can use the following command (assuming that Apache is installed in the default location):

sudo service apache2 restart

After restarting the server, Gzip compression should be enabled for your site.

You can verify this by checking the response headers of your site using a tool like cURL or the developer tools in your web browser.

The Content-Encoding header should have a value of gzip if Gzip compression is working correctly.

Note that you may need to customize the configuration above based on your specific needs and server setup. For example, if you are using a different MIME type for your HTML files (such as text/x-html), you will need to add that MIME type to the AddOutputFilterByType directive.

Additionally, if you are using a different location for the mod_deflate module, you will need to update the LoadModule directive accordingly.

Using gzip compression with Nginx

To enable Gzip compression with Nginx, you can add the following lines to your server's configuration file (usually called nginx.conf).

If you don't know where your nginx.conf file is, go to where is nginx.conf article on this site.

# Enable Gzip compression
gzip on;

# Set the minimum level of compression
gzip_comp_level 5;

# Set the minimum length of text that will be compressed
gzip_min_length 256;

# Set the MIME types that will be compressed

gzip_types
    text/css
    text/javascript
    text/xml
    text/plain
    text/x-component
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    font/truetype
    font/opentype
    application/vnd.ms-fontobject
    image/svg+xml;

This will enable Gzip compression for the specified MIME types. The gzip_comp_level directive sets the level of compression (from 1 to 9, where 9 is the highest). The gzip_min_length directive sets the minimum length of text that will be compressed (in bytes).

After adding these lines to your Nginx configuration file, you need to restart the Nginx server for the changes to take effect. To do this, you can use the following command (assuming that Nginx is installed in the default location):

sudo service nginx restart

After restarting the server, Gzip compression should be enabled for your site.

You can verify this by checking the response headers of your site using a tool like cURL or the developer tools in your web browser.

The Content-Encoding header should have a value of gzip if Gzip compression is working correctly.

Note that you may need to customize the configuration above based on your specific needs and server setup. For example, if you are using a different MIME type for your HTML files (such as text/x-html), you will need to add that MIME type to the gzip_types directive.

Additionally, if you need to compress additional MIME types, you can add them to the gzip_types list.

Using Gulp build tool

To compress HTML using the Gulp build tool, you can use the gulp-htmlmin plugin.

This plugin allows you to minify HTML files by removing unnecessary whitespace, comments, and other redundant data.

To use this gulp-htmlmin, you need to first install it in your project by running the following command:

npm install gulp-htmlmin

Once you have installed the gulp-htmlmin plugin, you can use it in your Gulp task by requiring it and adding it as a step in your pipeline.

Here's an example of a Gulp task that minifies HTML files:

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

gulp.task('minify-html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('dist'));
});

In this example, the gulp.src method specifies the source files (in this case, all HTML files in the src directory). The htmlmin method minifies these files using the specified options (in this case, collapsing whitespace and removing comments). The gulp.dest method specifies the destination directory for the minified files (in this case, the dist directory).

After defining this task, you can run it using the gulp command:

gulp minify-html

This will minify all HTML files in the src directory and save the minified versions to the dist directory. Note that you can customize the options passed to the htmlmin method to control how the HTML is minified.

For example, you can specify additional options to remove attributes, remove optional tags, and more.

You can also add additional steps to your pipeline, such as gulp-if and gulp-replace, to further modify the HTML files before they are minified.

For more information, you can refer to the documentation for the gulp-htmlmin plugin.

Using Grunt task runner

To compress HTML using the Grunt task runner, you can use the grunt-contrib-htmlmin plugin.

This plugin allows you to minify HTML files by removing unnecessary whitespace, comments, and other redundant data.

To use this plugin, you need to first install it in your project by running the following command:

npm install grunt-contrib-htmlmin

Once you have installed the grunt-contrib-htmlmin plugin, you need to load it in your Gruntfile and configure it to run as a task.

Here's an example of a Gruntfile that minifies HTML files:

module.exports = function(grunt) {

  // Load the htmlmin plugin
  grunt.loadNpmTasks('grunt-contrib-htmlmin');

  // Configure the htmlmin task
  grunt.initConfig({
    htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          removeComments: true
        },
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['*.html'],
          dest: 'dist/'
        }]
      }
    }
  });

  // Register the default task
  grunt.registerTask('default', ['htmlmin']);
};

In this example, the htmlmin task is configured to minify all HTML files in the src directory using the specified options (in this case, collapsing whitespace and removing comments).

The minified files are saved to the dist directory. The htmlmin task is then registered as the default task, which means it will be run when you run the grunt command without any arguments.

After defining this Gruntfile, you can run the htmlmin task using the grunt command:

grunt

This will minify all HTML files in the src directory and save the minified versions to the dist directory.

Note that you can customize the options passed to the htmlmin task to control how the HTML is minified.

For example, you can specify additional options to remove attributes, remove optional tags, and more. You can also add additional tasks to your Gruntfile and configure them to run before or after the htmlmin task to further modify the HTML files before they are minified.

For more information, you can refer to the documentation for the grunt-contrib-htmlmin plugin.

Using html-minifier (standalone HTML compression tool)

To compress HTML using the html-minifier tool, you first need to install it on your system.

html-minifier is a standalone tool, so it does not require a build system like Gulp or Grunt.

To install html-minifier, you can use the following command:

npm install html-minifier -g

This installs html-minifier globally on your system, allowing you to use the html-minifier command from the command line.

Once html-minifier is installed, you can use it to minify an HTML file by running the following command:

html-minifier --collapse-whitespace --remove-comments input.html -o output.html

This command minifies the input.html file using the specified options (in this case, collapsing whitespace and removing comments) and saves the minified version to the output.html file.

Note that you can customize the options passed to html-minifier to control how the HTML is minified. For example, you can specify additional options to remove attributes, remove optional tags, and more.

You can also use the --input-dir and --output-dir options to minify multiple files at once.

For more information, you can refer to the documentation for the html-minifier tool.