Ausführliche Erläuterung von Beispielen zur HTML-Seitenoptimierung

1. Reduzieren Sie die Anzahl der HTTP-Anfragen.

(1) JS-Dateien und CSS-Dateien zusammenführen.

(2) Zusammenführen von Rahmenbildern und relativ weniger veränderten Bildern zu einem und vollständiges Rendern durch CSS-Hintergrundschneiden.

(3) Verwenden Sie sinnvollerweise den lokalen Cache, um JS/CSS/IMAGE zwischenzuspeichern.

2. Reduzieren Sie die Größe der angeforderten Datei und die von den angeforderten Daten belegte Netzwerkbandbreite.

(1) Komprimieren Sie die JS-Größe: Löschen Sie Leerzeilenumbrüche, Kommentare und Verschleierungen in JS und ersetzen Sie lange Variablen durch kurze Variablen.

(2) CSS-Größe komprimieren: CSS-Kommentare löschen und so oft wie möglich Abkürzungen verwenden.

(3) Verwenden Sie (X)HTML+CSS, um die Website-Struktur aufzubauen und CSS-Wiederverwendbarkeit bereitzustellen, um die (X)HTML-Dateigröße zu reduzieren.

(4) Verwenden Sie serverseitiges GZIP, um JS/CSS-Dateien zu komprimieren und die Größe der übertragenen Dateien zu reduzieren.

3. Steuern Sie den Client-Cache durch Versionierung.

Wie kann ich diese zwischengespeicherten Dateien rechtzeitig aktualisieren? Durch eine einfache Konfiguration können Sie dem Browser durch Ändern der JS-Version rechtzeitig mitteilen, dass diese Dateien erneut angefordert werden müssen und die Daten im Browser-Cache nicht weiter verwendet werden. Es gibt mehrere Lösungen:

(1) Ändern Sie die Dateinamen dieser JS manuell.

(2) Ändern Sie die Pfade dieser JS manuell.

(3) Verschieben Sie den JS-Pfad durch URL Rewrite.

(4) Teilen Sie der Seite über eine JS-Konfiguration auf einem Server mit hoher Reaktionszeit mit, welche JS-Dateien mit dieser Seite verknüpft werden sollen.

(5) Die große Version bleibt unverändert, die kleine Version wird kontinuierlich hinzugefügt und nach einer bestimmten Zeit einheitlich aktualisiert, um den Cache effizient zu nutzen.

4. Helfen Sie der Seite, Gewicht zu verlieren.

5. Löschen Sie einige überflüssige Inhalte auf der Seite.

Bezieht sich hauptsächlich auf redundante Leerzeichen, Tabulatoren, Leerzeilen, doppelte Anführungszeichen, einfache Anführungszeichen, Kommentare usw.

6. Leere Anweisungen im Webseitencode löschen.

Zum Beispiel:

<span style=&#39;font-family:宋体&#39;>你好<span lang=EN-US><o:p></o:p></span></span>

Offensichtlich haben die Sätze nach „Hallo“ keine Wirkung, wir können sie löschen.

7. Löschen Sie die Standardattribute von HTML.

Die HTML-Sprache verfügt über viele Standardattribute wie Ausrichtung, Schriftarten, Farben usw., aber Software zur Webseitenerstellung fügt diese nutzlosen Codes hinzu. Beispiel: Das align-Attribut ist standardmäßig auf die linke Ausrichtung eingestellt, sodass wir bei der Ausrichtung nach links nicht „align=left“ schreiben müssen.

8. CSS optimieren.

Beispiel: Verwenden Sie abgekürztes CSS.

Oder:

<p class="decorated">1</p>
    <p class="decorated">2</p>
    <p class="decorated">3</p>
    <p class="decorated">4</p>

Sie können p verwenden, um Folgendes einzuschließen:

  <p class="decorated">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>

9. Die Sichtbarkeit ist schneller als die Anzeige.

10. Halten Sie die Groß-/Kleinschreibung für dieselbe URL konsistent.

Der Puffer des Internet Explorers behandelt Groß- und Kleinbuchstaben auch unterschiedlich. Daher müssen Sie als Webentwickler daran denken, die Groß-/Kleinschreibung der URL-Zeichenfolge desselben Links an verschiedenen Stellen konsistent zu halten. Andernfalls werden unterschiedliche Dateisicherungen desselben Speicherorts im Puffer des Browsers gespeichert, wodurch sich auch die Anzahl der Anfragen zum Herunterladen von Inhalten vom selben Speicherort erhöht.

