Website-Frontend- und Backend-Performance-Optimierung (Nettoauszug)

1. Reduzieren Sie die Anzahl der HTTP-Anfragen
Führen Sie Dateien zusammen, indem Sie alle Skripte in einer Skriptdatei oder alle Stylesheets in einer Stylesheet-Datei platzieren und so die Anzahl der HTTP-Anfragen reduzieren .
CSS Sprites sind die bevorzugte Lösung zur Reduzierung von Bildanfragen. Kombinieren Sie alle Hintergrundbilder in einem Bild und verwenden Sie die CSS-Eigenschaften „Hintergrundbild“ und „Hintergrundposition“, um den entsprechenden Bildbereich zu steuern.
Inline-Bilder verwenden das URL-Schema „data:“, um Bilddaten in die Seite einzubetten. Dadurch wird jedoch die Größe des HTML-Dokuments erhöht.
2. Content-Verteilungsnetzwerk verwenden
Content Distribution Network (CDN) ist eine Sammlung von Servern, die in verschiedenen Regionen verteilt sind und Informationen effektiver an Benutzer senden können. Es wählt den Server aus, an den Daten für einen Benutzer gesendet werden sollen, basierend auf einem Maß für die Domänenentfernung. Beispielsweise wird der Server mit den wenigsten Hops zum Erreichen des Benutzers oder der schnellsten Antwortgeschwindigkeit ausgewählt.
3. Fügen Sie dem Header ein Ablaufdatum oder eine Cache-Kontrolle hinzu
Für statische Komponenten: Stellen Sie den Cache-Zeitraum des Headers auf eine ferne Zukunft ein, damit er „niemals ablaufen“ kann.
Für dynamische Komponenten: Verwenden Sie geeignete Cache-Control-Header, um dem Browser bei der Ausführung bestimmter Anforderungen zu helfen.
4. Gzip-Komprimierungskomponente
Das durch Accept-Encoding im Header der HTTP-Anfrage angegebene Komprimierungsformat:
ν Accept-Encoding: gzip, deflate
ν Content- Kodierung: gzip
5. Platzieren Sie das Stylesheet am Anfang
Wenn Sie das Stylesheet an den Kopf des Dokuments verschieben, kann dies das Laden der Seite beschleunigen. Denn durch die Platzierung des Stylesheets am Kopf kann die Seite schrittweise gerendert werden.
6. Fügen Sie das Skript am Ende ein
Skripte können gleichzeitige Downloads blockieren. Die HTTP/1.1-Spezifikation empfiehlt, dass Browser pro Domänennamen nur zwei gleichzeitige Downloads durchführen.
Richten Sie ein Lazy-Loading-Skript ein, das auch am Ende der Seite platziert werden kann
7. Verwenden Sie keine CSS-Ausdrücke
CSS-Ausdrücke sind eine leistungsstarke (und gefährliche) Dynamik Festlegen von CSS-Eigenschaftsmethoden.

Das Problem mit CSS-Ausdrücken besteht darin, dass sie häufiger ausgeführt werden, als die meisten Leute erwarten würden. Ausdrücke werden nicht nur ausgeführt, wenn die Seite angezeigt und in der Größe geändert wird, sondern auch, wenn auf der Seite gescrollt wird und sogar, wenn der Benutzer die Maus über die Seite bewegt. Durch das Hinzufügen eines Zählers zu einem CSS-Ausdruck kann verfolgt werden, wann und wie das CSS ausgeführt wird. Durch Bewegen der Maus auf der Seite können leicht mehr als 10.000 Ausführungen generiert werden.
8. Verwendung von externem JavaScript und CSS
Die Verwendung externer Dateien in realen Anwendungen führt häufig zu schnelleren Seiten, da Browser JavaScript- und CSS-Dateien zwischenspeichern. Wenn in externen Dateien platziertes JavaScript und CSS vom Browser zwischengespeichert werden, besteht keine Notwendigkeit, die Anzahl der HTTP-Anfragen zu erhöhen und die Größe des HTML-Dokuments wird reduziert.
9. Reduzieren Sie DNS-Anfragen
DNS benötigt im Allgemeinen 20–120 Millisekunden, um die IP-Adresse eines bestimmten Domänennamens zu ermitteln. Der Browser lädt nichts vom Zieldomänennamen herunter, bis die DNS-Suche abgeschlossen ist.

10. JavaScript und CSS minimieren

Minimierung bedeutet, unnötige Buchstaben aus dem Code zu entfernen, die Dateigröße zu reduzieren und die Ladegeschwindigkeit zu verbessern.

Beim Reduzieren des Codes müssen Sie alle Kommentare sowie unnötige Leerzeichen (Leerzeichen, neue Zeilen und Tabulatoren) entfernen.

Reduzieren Sie die Größe von JS- oder CSS-Dateien und verbessern Sie die Antwortleistung.

Code-Verschleierung ist eine weitere Optimierungslösung, die im Quellcode verwendet werden kann.

Komprimieren Sie die in die Seite eingebetteten