Minify HTML

Modified on Mon, 27 Sep, 2021 at 3:59 PM

Introduction

HTML minification is the process of removing unnecessary or redundant data from HTML code without affecting the browser's handling of the resource - for example, code comments and formatting, removing unused code, using variable names and shorter functions, etc.

When developers write code, they include line breaks, spaces, and comments to make the code easier to read, but your browser doesn't need to process it. So minification removes these elements. This will make the code virtually unreadable to humans, but computers don't care, they can still process it. White space is for us weak humanoids :). These useless parts add a few more bytes to the file size, making them larger than necessary.

Example

Without HTML minification

<!DOCTYPE html><span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
    <html itemscope itemtype="http://schema.org/QAPage" class="html__responsive">
    <head>
        <title>minify - HTML minification? - Stack Overflow</title>
        <link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d">
        <link rel="apple-touch-icon image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
        <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
        <meta property="og:type" content= "website" />
        <meta property="og:url" content="https://stackoverflow.com/questions/728260/html-minification"/>
        <meta property="og:site_name" content="Stack Overflow" />
        <meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" />
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:domain" content="stackoverflow.com"/>

With HTML minification

<!DOCTYPE html> <html itemscope itemtype="http://schema.org/QAPage" class="html__responsive"> <head> <title>minify - HTML minification? - Stack Overflow</title> <link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"> <link rel="apple-touch-icon image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a"> <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> <meta property="og:type" content="website"/> <meta property="og:url" content="https://stackoverflow.com/questions/728260/html-minification"/> <meta property="og:site_name" content="Stack Overflow"/> <meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:domain" content="stackoverflow.com"/> <meta name="twitter:title" property="og:title" itemprop="name" content="HTML minification?"/> <meta name="twitter:description" property="og:description" itemprop="description" content="Is there a online tool that we can input the HTML source of a page into and will minify the code?I would do that for aspx files as it is not a good idea to make the webserver gzip them..."/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.sstatic.net/Js/stub.en.js?v=a9d6afa86cdc"></script> <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=6a897dbbc53b" > <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=cef623441dc3" > <meta name="twitter:app:country" content="US"/> <meta name="twitter:app:name:iphone" content="Stack Exchange iOS"/> <meta name="twitter:app:id:iphone" content="871299723"/> <meta name="twitter:app:url:iphone" content="se-zaphod://stackoverflow.com/questions/728260/html-minification"/> <meta name="twitter:app:name:ipad" content="Stack Exchange iOS"/> <meta name="twitter:app:id:ipad" content="871299723"/> <meta name="twitter:app:url:ipad" content="se-zaphod://stackoverflow.com/questions/728260/html-minification"/> <meta name="twitter:app:name:googleplay" content="Stack >

Settings

keepcomment

This option keeps HTML comments in the code. Experience has shown us that removing HTML comments implies recurring bugs.

As the impact of such optimization is low, we have decided to disable this optimization by default.

WebPerf Impact

The expected impact is a reduction in the size of the HTML file. It is therefore downloaded more quickly by the browser. To a lesser extent, this also reduces parsing and execution time.

This optimization is basic and risk-free. It is a complement to gzip or brotli compression.

How to check it is working?

The HTML code of your page will no longer contain line breaks after activating HTML minification.

Dashboard Activation API Activation

curl -i -H 'Content-Type: application/json' -H 'Authorization: $myApiToken' -X PATCH https://api.fasterize.com/v1/configs/$config_id/rules -d '{"minifyhtml": { "active": true, "options": {"keepcomment": true} }}'

Recommendation

We advise you to activate this optimization systematically.

Was this article helpful?