Diese Seite wurde von der Cloud Translation API übersetzt.

Codierung und Übertragungsgröße textbasierter Assets optimieren

Ilya Grigorik

Jeremy Wagner

Neben der Vermeidung unnötiger Ressourcendownloads sollten Sie die Ladegeschwindigkeit zu verbessern, besteht darin, die Downloadgröße und die verbleibenden Ressourcen zu komprimieren.

Datenkomprimierung leicht gemacht

Sobald Sie Ihre Website eingerichtet haben, um das Herunterladen nicht verwendeter Ressourcen zu vermeiden, Der nächste Schritt besteht darin, alle verbleibenden zulässigen Ressourcen zu komprimieren, herunterladen können. Je nach Ressourcentyp – Text, Bilder, Schriftarten usw. Es gibt viele verschiedene Techniken, aus denen Sie wählen können: generische Tools, auf dem Webserver aktiviert ist, werden Optimierungen für bestimmte Inhalte vorverarbeitet, und ressourcenspezifische Optimierungen, die Input von der Entwickler.

Um die beste Leistung zu erzielen, ist eine Kombination aus Folgendem erforderlich Techniken:

Bei der Komprimierung werden Informationen mit weniger Bits codiert.
Die Beseitigung unnötiger Daten führt immer zu den besten Ergebnissen.
Es gibt viele verschiedene Komprimierungstechniken und -algorithmen.
Für eine optimale Komprimierung sind verschiedene Techniken erforderlich.

Der Vorgang, die Größe von Daten zu reduzieren, wird durch die Datenkomprimierung reduziert. Viele Menschen haben Algorithmen, Techniken und Optimierungen zur Verbesserung der Komprimierung beigetragen Verhältnisse, Komprimierungsgeschwindigkeit und den für verschiedene Komprimierungen benötigten Speicher Algorithmen.

Eine umfassende Beschreibung der Datenkomprimierung wird in diesem Leitfaden nicht behandelt. Es ist jedoch wichtig, die Funktionsweise der Komprimierung mit welchen Techniken Sie die Größe der verschiedenen Assets reduzieren können, erfordern.

Zur Veranschaulichung der grundlegenden Prinzipien dieser Techniken betrachten wir das Verfahren ein einfaches SMS-Format zu optimieren, das speziell für dieses Beispiel erfunden wurde:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

Nachrichten können beliebige Anmerkungen enthalten. Diese werden auch als comments, gekennzeichnet durch das Rautezeichen "#" . Anmerkungen wirken sich nicht auf die Bedeutung der Nachricht oder ihr Verhalten.
Nachrichten können Header enthalten, bei denen es sich um Schlüssel/Wert-Paare handelt, die durch ":" im vorherigen Beispiel), die am Anfang der Nachricht angezeigt werden.
Nachrichten tragen Textnutzlasten.

Was kann getan werden, um die Größe der vorherigen Nachricht zu reduzieren, die ab 200 Zeichen?

Der Kommentar ist interessant, hat aber keinen Einfluss auf die Bedeutung der Nachricht. Entfernen Sie ihn, wenn Sie die Nachricht übertragen.
Es gibt gute Techniken, Header auf effiziente Weise zu codieren. Für wenn Sie wissen, dass alle Nachrichten und „date“ (Datum) könnten Sie diese in kurze Ganzzahl-IDs zu konvertieren und diese einfach zu senden. Dies könnte jedoch nicht wahr sein, also lasst es am besten erst einmal in Ruhe.
Die Nutzlast ist nur Text. Wir wissen zwar nicht, wie der Inhalt wirklich lautet, (Anscheinend wird dabei "secret-cipher" verwendet), nur wenn wir uns den Text dass es viel Redundanz gibt. Anstatt den Code zu senden, können Sie einfach die Anzahl wiederholter Buchstaben zählen effizienter zu codieren. Aus "AAA" wird beispielsweise "3A", eine Folge von drei A darstellt.

Die Kombination dieser Verfahren führt zu folgendem Ergebnis:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Die neue Nachricht ist 56 Zeichen lang. Das bedeutet, dass Sie die Datei Originalbotschaft um 72%. Das ist eine erhebliche Reduzierung.

