HTML-Minimierung? [geschlossen]

99

Gibt es ein Online-Tool, in das wir die HTML- Quelle einer Seite eingeben können und das den Code minimiert?

Ich würde das für Aspx-Dateien tun, da es keine gute Idee ist, den Webserver dazu zu bringen, sie zu komprimieren ...

html minify

— Paulo
quelle

19

Wann ist es eine schlechte Idee, den Server gzip zu haben?

— Chuck

5

Ich habe gelesen, dass die Aspx-Seiten, da sie keine statischen Dateien sind, nicht von IIS zwischengespeichert werden und daher die Seite bei jeder Anfrage gzip werden ...

— Paulo

23

... und ist das ein Problem? Es sei denn, Ihr Server hat bereits 99,9% CPU, wahrscheinlich nicht. gzipping ist das übliche und viel effektiver als jede "Minifizierung".

— Bobince

2

Das scheint ziemlich interessant zu sein: perfectionkills.com/experimenting-with-html-minifier kangax.github.com/html-minifier

— StefanS

2

Die Antworten hier sind veraltet, ganz zu schweigen davon, dass einige von ihnen falsch sind. Bitte überprüfen Sie meine Erklärung zum Problem und das richtige Werkzeug .

— Salvador Dali

63

Probieren Sie vielleicht HTML Compressor aus . Hier ist eine Vorher-Nachher-Tabelle, die zeigt, was es kann (auch für Stack Overflow selbst):

Entschuldigung, Markdown hat kein Konzept für Tabellen

Es bietet viele Auswahlmöglichkeiten zur Optimierung Ihrer Seiten bis hin zur Skriptminimierung (Ompressor, Google Closure Compiler, Ihr eigener Kompressor), wo dies sicher wäre. Der Standardoptionssatz ist recht konservativ. Sie können also damit beginnen und experimentieren, um aggressivere Optionen zu aktivieren.

Das Projekt ist sehr gut dokumentiert und wird unterstützt.

— Tim Post
quelle

58

Tu das nicht . Oder besser gesagt, wenn Sie darauf bestehen, tun Sie dies, nachdem alle wichtigeren Site-Optimierungen abgeschlossen sind. Die Chancen stehen sehr hoch, dass die Kosten / Nutzen für diesen Aufwand vernachlässigbar sind, insbesondere wenn Sie vorhatten, Online-Tools manuell für jede Seite zu verwenden.

Verwenden Sie YSlow oder Page Speed , um zu bestimmen, was Sie wirklich tun müssen, um Ihre Seiten zu optimieren. Ich vermute, dass das Reduzieren von HTML-Bytes nicht das größte Problem Ihrer Website sein wird. Es ist viel wahrscheinlicher, dass Komprimierung, Cache-Verwaltung, Bildoptimierung usw. die Leistung Ihrer Website insgesamt stärker beeinflussen. Diese Tools zeigen Ihnen, was die größten Probleme sind - wenn Sie sich mit allen befasst haben und dennoch feststellen, dass die HTML-Minimierung einen signifikanten Unterschied macht, entscheiden Sie sich dafür.

(Wenn Sie sicher sind, dass Sie sich dafür entscheiden möchten und Apache httpd verwenden, können Sie mod_pagespeed verwenden und einige der Optionen aktivieren , um Leerzeichen usw. zu reduzieren. Beachten Sie jedoch die Risiken .)

— Zac Thompson
quelle

25

Was ist falsch an der Optimierung, wenn minimierter Code mithilfe der automatisierten Verschönerung leicht zu lesen ist?

12

Es ist wahrscheinlich nicht das größte Problem - aber wenn es ein trivialer Prozess ist, beim Kompilieren von dev zu qa oder prod Markup durch einen minimalen Satz von Regexs auszuführen, warum sollten Sie dann keine kleineren Markup-Dokumente versenden?

— Will Peavy

26