11. Lass das Zeichen einen Anfang und ein Ende haben.

12. Füllen Sie nicht den gesamten Seiteninhalt in eine Tabelle.

Da die Tabelle erst angezeigt wird, wenn der gesamte darin enthaltene Inhalt hinzugefügt wurde, verzögert sich die Zugriffsgeschwindigkeit der gesamten Seite, wenn auf einige Inhalte nicht zugegriffen werden kann. Der richtige Ansatz besteht darin, den Inhalt in mehrere Tabellen mit demselben Format aufzuteilen, anstatt sie alle in einer Tabelle zusammenzufassen.

13. Verwenden Sie iframe, um eine andere Seite zu verschachteln.

Wenn Sie Werbecode einfügen müssen und die Geschwindigkeit nicht beeinträchtigen möchten, ist die Verwendung von iframe am besten geeignet. Die Anzeige der Seite wird durch die Verzögerung des Werbecodes nicht beeinträchtigt.

14. Verschieben Sie JavaScript an das Ende der HTML-Datei.

Denn JavaScript blockiert die Anzeige nachfolgender Seiten während der Verarbeitung und blockiert auch HTML-Anfragen.

15. Das Wissen über freundliche Links.

(1) Durch das Erstellen von Textlinks wird die Geschwindigkeit der Webseite nicht beeinträchtigt.

(2) Platzieren Sie alle Links in einem separaten Paginierungsbereich und verlinken Sie dann auf die Seite auf der Homepage.

(3) Wenn der benutzerfreundliche Link auf der Homepage erscheinen muss, dann platzieren Sie bitte die gesamte Tabelle, in der sich der Link befindet, unten auf der Seite, da die Seite Zeile für Zeile von oben nach unten angezeigt wird.

(4) Laden Sie zuerst das Logobild des benutzerfreundlichen Links herunter und laden Sie es dann auf Ihren eigenen Webspace hoch.

16. Bildoptimierung.

(1) Reduzieren Sie die Anzahl der Bilder: Entfernen Sie unnötige Bilder.

(2) Bildqualität reduzieren: Bei Bildern im JPG-Format scheinen sich um 5 % verkleinerte Bilder nicht groß verändert zu haben, die Dateigröße ändert sich jedoch deutlich.

(3) Verwenden Sie das entsprechende Format: JPG wird im Allgemeinen zum Anzeigen von Landschafts-, Personen- und Kunstfotos verwendet. GIF bietet manchmal weniger Farben und kann in einigen Situationen verwendet werden wo Farbanforderungen erforderlich sind, wie z. B. Website-Logos, Schaltflächen, Emoticons usw.; Das PNG-Format kann einen transparenten Hintergrund bieten und wird im Allgemeinen auf Webseiten verwendet, die eine transparente Hintergrundanzeige erfordern oder höhere Anforderungen an die Bildqualität haben.

17. Fügen Sie nach der URL einen Schrägstrich hinzu.

Wenn der Server eine solche Adresse empfängt, dauert es einige Zeit, den Dateityp dieser Adresse zu bestimmen. Wenn 220 ein Verzeichnis ist, können Sie nach der URL auch einen zusätzlichen Schrägstrich hinzufügen, damit der Server auf einen Blick weiß, dass er auf den Index oder die Standarddatei im Verzeichnis zugreifen möchte, was Zeit spart.

18. Markieren Sie die Höhe und Breite.

Wenn keine Einstellung vorhanden ist, berechnet der Browser die Größe beim Herunterladen des Bildes. Wenn viele Bilder vorhanden sind, muss der Browser die Seite ständig anpassen, was sich nicht nur auf die Geschwindigkeit auswirkt, sondern auch auf die Surferlebnis. Wenn der Browser die Höhe und Breite kennt, macht er Platz für das Bild auf der Seite und lädt weiterhin den folgenden Inhalt, auch wenn das Bild nicht angezeigt werden kann. Dadurch wird es schneller geladen und das Surferlebnis ist besser.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zur HTML-Seitenoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!