Montag, 13. Februar 2017

Performanceoptimierung von Webseiten: HTML Minifizieren

Das nur minifixiertes CSS und JS ausgeliefert wir ist heute sicher Standard. So werden viele Bytes bei der Übertragung gespart, auch in den den Zeiten von GZIP und HTTP/2 ist das noch so. Nur ist der Effekt des Minifizierens geringer. Leider wird sehr oft vergessen auch das HTML selbst zu minifizieren. Auch ist hier die Tooluntzerstützuzng nicht so üppig wie beim Minifizieren von CSS und JS. Aber es gibt z.B. für Wordpress ein Plugin, das gut Ergebnisse liefert, bei mir spart es ca. 15% der zu übertragenen Bytes, bei eingeschalteter GZIP Kompression.

  • Minify HTML von Tim Eckel
Wenn man HTML minifixiert kann Einsparungen zwischen 15 bis 33 % der zu übertragenen Bytes einsparen. Nach entsprechender Kompression ist immer noch mit einem einstelligen Prozentwert an Einsparung zu rechnen. Das klingt nicht viel, lohnt sich aber, weil der Aufwand relativ gering ist. Der Zeitlich Vorteil beim laden einen komplexen Seite kann zwischen 0,5 ms bei einem schnell angebunden Desktop Computer und 35 ms bei einem Samsung Galaxy S5 mit 3G (regular) liegen. Probieren kann man dies einfach mit den Chrome Developer Tools. Dazu kommt, dass das HTML sehr wichtig für den Seitenaufbau ist, auch wenn Bilder einen grösseren Byte-Beitrag zur Webseite leisten. Weitere positive Aspekte:
  • Durch das geringere Datenvolumen verringert sich die Wahrscheinlichkeit für Re-Transmits, vor allem in überfüllten Netzen (Prime Time, Mobile Networks). 
  • Auch die Menge der Ausreisser der Ladezeit verringern sich. 
  • Die Connection kann früher für andere Daten genutzt werden. 
HTML Minifizierung ist nicht gleich HTML Minifizierung, hier gibt es verschiedene Aspekte:

  1. Entfernen von allen Whitspace Chars
  2. Minifizieren von Inline JS
  3. Entfernen von Kommentaren
  4. Entfernen von XHTML Closing Tags
  5. Entfernen von Domains von internen URLs
  6. Case sensitive Tags
  7. HTML Entities zu Unicode umwandeln 6 byte -> 2 byte 
  8. Leere Tags und Attribute entfernen
Links



2 Kommentare:

  1. Ohne Zweifel kann der Minimierungsprozess die Codegröße um 10% - 95% reduzieren! Dies hilft der Website, schneller zu laufen und erhält dann einen hohen SEO-Score (Search Engine Optimization).
    Schauen Sie sich zur HTML-Minimierung dieses Tool an
    https://url-decode.com/tool/minifyhtml

    AntwortenLöschen
  2. Danke für den Tipp, ich kannte die Tool-Web Site noch gar nicht.

    AntwortenLöschen