Programming: HTML

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:

Entfernen von allen Whitspace Chars
Minifizieren von Inline JS
Entfernen von Kommentaren
Entfernen von XHTML Closing Tags
Entfernen von Domains von internen URLs
Case sensitive Tags
HTML Entities zu Unicode umwandeln 6 byte -> 2 byte
Leere Tags und Attribute entfernen

Links

Dienstag, 17. Januar 2017

Performanceoptimierung von Webseiten: Prefetching

Neben den vielen Ideen zur Steigerung der Performance war das Prefetching eine. Das gab es schon seit sehr frühen HTML Versionen und war über die Jahre ein wenig in Verruf geraten. Danach wurde Prefetching mittels Selbstgebauten Loader via JS und CSS realisiert. Soweit zur Vergangenheit.

Es gibt heute wieder die Möglichkeit Dinge vorzuladen. Das führt nur zu einer Verbesserung der Performance auf den Folgeseiten einer Website, eventuell kann man auch Einstiegsseiten beschleunigen, das müsste man genau Testen.

Mit HTML5 geht es wieder sehr einfach und man kann nicht nur einzelne Seiten oder Resource vorladen, sondern z.B. auch ein DNS Prefetching machen. Hier ein paar Links, ja Wikipedia aber die Englische: