Programmierung

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

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

Wenn Sie eine Website betreiben, sollten Sie bereits wissen, wie Sie die richtigen Bildformate verwenden und Ihre Bilder für das Web optimieren. 10 Kostenlose Online-Batch-Bildwerkzeuge, um die Größe zu ändern, zu konvertieren und zu optimieren Stapelbearbeitungswerkzeuge, wenn Sie viele Fotos bearbeiten müssen und wenig Zeit haben. Wir stellen Ihnen die besten Batch-Resizer, Optimizer oder Konverter vor, die online verfügbar sind. Weiterlesen . Während die Bildkomprimierung eine allgemein bekannte Praxis ist, wird die HTML-Komprimierung tendenziell übersehen, was schade ist, da sich die Vorteile lohnen.

In diesem Artikel werden die beiden wichtigsten Methoden zum Verkleinern von HTML-Dateien beschrieben. Warum sollten HTML-Dateien verkleinert werden, und wie dies zu tun ist.

Kompression vs. Minifizierung

Zur Optimierung von HTML-Dateien gibt es zwei Hauptmethoden: Kompression und Minifizierung. Sie klingen auf der Oberfläche ähnlich, sind aber eigentlich zwei verschiedene Techniken, also lassen Sie sie nicht verwirren.

Minifizierung

Sie können sich die Minifizierung als das Entfernen unnötiger Zeichen und Zeilen im Quellcode vorstellen. Denken Sie an Einrückungen, Kommentare, Leerzeilen usw. In HTML ist nichts davon erforderlich - sie sind vorhanden, um das Lesen der Datei zu erleichtern. Durch das Zuschneiden dieser Details kann die Dateigröße reduziert werden, ohne dass dies Auswirkungen auf die Daten hat.

HTML-Beispielseite:

  Ihr Titel hier   
 
Dies ist ein Header
 
Senden Sie mir eine Mail an [email protected].
 
Dies ist ein neuer Absatz!
 
Dies ist ein neuer Absatz in Fett- und Kursivschrift.

HTML-Beispielseite, minimiert:

Ihr Titel hier
Dies ist ein Header
Senden Sie mir eine Mail an [email protected].
Dies ist ein neuer Absatz!
Dies ist ein neuer Absatz in Fett- und Kursivschrift.

Originalgröße: 354. Minified Size: 272. Einsparungen: 82 (23.16%).

Viele Webentwickler und Websitebesitzer behalten die Minifizierung nur für JS- und CSS-Dateien vor. Diese veraltete Vorgehensweise ist jedoch ein Fehler. Die HTML-Minifizierung ist ebenfalls wichtig.

In den 2000er Jahren waren Minifikationswerkzeuge selten. Sie mussten Dateien bei jeder Änderung manuell minimieren. Da sich HTML-Dateien häufiger ändern als JS- und CSS-Dateien, war es einfach zu langwierig, sie jedes Mal zu minimieren. Heutzutage ist es ein Streitpunkt.

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 den Inhalt dieser Seite zurück an den Browser des Besuchers.

Da das HTTP-Protokoll die Komprimierung unterstützt, kann der Webserver die Seite komprimieren, bevor sie an den Besucher gesendet wird (vorausgesetzt, die Komprimierung ist in den Servereinstellungen aktiviert). Anschließend kann der Browser des Besuchers die Seite wieder in den ursprünglichen Zustand zurückversetzen.

Das häufigste Komprimierungsschema ist GZIP, Welches Dateiformat verwendet einen verlustfreien Kompressionsalgorithmus? Wie funktioniert die Dateikomprimierung? Wie funktioniert die Dateikomprimierung? Die Komprimierung von Dateien ist der Kern der Funktionsweise des modernen Webs, könnte man argumentieren, da wir Dateien gemeinsam nutzen können, deren Übertragung sonst zu lange dauern würde. Aber wie funktioniert das? Lesen Sie mehr namens DEFLATE.

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

Betrachten Sie eine solche Zeichenfolge (Beispiel von der GZIP-Website):

Bla bla bla bla bla.

Der Algorithmus erkennt folgende Wiederholung:

Bla bla bla bla bla.

Das erste Vorkommnis ist unsere Referenz, also lassen Sie es sein:

Bla bla bla bla bla.

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, sodass die Referenzlänge um weitere fünf verlängert wird:

Blah b [5,10] lah b lah.

Und wieder:

Blah b [5,15] lah.

Der Algorithmus ist klug genug, um zu erkennen, dass die nächsten drei Zeichen die ersten drei Zeichen in der Referenz sind. Er wird also um drei erweitert:

Blah b [5,18].

Denken Sie jetzt an eine typische HTML-Datei und wie viel Wiederholung darin vorhanden ist. Fast jeder Tag, wie z , hat ein entsprechendes schließendes Tag, wie . Darüber hinaus werden viele Tags wiederholt, z

,

