Minification HTML? [fermé]

99

Existe-t-il un outil en ligne dans lequel nous pouvons saisir la source HTML d'une page et 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 ...

Paulo
la source
19
Quand est-ce une mauvaise idée d'avoir le serveur gzip?
Chuck
5
J'ai lu cela parce que les pages aspx ne sont pas des fichiers statiques, elles ne seront pas mises en cache par IIS et donc il gzip la page à chaque demande ...
Paulo
23
... et est-ce un problème? À moins que votre serveur ne soit déjà à 99,9% du processeur, probablement pas. gzipping est la chose habituelle à faire et beaucoup plus efficace que n'importe quelle «minification».
bobince
2
Les réponses ici sont dépassées, sans compter que certaines d'entre elles sont fausses. Veuillez vérifier mon explication sur le problème et l'outil approprié .
Salvador Dali

Réponses:

63

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

Désolé, Markdown n'a pas de concept de tableaux

Il propose de nombreuses sélections pour optimiser vos pages jusqu'à et y compris la minimisation de script (ompressor, Google Closure Compiler, votre propre compresseur) où cela serait en sécurité. L'ensemble d'options par défaut est assez prudent, vous pouvez donc commencer avec cela et expérimenter l'activation d'options plus agressives.

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

Tim Post
la source
58

Ne fais pas ça . Ou plutôt, si vous insistez dessus, faites-le une fois que toutes les optimisations de site plus importantes sont terminées. Il y a de fortes chances que le coût / bénéfice de cet effort soit négligeable, surtout si vous prévoyez d'utiliser manuellement des outils en ligne pour traiter chaque page.

Utilisez YSlow ou Page Speed pour déterminer ce que vous devez vraiment faire pour optimiser vos pages. Je suppose que la réduction d'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. feront une plus grande différence sur les performances de votre site dans son ensemble. Ces outils vous montreront quels sont les plus gros problèmes - si vous les avez tous résolus et que vous constatez toujours que la minification HTML fait une différence significative, allez-y.

(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 pour réduire les espaces, etc., mais soyez conscient des risques .)

Zac Thompson
la source
25
Quel est le problème avec l'optimisation si le code minifié est facile à lire à l'aide de l'embellissement automatique?
12
Ce n'est probablement pas le plus gros problème - mais si c'est un processus trivial d'exécuter le balisage à travers un ensemble minifiant d'expressions régulières lors de la compilation de dev vers qa ou prod, alors pourquoi ne voudriez-vous pas envoyer des documents de balisage plus petits?
Will Peavy
26
Pas vraiment une réponse à la question d'origine :(
Chuck Le Butt
7
@Will, ce n'est presque certainement pas un processus trivial d'exécuter du HTML à travers des expressions rationnelles minimales, et même en utilisant un analyseur approprié, ce n'est probablement pas trivial ou rapide. De plus, contrairement à la minification JS / CSS, la minification HTML ne sera pas sans perte: n'importe quelle balise peut être stylée comme white-space: pre, et la minification détruirait le texte pré-formaté.
paupière
3
@eyelidlessness - J'ai actuellement des milliers de pages qui sont minifiées par des expressions régulières avant qu'elles ne soient servies. Cette fonction n'est pas une partie complexe ou coûteuse du système. ... D'un autre côté, si vous vouliez analyser le style calculé afin d'éviter de minifier des éléments stylés avec white-space:pre, alors oui, minifier du HTML serait plus complexe. Cependant, je ne sais pas pourquoi quelqu'un voudrait utiliser un espace blanc: pré plutôt que d'utiliser un élément preou code.
Will Peavy
34

Voici une réponse courte à votre question: vous devez minimiser votre HTML, CSS, JS . Il existe un outil facile à utiliser qui s'appelle grunt . Il vous permet d'automatiser de nombreuses tâches. Parmi eux, JS , CSS , minification HTML , concaténation de fichiers et bien d'autres .

Les réponses écrites ici sont extrêmement dépassées ou même parfois insensées. Beaucoup de choses ont changé par rapport à 2009, je vais donc essayer de répondre correctement.

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

À l'époque, les gens réduisaient manuellement les css / js (en les exécutant via un outil spécifique pour le réduire). Il était assez difficile d'automatiser le processus et nécessitait certainement des compétences. Sachant que beaucoup de sites de haut niveau n'utilisent même pas gzip (ce qui est trivial), il est compréhensible que les gens hésitent à minimiser le HTML.

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

  • supprimer les commentaires
  • supprimer les espaces (tabulations, espaces, nouvelles lignes)
  • changer les noms longs en courts ( var isUserLoggedInenvar a )

Ce qui a donné beaucoup d'améliorations même à l'ancienne. Mais en html, vous ne pouviez pas changer les noms longs pour faire court, il n'y avait presque rien à commenter pendant ce temps. Il ne restait donc plus qu'à supprimer les espaces et les retours à la ligne. Ce qui ne donne qu'une petite amélioration.

Un argument erroné écrit ici est que parce que le contenu est servi avec gzip, la minification n'a pas de sens. C'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 gzip seulement une partie importante. C'est la même chose que si vous aviez un dossier à archiver contenant des conneries que vous n'utiliserez jamais et que vous décidiez de simplement le compresser au lieu de le nettoyer et de le compresser.

