Allgemeine Optimierungen zur Reduzierung der HTML- oder XHTML-Seitengröße?

Welche allgemeinen Optimierungen werden durchgeführt, um die HTML- oder XHTML-Seitengröße zu reduzieren? Einige, die mir einfallen, sind:

• Kommentare entfernen,
• fremde Leerzeichen entfernen,
• Verschieben sich wiederholender Inline-Stile in ein CSS-Stylesheet,
• etc.

Was sind noch andere? Welches Angebot ist das größte, oder könnte automatisch von einem Tool oder Modul durchgeführt werden?

Google hat seine Empfehlungen zur Minimierung der Nutzlastgröße erläutert . Sie umfassen die folgenden Techniken:

1. Aktivieren Sie die Komprimierung
2. Unbenutztes CSS entfernen
3. Minimieren Sie JavaScript
4. CSS reduzieren
5. HTML minimieren
6. Verzögern Sie das Laden von JavaScript
7. Bilder optimieren
8. Servieren Sie skalierte Bilder
9. Stellen Sie Ressourcen über eine konsistente URL bereit

Diese Vorschläge sind Teil ihres Open-Source-Firefox / Firebug-Add-On-Projekts mit dem Namen Page Speed . Ähnlich wie das YSlow- Plugin von Yahoo! Das eigentliche Seitengeschwindigkeits-Add-On sucht nach viel mehr Optimierungen, als in dieser Liste ausführlich erläutert wird. Anweisungen zur Verwendung der Seitengeschwindigkeit werden ebenfalls angezeigt.

Die Best Practices von Yahoo! zur Beschleunigung Ihrer Website enthalten eine Reihe ähnlicher Best Practices:

1. Minimieren Sie HTTP-Anforderungen
2. Verwenden Sie ein Content Delivery-Netzwerk
3. Fügen Sie einen Expires- oder einen Cache-Control-Header hinzu
4. Gzip-Komponenten
5. Legen Sie Stylesheets oben ab
6. Stellen Sie die Skripte unten ein
7. Vermeiden Sie CSS-Ausdrücke
8. Machen Sie JavaScript und CSS extern
9. Reduzieren Sie DNS-Lookups
10. …

(Die Liste von Yahoo! ist ~ 35 Elemente lang, es ist nicht erforderlich, sie vollständig zu zitieren.)

Sowohl mit YSlow ( Bildlink ) als auch mit Page Speed ( Bildlink ) können Sie Tests auf Ihren Seiten durchführen, indem Sie Vorschläge für mögliche Aktionen machen und zeigen, welche der Empfehlungen bereits implementiert sind.

Jemand wird sagen, dass das Markup gezippt werden sollte, also könnte ich es auch sein.

Hier finden Sie eine ausführliche Erklärung zu Gzip mit Links zum Einrichten unter Apache und IIS .

In einem Artikel zu WebReference wird angegeben , dass Sie bei Verwendung des Apache-Moduls mod_gzip die folgenden Leistungsverbesserungen feststellen.

Webmaster können mit diesem Modul in der Regel eine Leistungssteigerung des Webservers um 150 bis 160% und eine Reduzierung der verwendeten HTML / XML / JavaScript-Bandbreite um 70 bis 80% feststellen. Insgesamt liegen die Bandbreiteneinsparungen bei 30 bis 60%.

Es ist es wahrscheinlich nicht wert.

Ich habe ein bisschen mit dem Entfernen von Whitespace in HTML gespielt und nach dem Gzippen nur eine Reduzierung der Nutzlast um 10% festgestellt.

In der Realität erledigt das Entfernen von Leerzeichen und Zeilenumbrüchen die Arbeit, die die Komprimierung für uns erledigen würde. Wir fügen nur ein bisschen Effizienz hinzu, die von Menschen unterstützt wird:

                  Roh komprimiert
Nicht optimiertes CSS 2.299 Bytes 671 Bytes
Optimiertes CSS 1.758 Bytes 615 Bytes

(Ja, das sagt CSS, aber die gleichen Grundregeln gelten auch für HTML.)

Das Problem ist,

1. GZIP erledigt 90% der Arbeit für Sie, das ist also eine verrückte Mikrooptimierung. Ich meine, vielleicht, wenn Sie Google oder Yahoo sind.
2. Diese zusätzliche Größenreduzierung um 10% führt zu den ziemlich hohen Kosten für völlig unlesbares HTML in "Quelltext anzeigen".

ok, ein kleines: halte Tag-Namen und Attribute in Kleinbuchstaben und konsistent (wie die Standard-Mandate übrigens). Das Kompressionsverhältnis wird um ein oder zwei Prozent erhöht.

Wenn Sie eine Website mit extrem hohem Volumen sind, sollten Sie möglicherweise die Verwendung von superkurzen Entitäts-IDs und Klassennamen in Betracht ziehen, da diese sowohl die Größe der HTML-Seite als auch der CSS-Seite reduzieren, die für die Formatierung verwendet wird.

Achten Sie auch auf eine übermäßig strukturierte Site-Zusammensetzung. Es ist einfach, Div- und Span-Abschnitte hinzuzufügen, wenn sie nicht wirklich benötigt werden. Möglicherweise möchten Sie auch Strategien in Betracht ziehen, z. B. Paging für große Ergebnismengen und ähnliche Ausgaben.

In der Realität zahlen sich diese Optimierungen nur in äußerst begrenztem Umfang aus (und für die Paging-Strategie sind potenzielle SEO-Nachteile von Bedeutung). Folgen Sie einfach jessegavin Empfehlung an GZIP / Deflate - Komprimierung zu aktivieren und mit ihm getan werden.

