Wie komprimiertes HTML funktioniert und warum Sie es möglicherweise benötigen

Wie komprimiertes HTML funktioniert und warum Sie es möglicherweise benötigen

Wenn Sie eine Website betreiben, sollten Sie bereits wissen, wie es geht Verwenden Sie die richtigen Bildformate und optimieren Sie Ihre Bilder für das Web. Obwohl die Bildkomprimierung eine bekannte Praxis ist, wird die HTML-Komprimierung oft übersehen, was schade ist, da sich die Vorteile lohnen.





In diesem Artikel werden die beiden wichtigsten Methoden zum Verkleinern von HTML-Dateien erläutert, warum HTML-Dateien verkleinert werden sollten und wie Sie dabei vorgehen.



Kompression vs. Verkleinerung

Für die Optimierung von HTML-Dateien gibt es zwei Hauptmethoden: Kompression und Verkleinerung . Sie klingen oberflächlich ähnlich, sind aber eigentlich zwei verschiedene Techniken, also verwechseln Sie sie nicht.





Verkleinerung

Sie können sich die Minimierung als das Entfernen unnötiger Zeichen und Zeilen im Quellcode vorstellen. Denken Sie an Einrückungen, Kommentare, leere Zeilen usw. Nichts davon ist in HTML erforderlich - sie existieren, um die Datei leichter lesbar zu machen. Durch das Trimmen dieser Details kann die Dateigröße verringert werden, ohne dass dies Auswirkungen hat.

Beispiel-HTML-Seite:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Originalgröße: 354. Verkleinerte Größe: 272. Einsparungen: 82 (23,16%).

Viele Webentwickler und Websitebesitzer reservieren die Minimierung nur für JS- und CSS-Dateien, aber diese veraltete Praxis ist ein Fehler. Auch die HTML-Minifizierung ist wichtig.



In den 2000er Jahren waren Minimierungswerkzeuge selten. Sie mussten Dateien jedes Mal manuell minimieren, wenn sich etwas änderte. Da sich HTML-Dateien häufiger ändern als JS- und CSS-Dateien, war es damals einfach zu mühsam, jedes Mal zu verkleinern. Heutzutage ist es ein strittiger Punkt.

Kompression

Wenn Benutzer Ihre Website besuchen, verwenden sie das HTTP-Protokoll. Der Browser sendet eine Anfrage an Ihren Webserver für eine bestimmte Seite, Ihr Webserver findet die Seite und sendet dann den Inhalt dieser Seite zurück an den Browser des Besuchers.



Da das HTTP-Protokoll jedoch die Komprimierung unterstützt, kann Ihr Webserver die Seite komprimieren, bevor sie an den Besucher gesendet wird (vorausgesetzt, die Komprimierung ist in den Einstellungen Ihres Servers aktiviert), und dann kann der Browser des Besuchers die Seite wieder in ihren ursprünglichen Zustand dekomprimieren.

Das gebräuchlichste Komprimierungsschema ist GZIP , ein Dateiformat, das a . verwendet verlustfreier Komprimierungsalgorithmus DEFLATE genannt.

Der Algorithmus sucht nach wiederholten Vorkommen von Text in der HTML-Datei und ersetzt dann diese wiederholten Vorkommen durch Verweise auf ein vorheriges Vorkommen. Jede Referenz besteht einfach aus zwei Zahlen: Wie weit ist die Referenz zurück und auf wie viele Zeichen verweisen wir.

Betrachten Sie eine Textfolge wie diese (Beispiel von der GZIP-Website):

Blah blah blah blah blah.

Der Algorithmus erkennt folgende Wiederholung:

B{lah b}{lah b}{lah b}{lah b}lah.

Das erste Vorkommen ist unsere Referenz, also belassen Sie es:

Blah b{lah b}{lah b}{lah b}lah.

Das zweite Vorkommen bezieht sich auf das erste Vorkommen, das fünf Zeichen hinter und fünf Zeichen lang ist:

Blah b[5,5]{lah b}{lah b}lah.

In diesem Fall erkennt der Algorithmus jedoch, dass das nächste Vorkommen dieselbe Zeichenfolge ist, und erweitert die Referenzlänge um weitere fünf:

Blah b[5,10]{lah b}lah.

Und wieder:

Blah b[5,15]lah.

Und der Algorithmus ist intelligent genug, um zu erkennen, dass die nächsten drei Zeichen die ersten drei Zeichen in der Referenz sind, also erweitert er sich um drei:

Blah b[5,18].

Denken Sie nun an eine typische HTML-Datei und wie viele Wiederholungen darin vorkommen. Nahezu jedes Tag, wie zum Beispiel

, hat ein entsprechendes schließendes Tag, wie

. Darüber hinaus werden viele Tags durchgehend wiederholt, wie z

,

,

