Werbung

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 10 kostenlose Online-Batch-Image-Tools zum Ändern, Konvertieren und OptimierenSie benötigen Stapelbearbeitungswerkzeuge, wenn Sie viele Fotos verarbeiten müssen und nur sehr wenig Zeit haben. Wir stellen Ihnen die besten online verfügbaren Batch-Resizer, Optimierer oder Konverter vor. Weiterlesen . Während die Bildkomprimierung eine bekannte Praxis ist, wird die HTML-Komprimierung häufig übersehen, was schade ist, da sich die Vorteile lohnen.

In diesem Artikel werden die beiden Hauptmethoden zum Verkleinern von HTML-Dateien erläutert, warum HTML-Dateien verkleinert werden sollten und wie Sie vorgehen müssen.

Kompression vs. Minimierung

Für die Optimierung von HTML-Dateien gibt es zwei Hauptmethoden: Kompression und Minifizierung. Sie klingen an der Oberfläche ähnlich, sind jedoch zwei unterschiedliche Techniken. Verwechseln Sie sie also nicht.

Minimierung

Sie können sich Minimierung als das Entfernen unnötiger Zeichen und Zeilen im Quellcode vorstellen. Denken Sie an Einrückungen, Kommentare, leere Zeilen usw. Keines davon ist in HTML erforderlich - es ist vorhanden, um das Lesen der Datei zu erleichtern. Durch das Zuschneiden dieser Details kann die Dateigröße verringert werden, ohne dass dies Auswirkungen hat.

Beispiel-HTML-Seite:

Dies ist ein Header
Schicken Sie mir eine E-Mail an [email protected].
Dies ist ein neuer Absatz!
Dies ist ein neuer Absatz in Fettdruck und Kursivschrift.

Beispiel-HTML-Seite, minimiert:

Dies ist ein Header
Schicken Sie mir eine E-Mail an [email protected].
Dies ist ein neuer Absatz!
Dies ist ein neuer Absatz in Fettdruck und Kursivschrift.

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

Viele Webentwickler und Websitebesitzer behalten sich die Minimierung nur für JS- und CSS-Dateien vor, aber diese veraltete Vorgehensweise ist ein Fehler. Auch die HTML-Minimierung ist wichtig.

In den 2000er Jahren waren Minifizierungswerkzeuge 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, sie jedes Mal zu minimieren. Heutzutage ist dies ein strittiger Punkt.

Kompression

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

Da das HTTP-Protokoll die Komprimierung unterstützt, kann Ihr Webserver die Seite komprimieren, bevor Sie sie an den Besucher senden (vorausgesetzt Die Komprimierung ist in den Einstellungen Ihres Servers aktiviert. Anschließend kann der Browser des Besuchers die Seite wieder in den ursprünglichen Zustand zurückversetzen.

Das gebräuchlichste Komprimierungsschema ist GZIPDies ist ein Dateiformat, das a verwendet verlustfreier Komprimierungsalgorithmus Wie funktioniert die Dateikomprimierung?Wie funktioniert die Dateikomprimierung? Lernen Sie die Grundlagen der Dateikomprimierung und den Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung. Weiterlesen genannt 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 ist die Referenz zurück und wie viele Zeichen referenzieren wir?

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

Bla bla bla bla bla.

Der Algorithmus erkennt die folgende Wiederholung:

Bla bla bla bla bla.

Das erste Vorkommen 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, 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, sodass er sich um drei erweitert:

Blah b [5,18].

Denken Sie nun an eine typische HTML-Datei und daran, wie viel Wiederholung darin vorhanden ist. Fast jedes Tag, wie z hat ein entsprechendes schließendes Tag, wie. Darüber hinaus werden viele Tags durchgehend wiederholt, z, , ,, usw. Attribute werden auch häufig 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 jedes Mal, wenn eine Seite angefordert wird, etwas mehr CPU benötigt, um die Komprimierung auszuführen. Da die CPU heutzutage kein großes Problem darstellt, ist es fast immer besser, GZIP zu aktivieren, als darauf zu verzichten. selbst wenn Sie Webhosting für Einsteiger haben Die besten Webhosting-Dienste: Shared, VPS und DedicatedSuchen Sie nach dem besten Webhosting-Service für Ihre Bedürfnisse? Hier sind unsere besten Empfehlungen für Ihr Blog oder Ihre Website. Weiterlesen .

Warum Sie komprimieren und minimieren sollten

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

Schnelleres Laden von Seiten

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, 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 wurden, was einer Gesamtverkleinerung von 50 KB entspricht. Nehmen wir an, Ihre Website bedient täglich durchschnittlich 1.000 Besucher, wobei jeder Besuch durchschnittlich zehn Seiten umfasst. Allein die HTML-Minimierung reduziert Ihre Bandbreitennutzung um 50 MB pro Tag (1,5 GB pro Monat).

Komprimierung + Minimierung

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

Das Schöne an der HTML-Optimierung ist jedoch, dass Sie weder die Minimierung noch die Komprimierung auswählen müssen. Sie können beides! In der Tat, Sie sollte tue beides.

Im Durchschnitt können Sie davon ausgehen, dass die GZIP-Komprimierung eine HTML-Datei um 70 bis 90 Prozent verkleinert. Unter Verwendung des obigen Beispiels mit einer konservativen Komprimierungsschätzung würden die minimierten HTML-Dateien von jeweils 45 KB auf 13,5 KB steigen, was einer Gesamtverkleinerung von 365 KB entspricht. Im Vergleich zu nicht minimiert / unkomprimiert wird die Bandbreite Ihrer Site jetzt um 365 MB pro Tag (11 GB pro Monat) reduziert.

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

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 lediglich ein Plugin installieren und können die Vorteile der Komprimierung und Minimierung nutzen.

Die meisten Caching-Plugins können mehr als nur Seiten zwischenspeichern. Zum Beispiel, WP Schnellster Cache und W3 Gesamt-Cache Beide verfügen über Ein-Klick-Einstellungen, mit denen Sie unter anderem die HTML-Minimierung und die GZIP-Komprimierung aktivieren können, um das Laden von Seiten weiter zu beschleunigen und die Bandbreitennutzung zu 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 Minimierungsmethode ein wenig zu optimieren (z. B. ob 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 Webframework generiert werden), können Sie zwei Sätze von HTML-Dateien verwalten: Ein "Quell" -Satz, der zur einfachen Bearbeitung nicht minimiert ist, und ein "minimierter" Satz, den Sie jedes Mal erstellen, wenn Sie eine Änderung an einer Quelldatei vornehmen.

Verwenden Sie zum Minimieren eines der folgenden Tools:

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

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

Aktivieren Sie die GZIP-Komprimierung

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

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

 mod_gzip_on Ja mod_gzip_dechunk Ja mod_gzip_item_include-Datei. (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 ^ Inhaltscodierung:. * 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 11 Nützliche Tools zum Überprüfen, Bereinigen und Optimieren von CSS-DateienMöchten Sie Ihren CSS-Code verbessern? Diese CSS-Prüfer und -Optimierer helfen dabei, den CSS-Code und die Syntax zu verbessern und Ihre Webseiten zu minimieren. Weiterlesen .