Kombinieren Sie gängige CSS, Images und Javascripts in einer Datei. Dadurch wird die Dateigröße nicht verringert, aber die Anzahl der http-Anforderungen verringert. Bei kleineren Dateien überwiegt der http-Aufwand die Download-Zeit bei weitem. Es ist einfach, ein Skript zum Kombinieren von CSS- und Javascript-Dateien zu schreiben, damit Sie diese während der Entwicklung einfacher verwalten können, sie jedoch in einer einzigen Datei bereitstellen können.

Weitere Informationen zum Kombinieren von Bildern finden Sie unter http://css-tricks.com/css-sprites .

Schauen Sie sich auch den Closure Compiler von Google an. Ich habe es nicht benutzt, aber es gibt an, dass Javascript schneller heruntergeladen und ausgeführt werden soll.

Wie andere gesagt haben, kommt der größte Vorteil von gzipping.

Stellen Sie sicher, dass Sie geeignete HTML-Elemente verwenden. <div class="page-title">Hello World</div>Verwenden Sie stattdessen <h1>Hello World</h1>.

Und das offensichtliche: Verwenden Sie keine Tabellen für das Layout! Verwenden Sie ein einfaches Rastersystem wie 960.gs (oder rollen Sie Ihre eigene, leichte Version). Es kann einen großen Unterschied zwischen der HTML-Größe geben, insbesondere bei verschachtelten Tabellen. Vergleichen Sie:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

und

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Wenn Sie eine ASP.NET-Website verwenden, achten Sie auf den ViewState . Es kann sehr große versteckte Felder auf der Seite erzeugen und diese oft überladen, obwohl dies nicht erforderlich ist (mir ist bereits aufgefallen, dass der ViewState schwerer ist als der Rest der Seite).
Dies gilt insbesondere dann, wenn Sie AJAX verwenden, da der ViewState bei jeder Anforderung hin und her gesendet wird, wodurch Ihre Website verlangsamt und das Verkehrsaufkommen erhöht wird.

Die Lösung liegt jedoch im .net-Code .

Es gibt eine Reihe kostenloser Tools zur Analyse und Optimierung der Webleistung . Sie können aus den von ihnen erstellten Berichten Ihre eigene große Checkliste zusammenstellen.

Hier sind ein paar umschriebene Punkte aus einer Zoompf-Leistungsbeurteilung:

• Vermeiden Sie dynamisch generierte Inhalte (Bild). Ziehen Sie stattdessen in Betracht, ein Bild offline als statische Bilddatei zu zeichnen oder seine Größe zu ändern.
• Verwenden Sie keine Bild-Tags ohne Bemaßungen.
• Google Analytics (& Ads) unterstützt das asynchrone Laden der JavaScript-Datei. Wenn Sie sie verwenden, können Sie sie auch asynchron laden.

Eine häufig übersehene Strategie besteht darin, unnötigen HTML-Code von der Seite zu entfernen.

Für jedes Projekt müssen Sie anhand der von Ihnen verwendeten (X) HTML-Version und der Art und Weise, wie die Website verwendet werden soll, entscheiden, welche dieser Strategien Sie anwenden möchten.

(Anscheinend kann ich nicht mehr als einen Hyperlink pro Antwort posten, da ich ein neuer Benutzer bin. Daher müssen diese URLs kopiert und eingefügt werden. Ich hoffe, das ist koscher.)

• In HTML4 und HTML5 ist für viele Elemente das schließende Tag nicht erforderlich. Das öffnende Tag für das body-Element ist ebenfalls nicht erforderlich. Sehen:

meiert.com/de/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• Der Protokoll (http :) -Teil von HTTP-URLs kann weggelassen werden.

meiert.com/de/blog/20090218/performance-and-rfc-2396/

• Bei Tags wie <br> können Sie den in der XHTML-Syntax (<br />) verwendeten Schrägstrich einfach weglassen, es sei denn, Sie müssen tatsächlich XHTML verwenden.

• Hier einige Beispiele für kleine HTML-Dokumentstrukturen:

meiert.com/de/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Andere haben es gesagt, aber sie haben den Punkt nach Hause nicht genug gerammt: Gzipping.

1. Praktisch kein Aufwand oder Nachteile.
2. Reduziert meiner begrenzten Erfahrung nach die HTML-Größe um 60% bis 90%.

Alle anderen Anpassungen, die Sie an HTML vornehmen können, erfordern mehr Aufwand / Wartung und haben im Vergleich zum reinen Gzippen und Vergessen kaum Auswirkungen. Sie sind einfach die Zeit nicht wert, es sei denn, Sie sind Google. Sie sind kein Google.

(Wie andere bereits erwähnt haben, hat Gzipping umso mehr Auswirkungen, je konsistenter Ihr HTML ist, da es nach meinem eingeschränkten Verständnis nach identischen Zeichenfolgen in Ihrer Datei sucht und jede wiederholte Instanz durch einen winzigen Code ersetzt, der auf das HTML verweist Original. Daher können Authoring-Methoden wie das Beibehalten der Reihenfolge Ihrer Attribute und das Beibehalten der Groß- und Kleinschreibung bei gzipping hilfreich sein.)

Oh - und wenn Sie Ihren HTML-Code irgendwann in Ihrem Build- / Serving-Prozess automatisch minimieren, erfordert dies nicht viel mehr Aufwand / Wartung. Einige HTML-Minifier sind hier aufgelistet:

/programming/728260/html-minification