web-dev-qa-db-fra.com

Minification HTML?

Existe-t-il un outil en ligne dans lequel nous pouvons entrer la source HTML d'une page et qui réduira le code?

Je le ferais pour les fichiers aspx car ce n’est pas une bonne idée de faire en sorte que le serveur web les gzip ...

99
Paulo

Peut-être essayez-vous HTML Compressor , voici un tableau avant et après montrant ce qu'il peut faire (y compris pour Stack Overflow lui-même):

Sorry, markdown has no concept of tables

Il propose de nombreuses sélections pour optimiser vos pages, y compris la réduction de script (ompressor, Compilateur Google Closure, votre propre compresseur) dans des endroits sûrs. Le jeu d'options par défaut est plutôt prudent, vous pouvez donc commencer avec cela et expérimenter en activant des options plus agressives.

Le projet est extrêmement bien documenté et soutenu.

63
john

Ne fais pas ça . Ou plutôt, si vous insistez dessus, faites-le après toute optimisation plus significative du site. Il est très probable que le coût/bénéfice de cet effort soit négligeable , en particulier si vous envisagiez d'utiliser manuellement des outils en ligne pour traiter chaque page.

Utilisez YSlow ou Page Speed pour déterminer ce que vous devez réellement optimiser vos pages. Mon hypothèse est que la réduction des octets de HTML ne sera pas le plus gros problème de votre site. Il est beaucoup plus probable que la compression, la gestion du cache, l'optimisation des images, etc. améliorent considérablement les performances de votre site. Ces outils vous montreront quels sont les plus gros problèmes. Si vous les avez tous résolus et que vous trouvez toujours que la minification HTML fait une différence significative, foncez.

(Si vous êtes sûr de vouloir y aller et que vous utilisez Apache httpd, vous pouvez envisager d'utiliser mod_pagespeed et d'activer certaines des options permettant de réduire les espaces, etc., mais sachez que - les risques .)

58
Zac Thompson

Voici une réponse brève à votre question: vous devriez minifier votre HTML, CSS, JS . Il existe un outil facile à utiliser appelé grunt . Cela vous permet d'automatiser beaucoup de tâches. Parmi eux [~ # ~] js [~ # ~] , [~ # ~] css [~ # ~] , [~ # ~] html [~ # ~] minification, concaténation de fichiers et et bien d'autres .

Les réponses écrites ici sont extrêmement obsolètes ou même parfois dépourvues de sens. Beaucoup de choses ont changé depuis 2009, alors je vais essayer de répondre correctement.

Réponse courte - , vous devez absolument minifier le HTML . C'est trivial aujourd'hui et donne environ 5% d'accélération . Pour une réponse plus longue, lisez toute la réponse

Auparavant, les gens réduisaient manuellement css/js (en le lançant dans un outil spécifique pour le minimiser). Il était un peu difficile d'automatiser le processus et nécessitait certainement des compétences. Sachant que de nombreux sites de haut niveau, même à l'heure actuelle, n'utilisent pas gzip (ce qui est trivial), il est compréhensible que les gens hésitent à minuter le langage HTML.

Alors pourquoi les gens réduisaient-ils js, mais pas html ? Lorsque vous réduisez JS, vous effectuez les opérations suivantes:

  • supprimer les commentaires
  • supprimer les espaces (onglets, espaces, nouvelles lignes)
  • change les noms longs en short (var isUserLoggedIn à var a)

Ce qui a donné beaucoup d'amélioration même au vieux temps. Mais en HTML, vous n’avez pas été en mesure de changer les noms longs, il n’y avait presque rien à commenter pendant cette période. Il ne reste donc plus qu’à supprimer les espaces et les nouvelles lignes. Ce qui ne donne que peu d'amélioration.

Un argument erroné écrit ici est que, comme le contenu est servi avec gzip, la minification n'a pas de sens. Ceci est totalement faux. Oui, il est logique que gzip diminue l’amélioration de la minification, mais pourquoi devriez-vous gzip des commentaires, des espaces, si vous pouvez les couper correctement et ne gzip que des parties importantes. C'est la même chose que si vous avez un dossier à archiver qui contient des conneries que vous n'utiliserez jamais et vous décidez simplement de le compresser au lieu de le nettoyer et de le compresser.

