Informationen zu Richtlinien zur Optimierung der Website-Leistung

In den letzten Tagen habe ich den „Guide to High-Performance Website Construction“ von Steve Souders gelesen. Obwohl dieses Buch vielleicht schon etwas älter ist, sind die in diesem dünnen Büchlein dargelegten Richtlinien zur Website-Performance-Optimierung immer noch sehr nützlich . von Wert. Allen diesen Regeln ist eines gemeinsam: Sie können mit sehr geringem Aufwand deutliche Leistungsverbesserungen erzielen und sind äußerst kostengünstig. Lassen Sie uns ohne weitere Umschweife einige Regeln zur Leistungsoptimierung im Buch zusammenfassen.

Zuallererst ist die im Buch geschriebene goldene Leistungsregel zu beachten: nur 10–20 % der Reaktionszeit wird für das Herunterladen des HTML-Dokuments aufgewendet, die restlichen 80 % bis 90 % der Zeit werden für das Herunterladen aller Komponenten der Seite aufgewendet.
Dies ist auch der Kern der Entstehung der folgenden Leistungsregeln.

Regel 1: Reduzieren Sie HTTP-Anfragen. Die Reihenfolge der Regeln in diesem Buch ist nach ihrer Wichtigkeit geordnet. Die Reduzierung von HTTP-Anfragen ist die erste Regel, die ihre Bedeutung zeigt. Nach der goldenen Regel ist die Reduzierung der Anzahl der Komponenten und damit die Reduzierung von HTTP-Anfragen der effektivste Weg, die Leistung zu optimieren. Es gibt mehrere erwähnenswerte Techniken:

CSS Sprites. Front-End-Mitarbeiter sollten mit der Integration von Bildern in ein großes Bild und der Verwendung der Hintergrundposition für deren Positionierung vertraut sein.

Daten:URL. Es ist erwähnenswert, dass die Umwandlung des Bildes in Inline die Bildanforderungen reduziert. Wenn das Bild im Webpack weniger als 8 KB groß ist, wird es in base64 data:URL konvertiert.

Skript und CSS zusammenführen.

Regel 2: Verwenden Sie CDN. Diese Regel sorgt für eine selbstverständliche Verteilung von Inhalten näher an den Endbenutzern und verkürzt so die Anforderungszeiten.

Regel 3: Expires-Header hinzufügen. Nutzen Sie das Caching sinnvoll und legen Sie Expires-Header mit längeren Gültigkeitsdauern für Inhaltskomponenten fest, die über einen längeren Zeitraum unverändert bleiben.

Regel 4: Komponenten komprimieren. Durch die Verwendung einer Inhaltskodierung wie gzip zur Komprimierung von Dokumenten oder Komponenten kann das entsprechende Datenvolumen in der Regel um etwa 70 % reduziert werden.

Regel 5: Platzieren Sie das Stylesheet oben. Die Seite wird beim Öffnen des Projekts nach und nach angezeigt. Der Benutzer wird das Gefühl haben, dass die Seite schneller ist, und es gibt dem Benutzer auch ein gutes Feedback, während er wartet. Wenn Sie CSS unten platzieren, kann es zu einem weißen Bildschirm kommen.

Regel 6: Platzieren Sie das Skript unten. Wenn die Seite das Skript herunterlädt, wird verhindert, dass andere Inhalte heruntergeladen und gerendert werden, um zu verhindern, dass der Browser neu zeichnet und umfließt. Daher verhindert die Platzierung des Skripts am Ende der Seite nicht die Darstellung des Seiteninhalts, und einige visuelle Komponenten der Seite können so früh wie möglich heruntergeladen werden, ohne blockiert zu werden.

Regel 7: Vermeiden Sie die Verwendung von CSS-Ausdrücken. CSS-Ausdrücke werden häufig ausgewertet, was zu einer schlechten Leistung führt.

Regel 8: Verwenden Sie externes JavaScript und CSS. Rein genommen ist Inlining schneller, da es Regel 1 zur Reduzierung von HTTP-Anfragen erfüllt. Bei diesem Problem muss jedoch die durch das Caching erzielte Leistungsoptimierung berücksichtigt werden, wodurch die Leistung verbessert wird.

Regel 9: Reduzieren Sie DNS-Suchen. Nutzen Sie DNS-Caching sinnvoll, beispielsweise für dauerhafte Verbindungen.

Regel 10: JavaScript optimieren. Entfernen Sie unnötige Leerzeichen, wie es bei unseren gängigen .min.js der Fall ist.

Regel 11: Vermeiden Sie Weiterleitungen. Der 3xx-Antwortstatuscode stellt eine umgeleitete Antwort dar. Die Weiterleitung, die durch das Fehlen eines Schrägstrichs am Ende der URL verursacht wird, erfordert besondere Aufmerksamkeit. Beeinträchtigen Sie nicht die Leistung aufgrund dieses Fehlers.

Regel 12: Löschen Sie doppelte Skripte.

Regel 13: ETag konfigurieren. Apropos, ich muss sagen, dass die bedingten Anfragen If-Modified-Since und If-None-Match beide für die erneute Überprüfung des Caches verwendet werden. Das Problem mit ETag besteht darin, dass beim Erstellen des ETags durch den Server, obwohl die beiden Dateien genau gleich sind, es dennoch unterschiedliche ETags gibt, wenn sie sich auf unterschiedlichen Servern befinden, was die Anzahl der HTTP-Download-Anfragen erhöht, was die Leistung erheblich beeinträchtigt von Websites mit Serverclustern im Hintergrund groß.

Regel 14: Machen Sie Ajax zwischenspeicherbar. Obwohl Ajax asynchron ist, kann es nicht lange auf eine Antwort warten. Optimierungsrichtlinien finden Sie in den oben genannten Leistungsrichtlinien. Dabei steht die gute Nutzung des Caches immer noch im Fokus.

Am Ende des Buches habe ich diese Regeln verwendet, um die zehn besten Websites in den Vereinigten Staaten zu analysieren, und festgestellt, dass es durch die effektive Verwendung dieser Regeln, die ich mir ebenfalls angesehen habe, viel Raum für Leistungsverbesserungen gibt Ich habe die Projekte während meines Praktikums durchgearbeitet und festgestellt, dass es viele Stellen gibt, die optimiert werden können. Sie sollten diese Richtlinien bei der zukünftigen Entwicklung berücksichtigen, damit Benutzer Ihre Produkte besser nutzen können.