, ,
  • , etc. Attribute werden auch oft wiederholt, einschließlich Klasse, href, und src. Es ist leicht zu erkennen, warum die GZIP-Komprimierung mit HTML so effektiv ist.

    Der einzige Nachteil ist, dass der Webserver bei jeder angeforderten Seite etwas mehr CPU für die Komprimierung benötigt. Da CPU heutzutage jedoch kein Problem ist, ist es fast immer besser, GZIP zu aktivieren, als wenn Sie auf Einstiegshosting zurückgreifen sollten für deine Bedürfnisse? Ob für einen kleinen Blog oder eine große Unternehmenswebsite, hier sind unsere besten Empfehlungen. Weiterlesen .

    Warum sollten Sie komprimieren und reduzieren?

    Es gibt zwei Hauptvorteile, die beide in der heutigen mobilen Web-Landschaft entscheidend sind.

    Schnellere Seitenladevorgänge

    Im Durchschnitt kann ein HTML-Minifier die Größe einer Datei mit den Grundeinstellungen um etwa 3 Prozent reduzieren. Mit optionalen erweiterten Einstellungen kann eine HTML-Datei um weitere 3 bis 7 Prozent reduziert werden. Dies bedeutet eine mögliche Reduzierung um bis zu 10 Prozent. Dies führt direkt zu einer schnelleren Ladezeit der Seite.

    Weniger verwendete Bandbreite

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

    Kompression + Minifizierung

    Wie Sie sehen, ist die HTML-Minifizierung für sich allein nützlich, insbesondere wenn Ihre Website größer wird, Dateien größer werden und der Datenverkehr zunimmt. Beachten Sie, dass die Google PageSpeed-Richtlinien die Minimierung von HTML empfehlen. Wenn Sie also skeptisch sind, lassen Sie sich davon überzeugen.

    Das Beste an der HTML-Optimierung ist jedoch, dass Sie sich nicht für Minifizierung oder Komprimierung entscheiden müssen. Sie können beides! In der Tat, du sollte tue beides.

    Im Durchschnitt können Sie davon ausgehen, dass die GZIP-Komprimierung eine HTML-Datei um 70 bis 90 Prozent verringert. 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 steigen, was eine Gesamtverkleinerung von 365 KB bedeutet. Im Vergleich zu nicht minimierten / unkomprimierten Datenbanken reduziert sich die Bandbreite Ihrer Website jetzt um 365 MB pro Tag (11 GB pro Monat)..

    Zusätzlich zu den Bandbreiteneinsparungen wird jede Seite erheblich schneller geladen, da der Browser des Endbenutzers nur 13,5 KB im Vergleich zu 50 KB pro Seite herunterladen muss.

    HTML komprimieren und reduzieren

    Glücklicherweise ist heute keine der beiden sehr schwierig und Sie benötigen nicht viel technisches Know-how, um sie einzurichten.

    WordPress-Plugins

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

    Die meisten Caching-Plugins bieten mehr als nur das Zwischenspeichern von Seiten. WP Fastest Cache und W3 Total Cache verfügen beispielsweise über Ein-Klick-Einstellungen, mit denen Sie die HTML-Minifizierung und die GZIP-Komprimierung aktivieren können. Neben anderen Funktionen werden das Laden von Seiten weiter beschleunigt und die Bandbreitennutzung verringert.

    Wenn du nur Wenn Sie eine Minifizierung wünschen, empfehlen wir das Minify HTML-Plugin. Es ist einfach, unterstützt HTML / CSS / JS und ermöglicht es Ihnen, die Minifizierungsmethode ein wenig anzupassen (z. B. ob sie entfernt werden soll) http: und https: von URLs).

    Statische HTML-Minifier

    Wenn Ihre HTML-Dateien statisch sind (d. H. Nicht dynamisch von einem CMS oder Web-Framework generiert werden), können Sie zwei Gruppen von HTML-Dateien verwalten: a “Quelle” Set, das für die einfache Bearbeitung nicht eingeschränkt ist, und a “minified” festlegen, die Sie bei jeder Änderung an einer Quelldatei erstellen.

    Verwenden Sie eines der folgenden Tools, um zu minimieren:

    • HTMLCompressor
    • HTML Minifier
    • HTML Minifier (anders als der oben)

    Dies ist eine praktikable Technik, wenn Sie sich von CMS wie WordPress entfernt haben und jetzt statische Site-Generatoren verwenden. 7 Gründe, Ihr CMS aufzulösen und einen statischen Site-Generator in Betracht zu ziehen Eine Website war für viele Benutzer schwierig. CMSs wie WordPress haben das geändert, aber sie können immer noch verwirrend sein. Eine andere Alternative ist ein statischer Standortgenerator. Weiterlesen .

    Aktivieren Sie die GZIP-Komprimierung

    Die Schritte zum Aktivieren der GZIP-Komprimierung können sich je nach verwendeter Webserver-Software unterscheiden. Da Apache die beliebteste Option ist, erfahren Sie, wie Sie sie mit .htaccess aktivieren können.

    Stellen Sie über FTP eine Verbindung zu Ihrem Webserver her und erstellen Sie dann eine Datei mit dem Namen .htaccess im Wurzelverzeichnis. Bearbeiten Sie die .htaccess-Datei mit den folgenden Einstellungen:

     mod_gz_n_de_im_inch_in_clus_in_class_include_include-Datei (html? | txt | css | js | php | pl) $ mod_gzip_item_include-Handler ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *   SetOutputFilter DEFLATE

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

    War dieser Artikel hilfreich? Jetzt, da Sie komprimieren und minimieren, sollten Ihre Webseiten schneller geladen werden und weniger Bandbreite beanspruchen. Wenn Sie Fragen haben, können Sie diese gerne unten stellen!

    Erfahren Sie mehr über: HTML, Webentwicklung.