Un autre argument pour lequel il est inutile de faire une minification est que c'est fastidieux. C'était peut-être vrai en 2009, mais de nouveaux outils sont apparus après cette heure. Pour le moment, vous n'avez pas besoin de réduire manuellement votre majoration. Avec des choses comme Grunt , il est facile d’installer grunt-contrib-htmlmin (repose sur HTMLMinifier par @kangax) et de le configurer pour minifier votre code HTML. 2 heures suffisent pour apprendre le grognement et tout configurer, puis tout se fait automatiquement en moins d'une seconde. 1 seconde (que vous pouvez même automatiser pour ne rien faire avec grunt-contrib-watch ) n'est pas si grave pour environ 5% d'amélioration (même avec gzip).

Un argument supplémentaire est que CSS et JS sont statiques , et que HTML est généré par le serveur, vous ne pouvez donc pas le pré-minifier. C'était également vrai en 2009, mais actuellement plus de sites et de plus ressemblent à une application à une seule page, où le serveur est très fin. et le client effectue toute la logique de routage, de modélisation et autre. Donc, le serveur vous donne seulement [~ # ~] json [~ # ~] et le client le restitue. Ici vous avez beaucoup de HTML pour la page et différents modèles.

Donc pour finir mes pensées:

  • google est en train de minifier le HTML.
  • pageSpeed ​​ vous demande de minimiser html
  • c'est banal à faire
  • il donne ~ 5% d'amélioration
  • ce n'est pas pareil que gzip
33
Salvador Dali

J'ai écrit un outil Web pour minify HTML. http://prettydiff.com/?m=minify&html

Cet outil fonctionne en utilisant ces règles:

  • Tous les commentaires HTML sont supprimés
  • Les séquences de caractères d'espacement sont converties en caractères d'espacement unique
  • Les espaces blancs inutiles dans les balises sont supprimés
  • Caractères d'espacement entre deux balises où l'une de ces deux balises n'est pas un singleton est supprimée
  • Tout le contenu à l'intérieur d'une balise style est supposé être CSS et est donc minifié
  • Tout le contenu à l'intérieur d'une balise script est supposé être du JavaScript, à moins qu'un type de support différent ne soit fourni, puis minifié en tant que tel
    • La minification CSS et JavaScript utilise une forme fortement fourchue de JSMin. Ce fork est étendu pour prendre en charge CSS de manière native et prend également en charge la syntaxe SCSS. L'insertion automatique par des points-virgules est prise en charge pour la minification JavaScript. Toutefois, l'insertion automatique d'accolade bouclée n'est pas encore prise en charge.
    23
    austin cheney

    Cela a fonctionné pour moi:

    http://minify.googlecode.com/git/min/lib/Minify/HTML.php

    Ce n'est pas un outil en ligne déjà disponible, mais étant un simple PHP, il est assez simple, vous pouvez simplement l'exécuter vous-même.

    Cependant, je ne voudrais pas enregistrer les fichiers compressés. Faites-le de manière dynamique si vous en avez vraiment besoin, et il est toujours préférable d'activer la compression du serveur Gzip. Je ne sais pas à quel point cela est impliqué dans IIS/.Net, mais dans PHP, c'est aussi simple que d'ajouter une ligne au fichier d'inclusion global

    8
    adamJLev

    CodeProject a un exemple de projet publié ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=27949 ) pour gérer certaines des situations suivantes ...

    • Combinaison d'appels ScriptResource.axd en un seul appel
    • Compressez tous les scripts côté client basés sur la capacité du navigateur, y compris gzip/deflate
    • ScriptMinifier pour supprimer les commentaires, les indentations et les sauts de ligne.
    • Un compresseur HTML pour compresser tout le balisage HTML en fonction de la capacité du navigateur, y compris gzip/deflate.
    • Et - le plus important - un HTML Minifier pour écrire le code HTML complet en une seule ligne et le minimiser au niveau possible (en construction).
    6
    The Lazy DBA

    Pour la plate-forme Microsoft .NET, il existe une bibliothèque appelée WebMarkupMin , qui produit la minification du code HTML.

    En outre, il existe un module d'intégration de cette bibliothèque dans ASP.NET MVC - WebMarkupMin.Mvc .

    3
    Andrey Taritsyn

    try http://code.mini-tips.com/html-minifier.html , il s'agit de .NET Libary pour Html Minifier

    HtmlCompressor est une petite bibliothèque .NET rapide et très facile à utiliser qui minimise les sources HTML ou XML en supprimant les espaces, commentaires et autres caractères inutiles sans altérer la structure du contenu. En conséquence, les pages deviennent plus petites et se chargent plus rapidement. Une version en ligne de commande du compresseur est également disponible.

    1
    SonNguyen.ALI