Un autre argument pour lequel il est inutile de faire de la minification est que c'est fastidieux. C'était peut-être vrai en 2009, mais de nouveaux outils sont apparus après cette période. Pour le moment, vous n'avez pas besoin de réduire manuellement votre balisage. Avec des choses comme Grunt, il est trivial d'installer grunt-contrib-htmlmin (s'appuie sur HTMLMinifier de @kangax) et de le configurer pour minimiser votre html. Tout ce dont vous avez besoin, c'est comme 2 heures pour apprendre le grognement et pour tout configurer, puis tout se fait automatiquement en moins d'une seconde. Cela sonne 1 seconde (que vous pouvez même automatiser pour ne rien faire avec grunt-contrib-watch ) n'est pas vraiment si mal pour environ 5% d'amélioration (même avec gzip).

Un autre argument est que CSS et JS sont statiques et que le HTML est généré par le serveur, vous ne pouvez donc pas le pré-minifier. Ceci est également vrai en 2009, mais en plus et plus les sites sont à la recherche comme une seule application de page, où le serveur est mince et le client fait tout le routage, Templating et d' autres logiques. Donc le serveur ne vous donne que JSON et le client le rend. Ici, vous avez beaucoup de html pour la page et différents modèles.

Alors pour finir mes pensées:

  • google réduit le HTML.
  • pageSpeed vous demande de réduire le HTML
  • c'est trivial à faire
  • cela donne ~ 5% d'amélioration
  • ce n'est pas la même chose que gzip
Salvador Dali
la source
3
Minfying HTML n'est absolument pas trivial, car les espaces sont importants en HTML et la suppression d'un espace donné dépend du CSS. De plus, les clients légers sont terribles et ne peuvent, à mon avis, être donnés comme un bon argument contre les problèmes de minimisation du HTML dynamique. (Une bonne façon de le faire est de choisir un moteur de modèle [Haml, Jade, etc.] qui n'inclut pas d'espaces inutiles dans sa sortie rendue en premier lieu.)
Ry-
@minitech minimiser le HTML est trivial et il y a aussi peu de problèmes possibles avec les espaces (comme <span>). Tout d'abord, vous pouvez toujours trouver un moyen d'écrire du code HTML valide en le rendant indépendant des espaces. Vous pourriez également être surpris d'entendre, mais le minificateur JS / CSS peut également introduire un bogue - ce qui ne signifie pas que vous ne devriez pas l'utiliser. Donc, deux façons de résoudre votre problème: apprendre à écrire un balisage indépendant des espaces, tester votre produit avant / après minification (CSS / HTML / JS). Dans Minifier, vous pouvez également spécifier les espaces que vous souhaitez conserver.
Salvador Dali
Les minificateurs JavaScript corrects sur du code non insensé (c'est-à-dire du code qui ne se lit pas ou qui triche en chronométrant) ne peuvent pas introduire de bogue. Et non, il n'y a pas toujours un moyen d'écrire du HTML indépendant des espaces, en particulier parce que le HTML n'est, encore une fois, pas indépendant des espaces. Du tout. Assurez-vous de tester le copier-coller si vous pensez que les marges le réduiront. Spécifier les espaces que je veux conserver est une perte de temps (sauf pour Google)…
Ry-
@minitech pouvez-vous me montrer du CSS qu'il est impossible d'écrire de manière indépendante des espaces blancs? Je minimise le html depuis longtemps et je n'ai pas vu de problèmes jusqu'à présent.
Salvador Dali
* { white-space: pre; }est évident, mais si vous supprimez tous les espaces et pas seulement les réduisez (en les remplaçant par des marges à la place), le texte peut être copié de manière incorrecte et faire des ravages sur les navigateurs de texte et les lecteurs d'écran.
Ry-
23

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

Cet outil fonctionne selon ces règles:

  • Tous les commentaires HTML sont supprimés
  • Les séries de caractères d'espace blanc sont converties en caractères d'espace unique
  • Les espaces blancs inutiles à l'intérieur des balises sont supprimés
  • Les espaces blancs entre deux balises où l'une de ces deux balises n'est pas un singleton sont supprimés
  • Tout le contenu d'une stylebalise est présumé être CSS et est réduit en tant que tel
  • Tout le contenu d'une scriptbalise est présumé être JavaScript, sauf si un type de support différent est fourni, puis réduit en tant que tel
    • La minification CSS et JavaScript utilise une forme fortement fourchue de JSMin. Cette fourche est étendue pour prendre en charge le CSS de manière native et également pour la syntaxe SCSS. L'insertion automatique de points-virgules est prise en charge pour la minification JavaScript, mais l'insertion automatique d'accolades n'est pas encore prise en charge.
    austincheney
    la source
    7
    Salut, il supprime cette ligne! <!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]-->
    UnLoCo
    1
    ouais ce serait un désastre si vous utilisez ko!
    Ray Suelzer
    8

    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 facile de l'exécuter vous-même.

    Cependant, je ne sauvegarderais pas les fichiers compressés, faites-le de manière dynamique si vous le devez vraiment, et c'est toujours une meilleure idée d'activer la compression du serveur Gzip. Je ne sais pas à quel point cela est impliqué dans IIS / .Net, mais en PHP, c'est aussi simple que d'ajouter une ligne au fichier d'inclusion global

    adamJLev
    la source
    6

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

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

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

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

    Andrey Taritsyn
    la source
    1

    essayez http://code.mini-tips.com/html-minifier.html , voici .NET Libary pour Html Minifier

    HtmlCompressor est une petite bibliothèque .NET rapide et très facile à utiliser qui minimise une source HTML ou XML donnée en supprimant les espaces supplémentaires, les commentaires et autres caractères inutiles sans casser 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.


    la source