,

  • , etc. Attribute werden auch oft wiederholt, einschließlich

    class

    ,

    href

    , und

    src

    . Es ist leicht zu verstehen, warum die GZIP-Komprimierung mit HTML so effektiv ist.

    Der einzige Nachteil ist, dass der Webserver bei jedem Aufruf einer Seite etwas mehr CPU benötigt, um die Komprimierung auszuführen. Da die CPU heutzutage jedoch keine große Rolle spielt, ist es fast immer besser, GZIP zu aktivieren, als darauf zu verzichten, selbst wenn Sie ein Einstiegs-Webhosting haben.

    Warum Sie komprimieren und verkleinern sollten

    Es gibt zwei Hauptvorteile, die in der heutigen mobillastigen Weblandschaft von entscheidender Bedeutung sind.

    Schnelleres Laden von Seiten

    Im Durchschnitt kann ein HTML-Minifier mit Grundeinstellungen die Größe einer Datei um rund 3 Prozent reduzieren. Mit optionalen erweiterten Einstellungen kann eine HTML-Datei um weitere 3 bis 7 Prozent reduziert werden, was einer möglichen Reduzierung von bis zu 10 Prozent entspricht. Dies führt direkt zu schnelleren Seitenladezeiten.

    Weniger Bandbreite verwendet

    Angenommen, Sie haben 10 Dateien, die jeweils von 50 KB auf 45 KB verkleinert werden, um insgesamt 50 KB zu verkleinern. Angenommen, Ihre Website hat täglich durchschnittlich 1.000 Besucher, wobei jeder Besuch durchschnittlich zehn Seiten umfasst. Allein die HTML-Minifizierung reduziert Ihre Bandbreitennutzung um 50 MB pro Tag (1,5 GB pro Monat).

    Kompression + Verkleinerung

    Wie Sie sehen, ist die HTML-Minifizierung allein schon nützlich, insbesondere wenn Ihre Website größer wird, Dateien größer werden und der Verkehr zunimmt. Beachten Sie, dass Googles PageSpeed-Richtlinien empfehlen, HTML zu verkleinern. Wenn Sie also skeptisch sind, lassen Sie sich davon überzeugen.

    So deinstallieren Sie Google Backup und Sync

    Das Tolle an der HTML-Optimierung ist jedoch, dass Sie sich weder für die Verkleinerung noch für die Komprimierung entscheiden müssen. Sie können beides tun! Tatsächlich bist du sollen tue beides.

    Im Durchschnitt können Sie davon ausgehen, dass die GZIP-Komprimierung eine HTML-Datei um 70 bis 90 Prozent verkleinert. Wenn Sie das obige Beispiel mit einer konservativen Komprimierungsschätzung verwenden, würden die minimierten HTML-Dateien jeweils von 45 KB auf 13,5 KB anwachsen, was einer Gesamtverkleinerung von 365 KB entspricht. Im Vergleich zu unminified/uncompressed wird Ihre Website-Bandbreite jetzt um 365 MB pro Tag (11 GB pro Monat) reduziert.

    Zusätzlich zu den Bandbreiteneinsparungen lädt jede Seite erheblich schneller, da der Browser des Endbenutzers nur 13,5 KB statt 50 KB pro Seite herunterladen muss.

    So komprimieren und minimieren Sie HTML

    Glücklicherweise sind beide heutzutage nicht sehr schwierig und Sie benötigen nicht viel technisches Know-how, um sie einzurichten.

    WordPress-Plugins

    Wenn Sie eine WordPress-Site betreiben, müssen Sie nur ein Plugin installieren und Sie können die Vorteile sowohl der Komprimierung als auch der Minimierung nutzen.

    Die meisten Caching-Plugins können mehr als nur Seiten zwischenspeichern. Zum Beispiel, WP Schnellster Cache und W3 Gesamtcache Beide verfügen über Ein-Klick-Einstellungen, mit denen Sie neben anderen Funktionen die HTML-Minifizierung und GZIP-Komprimierung aktivieren können, die das Laden von Seiten weiter beschleunigen und die Bandbreitennutzung reduzieren.

    wenn du nur Minimierung wünschen, empfehlen wir die HTML minimieren Plugin. Es ist einfach, unterstützt HTML/CSS/JS und ermöglicht es Ihnen, die Verkleinerungsmethode ein wenig zu optimieren (z

    http:

    und

    https:

    von URLs).

    Statische HTML-Minifier

    Wenn Ihre HTML-Dateien statisch sind (dh nicht dynamisch von einem CMS oder Web-Framework generiert werden), können Sie zwei Sätze von HTML-Dateien verwalten: einen „Quell“-Satz, der für eine einfache Bearbeitung nicht minimiert ist, und einen „verkleinerten“ Satz. die Sie jedes Mal erstellen, wenn Sie eine Quelldatei ändern.

    Verwenden Sie zum Minimieren eines dieser Tools:

    Dies ist eine praktikable Technik, wenn Sie sich von CMS wie WordPress entfernt haben und jetzt statische Site-Generatoren verwenden.

    GZIP-Komprimierung aktivieren

    Die Schritte zum Aktivieren der GZIP-Komprimierung können je nach verwendeter Webserver-Software unterschiedlich sein. Da Apache die beliebteste Option ist, werden wir behandeln, wie man es mit .htaccess aktiviert.

    Stellen Sie über FTP eine Verbindung zu Ihrem Webserver her und erstellen Sie dann eine Datei namens

    .htaccess

    im Stammverzeichnis. Bearbeiten Sie die .htaccess-Datei, um die folgenden Einstellungen zu haben:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

    Sie sind sich nicht sicher, ob die Komprimierung auf Ihrer Website funktioniert? Testen Sie es mit diesem Tool .

    Für die ultimative Effizienz sollten Sie auch Erfahren Sie, wie Sie Ihr CSS überprüfen, bereinigen und optimieren können .

    Teilen Teilen Tweet Email Sollten Sie sofort auf Windows 11 aktualisieren?

    Windows 11 kommt bald, aber sollten Sie so schnell wie möglich aktualisieren oder ein paar Wochen warten? Lass es uns herausfinden.

    Weiter lesen     Verwandte Themen
    • Programmierung
    • HTML
    • Web Entwicklung
    Über den Autor Joel Lee(1524 Artikel veröffentlicht)

    Joel Lee ist seit 2018 Chefredakteur von MakeUseOf. Er hat einen B.S. in Informatik und über neun Jahre professionelle Schreib- und Redaktionserfahrung.

    Mehr von Joel Lee

    Abonniere unseren Newsletter

    Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

    Klicken Sie hier, um sich zu abonnieren