Eigentlich keine Antwort auf die ursprüngliche Frage :(

— Chuck Le Butt

7

@ Will, es ist mit ziemlicher Sicherheit kein trivialer Prozess, HTML durch Minimieren von regulären Ausdrücken auszuführen, und selbst mit einem geeigneten Parser ist es wahrscheinlich nicht trivial oder schnell. Im Gegensatz zur JS / CSS-Minimierung ist die HTML-Minimierung nicht verlustfrei: Jedes Tag kann so gestaltet werden white-space: pre, dass die Minimierung den vorformatierten Text zerstört.

— Augenlidlosigkeit

3

@eyelidlessness - Ich habe derzeit Tausende von Seiten, die durch reguläre Ausdrücke minimiert werden, bevor sie bereitgestellt werden. Diese Funktion ist kein komplexer oder teurer Teil des Systems. ... Wenn Sie andererseits den berechneten Stil analysieren möchten, um das Minimieren von Elementen zu vermeiden, mit denen gestylt white-space:prewurde, wäre das Minimieren von HTML komplexer. Mir ist jedoch nicht klar, warum jemand Leerzeichen verwenden möchte: pre, anstatt ein preoder code-Element zu verwenden.

— Will Peavy

34

Hier ist eine kurze Antwort auf Ihre Frage: Sie sollten HTML, CSS, JS minimieren . Es gibt ein einfach zu bedienendes Werkzeug, das als Grunzen bezeichnet wird . Sie können damit viele Aufgaben automatisieren. Darunter JS , CSS , HTML- Minimierung, Dateikettung und viele andere .

Die hier geschriebenen Antworten sind extrem veraltet oder manchmal sogar nicht sinnvoll. Seit dem Jahr 2009 haben sich viele Dinge geändert, daher werde ich versuchen, dies richtig zu beantworten.

Kurze Antwort - Sie sollten HTML auf jeden Fall minimieren . Es ist heute trivial und gibt ungefähr 5% Beschleunigung . Für eine längere Antwort lesen Sie die gesamte Antwort

Früher haben die Leute css / js manuell minimiert (indem sie es durch ein bestimmtes Tool ausgeführt haben, um es zu minimieren). Es war ziemlich schwierig, den Prozess zu automatisieren und erforderte definitiv einige Fähigkeiten. In dem Wissen, dass viele Websites auf hoher Ebene derzeit noch kein gzip verwenden (was trivial ist), ist es verständlich, dass die Leute zögern, HTML zu minimieren.

Warum haben die Leute js minimiert, aber nicht HTML ? Wenn Sie JS minimieren, gehen Sie wie folgt vor:

Kommentare entfernen
Leerzeichen entfernen (Tabulatoren, Leerzeichen, Zeilenumbrüche)
ändere lange Namen in kurze ( var isUserLoggedInbis var a)

Was auch in alten Zeiten eine große Verbesserung brachte. Aber in HTML konnten Sie lange Namen nicht kurz ändern, außerdem gab es in dieser Zeit fast nichts zu kommentieren. Sie mussten also nur noch Leerzeichen und Zeilenumbrüche entfernen. Das gibt nur wenig Verbesserung.

Ein falsches Argument, das hier geschrieben wurde, ist, dass eine Minimierung keinen Sinn ergibt, da Inhalte mit gzip bereitgestellt werden. Das ist völlig falsch. Ja, es ist sinnvoll, dass gzip die Verbesserung der Minimierung verringert, aber warum sollten Sie gzip-Kommentare und Leerzeichen gzip, wenn Sie sie richtig zuschneiden können, und gzip nur einen wichtigen Teil. Es ist das gleiche, als ob Sie einen Ordner zum Archivieren haben, der einen Mist enthält, den Sie niemals verwenden werden, und Sie entscheiden sich, ihn einfach zu komprimieren, anstatt ihn zu bereinigen und zu komprimieren.

Ein weiteres Argument, warum es sinnlos ist, eine Minimierung vorzunehmen, ist, dass es langweilig ist. Vielleicht stimmte das 2009, aber nach dieser Zeit erschienen neue Tools. Im Moment müssen Sie Ihr Markup nicht manuell minimieren. Bei Dingen wie Grunt ist es trivial, grunt-contrib-htmlmin ( basiert auf HTMLMinifier von @kangax) zu installieren und so zu konfigurieren, dass Ihr HTML minimiert wird. Alles, was Sie brauchen, sind 2 Stunden, um das Grunzen zu lernen und alles zu konfigurieren. Dann ist alles automatisch in weniger als einer Sekunde erledigt. Klingt so, als wäre 1 Sekunde (die Sie sogar automatisieren können, um mit Grunt-Contrib-Watch nichts zu tun ) nicht wirklich so schlecht für ungefähr 5% der Verbesserung (selbst mit gzip).

Ein weiteres Argument ist, dass CSS und JS statisch sind und HTML vom Server generiert wird, sodass Sie es nicht vorminimieren können. Dies war auch im Jahr 2009 wahr, aber zur Zeit mehr und mehr Seiten wie eine einzelne Seite App suchen, wo der Server ist dünn und der Client tut alle Routing, Templating und andere Logik. Der Server gibt Ihnen also nur JSON und der Client rendert es. Hier haben Sie viel HTML für die Seite und verschiedene Vorlagen.

Um meine Gedanken zu beenden:

Google minimiert HTML.
pageSpeed bittet Sie, HTML zu minimieren
es ist trivial zu tun
es gibt ~ 5% der Verbesserung
es ist nicht dasselbe wie gzip

— Salvador Dali
quelle

3

Das Minfying von HTML ist absolut nicht trivial, da Leerzeichen in HTML von Bedeutung sind und es von CSS abhängt, ob ein bestimmtes Leerzeichen entfernt werden kann. Außerdem sind Thin Clients schrecklich und können meiner Meinung nach nicht als gutes Argument gegen die Probleme der Minimierung von dynamischem HTML angeführt werden. (Ein guter Weg, dies zu tun, ist die Auswahl einer Template-Engine [Haml, Jade usw.], die in ihrer gerenderten Ausgabe überhaupt keine unnötigen Leerzeichen enthält.)

— Ry-

@minitech Das Minimieren von HTML ist trivial, außerdem gibt es nur wenige mögliche Probleme mit Leerzeichen (wie <span>). Zuallererst können Sie immer einen Weg finden, gültiges HTML zu schreiben, wodurch es Whitespace-unabhängig wird. Es mag Sie auch überraschen, dies zu hören, aber der JS / CSS-Minifier kann auch einen Fehler verursachen - was nicht bedeutet, dass Sie ihn nicht verwenden sollten. Zwei Möglichkeiten, um Ihr Problem zu lösen: Lernen Sie, Whitespace-Agnostic Markup zu schreiben, und testen Sie Ihr Produkt vor / nach der Minimierung (CSS / HTML / JS). Außerdem können Sie in Minifier angeben, welche Leerzeichen Sie beibehalten möchten.

— Salvador Dali

Richtige JavaScript-Minifier für nicht verrückten Code (dh Code, der sich nicht selbst liest oder durch das Timing betrügt) können keinen Fehler verursachen. Und nein, es gibt nicht immer eine Möglichkeit, Whitespace-agnostisches HTML zu schreiben, insbesondere weil HTML wiederum nicht Whitespace-unabhängig ist. Überhaupt. Stellen Sie sicher, dass Sie das Kopieren und Einfügen testen, wenn Sie der Meinung sind, dass Ränder dies verhindern. Die Angabe, welches Leerzeichen ich beibehalten möchte, klingt nach Zeitverschwendung (außer bei Google)…

— Ry-

@minitech Kannst du mir CSS zeigen, das unmöglich in weißraumunabhängiger Weise zu schreiben ist? Ich minimiere HTML seit langer Zeit und habe bisher keine Probleme gesehen.

— Salvador Dali

* { white-space: pre; }ist offensichtlich, aber wenn Sie alle Leerzeichen entfernen und nicht nur reduzieren (sondern durch Ränder ersetzen), kann Text falsch kopiert werden und Textbrowser und Bildschirmleseprogramme zerstören.

— Ry-

23

Ich habe ein Web-Tool geschrieben, um HTML zu minimieren. http://prettydiff.com/?m=minify&html

Dieses Tool arbeitet nach folgenden Regeln:

Alle HTML-Kommentare werden entfernt

Serien von Leerzeichen werden in Einzelzeichen umgewandelt

Unnötige Leerzeichen in Tags werden entfernt

Leerzeichen zwischen zwei Tags, bei denen eines dieser beiden Tags kein Singleton ist, werden entfernt

Der gesamte Inhalt eines styleTags wird als CSS angenommen und als solcher minimiert

Es scriptwird davon ausgegangen, dass der gesamte Inhalt eines Tags JavaScript ist, sofern kein anderer Medientyp angegeben ist, und dann als solcher minimiert wird

Die CSS- und JavaScript-Minimierung verwendet eine stark gegabelte Form von JSMin. Diese Verzweigung wird erweitert, um CSS nativ und auch die SCSS-Syntax zu unterstützen. Das automatische Einfügen von Semikolons wird für die JavaScript-Minimierung unterstützt, das automatische Einfügen von geschweiften Klammern wird jedoch noch nicht unterstützt.

— austincheney
quelle

7

Hallo, es entfernt diese Zeile! 

— UnLoCo

1

Ja, das wäre eine Katastrophe, wenn Sie Ko verwenden!

— Ray Suelzer

8

Das hat bei mir funktioniert:

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

Es ist kein bereits verfügbares Online-Tool, aber als einfaches PHP-Tool ist es einfach genug, es einfach selbst auszuführen.

Ich würde komprimierte Dateien jedoch nicht speichern, dies dynamisch tun, wenn Sie es wirklich müssen, und es ist immer eine bessere Idee, die Gzip-Serverkomprimierung zu aktivieren. Ich weiß nicht, wie involviert das in IIS / .Net ist, aber in PHP ist es so trivial wie das Hinzufügen einer Zeile zur globalen Include-Datei

— adamJLev
quelle

6

CodeProject hat ein veröffentlichtes Beispielprojekt ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900 ), um einige der folgenden Situationen zu behandeln. .

Kombinieren von ScriptResource.axd-Aufrufen zu einem einzigen Aufruf
Komprimieren Sie alle clientseitigen Skripte basierend auf der Browserfunktion, einschließlich gzip / deflate
Ein ScriptMinifier zum Entfernen von Kommentaren, Einrückungen und Zeilenumbrüchen.
Ein HTML-Kompressor zum Komprimieren aller HTML-Markups basierend auf der Browserfunktion einschließlich gzip / deflate.
Und - was am wichtigsten ist - ein HTML-Minifier, mit dem Sie komplettes HTML in eine einzelne Zeile schreiben und auf einer möglichen Ebene (im Aufbau) minimieren können.

— Der faule DBA
quelle

3

Für die Microsoft .NET-Plattform gibt es eine Bibliothek namens WebMarkupMin , die die Minimierung von HTML-Code erzeugt.

Darüber hinaus gibt es ein Modul zur Integration dieser Bibliothek in ASP.NET MVC - WebMarkupMin.Mvc .

— Andrey Taritsyn
quelle

1

Versuchen Sie http://code.mini-tips.com/html-minifier.html . Dies ist .NET Libary for Html Minifier

HtmlCompressor ist eine kleine, schnelle und sehr einfach zu verwendende .NET-Bibliothek, die bestimmte HTML- oder XML-Quellen minimiert, indem zusätzliche Leerzeichen, Kommentare und andere nicht benötigte Zeichen entfernt werden, ohne die Inhaltsstruktur zu beschädigen. Infolgedessen werden die Seiten kleiner und schneller geladen. Eine Befehlszeilenversion des Kompressors ist ebenfalls verfügbar.