Minification HTML

Modifié le Lun, 27 Sept., 2021 à 3:58 H

Principe

La minification HTML fait référence au processus de suppression des données inutiles ou redondantes dans le code HTML sans affecter le traitement de la ressource par le navigateur - par exemple, commentaires de code et formatage, suppression du code inutilisé, utilisation de noms de variables et de fonctions plus courts, etc.

Lorsque les développeurs écrivent du code, ils incluent des sauts de ligne, des espaces et des commentaires qui facilitent la lecture du code, mais que votre navigateur n’a pas besoin pour le traiter. Donc, la minification supprime ces éléments. Cela rendra le code pratiquement illisible pour les humains, mais les ordinateurs ne s’en soucient pas, ils peuvent toujours le traiter. L'espace blanc est pour nous des humanoïdes faibles :). Ces parties inutiles ajoutent quelques octets supplémentaires à la taille du fichier, ce qui les rend un peu plus volumineux que nécessaire.

Exemple

Sans minification HTML

<!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/[email protected]?v=73d79a89bded" />
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:domain" content="stackoverflow.com"/>

Avec minification HTML

<!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/[email protected]?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 >

Paramètres de réglage

keepcomment

Cette option garde les commentaires HTML dans le code. L'expérience nous a montré que retirer les commentaires HTML était une source de bug récurrente.

L'impact d'une telle optimisation étant faible, nous avons décidé de désactiver cette optimisation par défaut.

Impact WebPerf

L'impact attendu est une diminution du poids du fichier HTML. Celui-ci est donc téléchargé plus rapidement par le navigateur. Dans une moindre mesure, cela réduit aussi le temps de parsing et d'execution.

Cette optimisation est basique et sans risque. Elle est un complément aux compression gzip ou brotli.

Comment vérifier son fonctionnement ?

Le code HTML de votre page ne contiendra plus de saut de ligne après l'activation de la minification HTML.

Activation via le dashboard

Activation via l'API

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} }}'

Recommandations

Nous vous recommandons d'activer cette optimisation systématiquement.