Dies ist ein Spielzeugbeispiel dafür, wie Kompressionsalgorithmen Reduzieren der Übertragungsgröße textbasierter Ressourcen In der Praxis wird die Komprimierung Algorithmen sind weitaus ausgefeilter als das vorherige Beispiel zeigt, im Web können durch Komprimierungsalgorithmen die Downloads erheblich reduziert werden. Zeit für Ressourcen. Durch die Komprimierung von textbasierten Assets wird eine Webseite weniger Zeit für das Laden von Ressourcen aufwenden, damit Nutzer sofort sehen, schneller als ohne Komprimierung.

Minimierung: Vorverarbeitung und kontextspezifische Optimierungen

Die erste hier beschriebene Technik ist die Reduzierung. Auch wenn die Reduzierung Komprimierungsalgorithmus, um unnötige und redundanten Zeichen im Quellcode verwendet, um Ressourcen lesbarer zu machen, Menschen. Diese Lesbarkeit ist jedoch nicht notwendig, um die Funktionalität des Quellcodes auf Produktionswebsites verzögern und das Laden von im Internet zu finden.

Die Reduzierung ist eine Art inhaltsspezifischer Optimierung, bei der die Größe der bereitgestellten Ressourcen zu reduzieren und Optimierungen am besten im Rahmen Ihres Build- und Bereitstellungsprozesses. Bundler sind beispielsweise gängige Software, mit der Ressourcen automatisch reduziert werden können, vor der Bereitstellung von neuem Produktionscode auf einer Website.

Redundante oder unnötige Daten lassen sich am besten komprimieren, indem sie sie beseitigen. Es ist jedoch nicht möglich, beliebige Daten zu löschen. In einigen Kontexten, in denen wir über inhaltsspezifische Kenntnisse des Datenformats und seiner Eigenschaften verfügen, die Größe der Nutzlast erheblich reduzieren, ohne die Bedeutung oder Fähigkeiten.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Denken Sie an das vorherige HTML-Snippet und die drei verschiedenen Inhaltstypen, die es enthält. enthält:

HTML-Markup.
CSS zum Anpassen der Darstellung einer Seite.
JavaScript für Interaktionen und andere erweiterte Seitenfunktionen

Für jeden dieser Inhaltstypen gibt es unterschiedliche Regeln für gültige Inhalte. unterschiedliche Regeln für die Angabe von Kommentaren usw. Die Frage bleibt jedoch die Frage: "Wie kann die Größe dieser Seite verringert werden?"

Code-Kommentare sind der beste Freund für Entwickler, aber der Browser sie! CSS (/* ... */), HTML () und JavaScript entfernen (// ...) Kommentare reduziert die Gesamtgröße der Übertragung der Seite und untergeordneten Ressourcen.
Eine „smarte“ Das CSS-Komprimierungsprogramm könnte feststellen, dass wir eine ineffiziente Methode zur Definition von Regeln für .awesome-container und Minimiere die beiden Deklarationen ohne Auswirkungen auf andere Stile, wodurch mehr Bytes gespart werden. Über einer großen CSS-Regelsatz festlegen, kann das Entfernen dieser Art von Redundanz summieren, aber das die aggressiv angewendet werden können, da Selektoren häufig in verschiedenen Kontexten dupliziert werden, z. B. in Medienabfragen.
Leerzeichen und Tabs sind praktische Funktionen für Entwickler in HTML, CSS und JavaScript. Ein zusätzliches Komprimierungsprogramm könnte alle Tabulatoren und Leerzeichen entfernen. Im Gegensatz zu anderen Deduplizierungsverfahren kann diese Art der Optimierung fair angewendet werden. aggressiv vorgehen, solange Leerzeichen oder Tabulatoren nicht für das z. B. möchten Sie die Leerzeichen in den Ausführungen in einem HTML-Dokument, da sie die Lesbarkeit des Inhalts gewährleisten, tatsächlich sehen werden.

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

Nach Anwendung der vorherigen Schritte ändert sich die Länge der Seite von 516 auf 204 Zeichen, entspricht einer Einsparung von ca. 60%. Sie ist zwar nicht sehr gut lesbar, aber das muss nicht sein, um nutzbar zu sein. Moderne Entwicklungspraktiken sind auch ermöglichen es Ihnen, die gut formatierten und lesbaren Versionen Ihres Quellcodes beizubehalten. getrennt von dem optimierten Code, den Sie an die Produktion senden. Kombiniert mit Source maps, die eine lesbare Darstellung der transformierten können Sie Fehler in der Produktionsumgebung einfacher beheben. eine gute Entwicklererfahrung haben und gleichzeitig die Leistung zugunsten optimieren. der User Experience.

Das vorherige Beispiel verdeutlicht einen wichtigen Punkt: einen allgemeinen ein Programm, das zum Komprimieren von beliebigem Text entwickelt wurde, die Seite aus dem vorherigen Beispiel zu komprimieren, Kommentare entfernen, CSS-Regeln oder Dutzende anderer inhaltsspezifischer Optimierungen vor. Aus diesem Grund sind Vorverarbeitung, Minifizierung und andere kontextsensitive dass Optimierungen wichtig sind.

In ähnlicher Weise können die oben beschriebenen Techniken über rein textbasierte Assets. Bilder, Videos und andere Inhaltstypen enthalten alle ihre eigenen Formen von Metadaten und verschiedene Nutzlasten. Wenn Sie zum Beispiel ein Bild mit einer Kamera enthält, enthält die Datei in der Regel viele zusätzliche Informationen: Kameraeinstellungen, Standort usw. Je nach Anwendung können diese Daten (z. B. eine Website zum Teilen von Fotos) oder ist vielleicht völlig nutzlos. Ich sollten Sie überlegen, ob es sich lohnt, es zu entfernen. In der Praxis können diese Metadaten bis zu zehn Kilobyte pro Bild.

Um die Effizienz Ihrer Assets zu optimieren, die verschiedenen Inhaltstypen auf- und überlege, welche inhaltsspezifische Optimierungen vornehmen, um ihre Größe zu reduzieren. Dann – danach können Sie diese Optimierungen automatisieren, indem Sie sie Ihre Build- und Release-Schritte, um sicherzustellen, dass die Optimierungen konsequent bei jedem neuen Release in der Produktion.

Textkomprimierung mit Komprimierungsalgorithmen

Der nächste Schritt zum Reduzieren der Größe von textbasierten Assets besteht darin, Komprimierungsalgorithmus geändert werden. Hier geht es noch einen Schritt weiter: nach wiederholbaren Mustern in textbasierten Nutzlasten suchen, bevor sie und sie wieder zu entpacken, sobald sie im Browser angezeigt werden. Die zu einer weiteren und deutlichen Reduzierung dieser Ressourcen führen, kürzere Downloadzeiten.

gzip und Brotli sind häufig verwendete Komprimierungsalgorithmen, die auf Text-Assets: CSS, JavaScript, HTML.
Alle modernen Browser unterstützen die gzip- und Brotli-Komprimierung und werden beide im Accept-Encoding-HTTP-Header der Anfrage unterstützt.
Ihr Server muss so konfiguriert sein, dass die Komprimierung aktiviert ist. Web server software können Module oft standardmäßig aktiviert werden, um textbasierte Ressourcen zu komprimieren.
Sowohl gzip als auch Brotli können zur Verbesserung der Komprimierungsverhältnisse optimiert werden, indem und die Komprimierung anpassen. Bei GZIP reichen die Komprimierungseinstellungen 1 bis 9, wobei 9 die beste Bewertung ist. Für Brotli liegt dieser Bereich zwischen 0 und 11, mit 11 die Besten zu sein. Höhere Komprimierungseinstellungen erfordern jedoch mehr Zeit. Für die dynamisch komprimiert werden, d. h. zum Zeitpunkt der Einstellungen in der Mitte des Bereichs bieten in der Regel die besten Kompromisse. zwischen Kompressionsverhältnis und Geschwindigkeit. Die statische Komprimierung ist jedoch Dabei wird die Antwort vorab komprimiert daher die aggressivsten Komprimierungseinstellungen Komprimierungsalgorithmus.
Content Delivery Networks (CDNs) bieten in der Regel eine automatische Komprimierung von zu erhalten. CDNs können auch die dynamische und statische Komprimierung für So müssen Sie sich bei der Komprimierung um einen Aspekt weniger kümmern.

gzip und Brotli sind gängige Kompressoren, die auf jeden Stream von Bytes. Im Hintergrund erinnern sie sich noch an die zuvor untersuchten Inhalte und versuchen anschließend, doppelte Datenfragmente in eine effiziente Methode.

In der Praxis funktionieren sowohl gzip als auch Brotli am besten bei textbasierten Inhalten. Komprimierungsraten von 70 bis 90% für größere Dateien. Das Ausführen dieser Algorithmen-Assets, die bereits mit alternativen Algorithmen komprimiert wurden, z. B. da die meisten Bildformate mit verlustfreien oder verlustbehafteten Komprimierungstechniken wenig bis gar keine Verbesserung.

Alle modernen Browser bieten Unterstützung für gzip und Brotli in der Accept-Encoding-HTTP-Anfrageheader. Die Entscheidung des Hostanbieters dass der Webserver ordnungsgemäß für die Bereitstellung der komprimierte Ressource gespeichert, wenn der Client sie anfordert.

Datei	Algorithmus	Nicht komprimierte Größe	Komprimierte Größe	Verdichtungsverhältnis
angular-1.8.3.js	Brotli	1.346 KiB	256 KiB	81 %
angular-1.8.3.js	GZIP	1.346 KiB	329 KiB	76%
angular-1.8.3.min.js	Brotli	173 KiB	53 KiB	69%
angular-1.8.3.min.js	GZIP	173 KiB	60 KiB	65 %
jquery-3.7.1.js	Brotli	302 KiB	69 KiB	77%
jquery-3.7.1.js	GZIP	302 KiB	83 KiB	73 %
jquery-3.7.1.min.js	Brotli	85 KiB	27 KiB	68%
jquery-3.7.1.min.js	GZIP	85 KiB	30 KiB	65 %
lodash-4.17.21.js	Brotli	531 KiB	73 KiB	86 %
lodash-4.17.21.js	GZIP	531 KiB	94 KiB	82 %
lodash-4.17.21.min.js	Brotli	71 KiB	23 KiB	68%
lodash-4.17.21.min.js	GZIP	71 KiB	25 KiB	65 %

Die obige Tabelle zeigt die Einsparungen, die sowohl mit der Brotli- als auch mit der gzip-Komprimierung einige bekannte JavaScript-Bibliotheken bereitstellen. Die Einsparungen reichen von 65% bis 86% je nach Datei und Algorithmus. Zu Ihrer Information: Das Maximum sowohl für Brotli als auch für gzip wurde die Komprimierungsstufe auf jede Datei angewendet. Überall Brotli gegenüber gzip bevorzugen.

Die Aktivierung der Komprimierung ist eine der einfachsten und effektivsten Optimierungen, umsetzen. Wenn Ihre Website diese Vorteile nicht nutzt, entgehen Ihnen eine große Chance, die Leistung für Ihre Nutzer zu verbessern. Glücklicherweise haben viele Web- Server bieten Standardkonfigurationen, die diese wichtige Optimierung ermöglichen. und CDNs sind sehr effektiv darin, ihn so zu implementieren, Kompressionsgeschwindigkeit und ‐verhältnis ausbalanciert.

Wenn Sie die Komprimierung in Aktion sehen möchten, öffnen Sie die Chrome-Entwicklertools, öffnen Sie die Netzwerk, laden Sie eine Seite Ihrer Wahl und sehen Sie sich den unteren das Steuerfeld „Netzwerk“.

Die Werte der Entwicklertools werden zwischen der tatsächlichen und der Übertragungsgröße ablesen. — </ph> Darstellung der (komprimierten) *Übertragungsgröße* von alle Seitenressourcen im Vergleich zu ihrer tatsächlichen Größe, wie im Netzwerk visualisiert. der Chrome-Entwicklertools.

Wie im vorherigen Bild sollten Sie eine Aufschlüsselung der folgenden Elemente sehen:

Die Anzahl der Anfragen, also die Anzahl der Ressourcen, die für den Seite.
Die Übertragungsgröße aller Anfragen. Dies spiegelt die Effektivität der Komprimierung, die auf alle Ressourcen einer Seite angewendet wird.
Die Ressourcengröße aller Anfragen. Sie gibt an, wie groß die Ressourcen der Seite werden nach der Dekomprimierten angezeigt.

Auswirkungen auf Core Web Vitals

Leistungsverbesserungen können nur gemessen werden, wenn Messwerte vorhanden sind, die diese Verbesserungen. Die Core Web Vitals-Initiative besteht darin, Metriken, die die tatsächliche User Experience widerspiegeln, und das Bewusstsein dafür steigern. Dies steht im Gegensatz zu Messwerten wie die einfache Seitenladezeit, die sind nicht eindeutig auf die Nutzererfahrung ausgelegt.

Wenn Sie die in diesem Leitfaden beschriebenen Optimierungen auf die Ressourcen in Ihrem können die Auswirkungen auf Core Web Vitals je nach und die damit verbundenen Messwerte. Es gibt jedoch einige Fälle, in denen Mit diesen Optimierungen können Sie die Core Web Vitals Ihrer Website verbessern:

HTML-Ressourcen, die minimiert und komprimiert werden, können das Laden von dieses HTML-Codes, der Auffindbarkeit seiner untergeordneten Ressourcen und damit laden können. Dies kann für den Largest Contentful Paint (LCP). Ressourcenhinweise wie rel="preload" können zwar verwendet werden, die Sichtbarkeit von Ressourcen. Wenn zu viele davon verwendet werden, kann dies zu Problemen mit Bandbreitenkonflikte auftreten. Indem Sie sicherstellen, dass die HTML-Antwort auf eine Navigationsanfrage komprimiert wurden, können die darin enthaltenen Ressourcen so schnell wie möglich erkannt werden durch den Preload Scanner.
Einige LCP-Kandidaten können durch Komprimierung auch früher geladen werden. Für Bei SVG-Bildern, die LCP-Kandidaten sind, kann die Ressourcenauslastung durch die textbasierte Komprimierung reduziert. Dies unterscheidet sich von Optimierungen, die Sie an anderen Bildtypen vornehmen würden, nämlich an mit anderen Komprimierungsmethoden, wie z. B. JPEG, komprimiert, verlustbehaftete Komprimierung.
Darüber hinaus können Textknoten auch LCP-Kandidaten sein. Wie die Techniken in diesem Leitfaden beschrieben, hängt davon ab, ob Sie für den Text auf Ihrem Ihrer Webseiten. Wenn Sie eine Webschriftart verwenden, ist die Optimierung von Webschriftarten am besten geeignet, angewendet werden. Wenn Sie jedoch keine Webschriftarten, sondern Systemfunktionen die ohne Ressourcenlast angezeigt werden. Durch die Komprimierung des CSS-Codes wird diese Dauer verkürzt. Das bedeutet, dass das Rendern von LCP-Textknoten können früher auftreten.

Fazit

Die Optimierung der Codierung und Übertragung von textbasierten Assets bildet eine Grundlage Leistungskonzept an, aber dieses hat große Auswirkungen. Achten Sie darauf, dass Sie dass die Ressourcen reduziert werden können, der Komprimierung von diesen Optimierungen profitiert.

Und was noch wichtiger ist: Stellen Sie sicher, dass diese Prozesse automatisiert werden. Für verwenden Sie einen Bundler, um die Reduzierung auf zulässige Ressourcen anzuwenden. Sicherstellen, ob Ihre Webserverkonfiguration Komprimierung unterstützt. Verwenden Sie mit der effektivsten Komprimierung. Um dies so einfach wie möglich zu machen, Automatisieren Sie die Komprimierung, da mit ihnen nicht nur Ressourcen für Sie, aber sie können dies auch sehr schnell tun.

Indem Sie diese grundlegenden Leistungskonzepte in die Architektur, können Sie sicherstellen, dass Ihre Bemühungen zur Leistungsoptimierung und dass nachfolgende Optimierungen auf einer soliden Grundlage von Best Practices an.