14 Techniken für leistungsstarke Websites

Original : http://developer.yahoo.com/performance/rules.html
20.03.2007 Steve Souders
Übersetzt von mask
Ab 2004 arbeitete ich in der Outlier Performance Group bei Yahoo. Wir sind ein sehr kleines Team, das sich auf die Qualitätsprüfung und Verbesserung der Produkte von Yahoo spezialisiert hat. Als Backend-Ingenieur bastele ich derzeit an Projekten zur Optimierung des Frontend-Codes, daher denke ich, dass dies eine hervorragende Gelegenheit zur Verbesserung ist. Mein Ziel bestand darin, das Benutzererlebnis zu verbessern. Daher habe ich die Browser-Reaktionszeit bei verschiedenen Bandbreiten gemessen und das folgende Diagramm erstellt, das den HTTP-Verkehr von http://yahoo.com zeigt.

Das erste Etikett im obigen Symbol ist HTML, also das erste, was in einem HTML-Dokument geladen wird. In diesem Beispiel macht das Lesen des HTML-Codes nur 5 % der gesamten Antwortzeit aus. Dieses Ergebnis trifft auf die überwiegende Mehrheit der Websites zu. Unter den zehn bestbewerteten Websites in den Vereinigten Staaten liegt nur eine Website über 5 %, aber unter 20 %. Die verbleibenden 80 % der Zeit werden zum Lesen anderer Inhalte auf der Webseite verwendet, d. h. des Front-Ends (der Originaltext ist das Front-End, d. h. der restliche Inhalt ohne den HTML-Code, der aus Bildern, Skripten, Flash, Videos und verschiedenen Dingen bestehen kann). Dies ist der Hauptgrund, warum wir uns auf diese Dinge konzentrieren müssen, um die Anzeigegeschwindigkeit zu verbessern.
Es gibt drei Hauptgründe, warum Sie am Frontend beginnen sollten :

Hier besteht Verbesserungs- und Erweiterungspotential. Wenn Sie die Größe um die Hälfte reduzieren können, können Sie die Reaktionszeit um 40 % verkürzen. Die Verbesserung des Frontends erfordert weniger Zeit und Ressourcen als die Verbesserung des Backends. (Zur Verbesserung des Backends müssen die Anwendungsplanung und der Code neu gestaltet werden, es müssen Möglichkeiten zur Codeoptimierung gefunden, Hardwarekonfigurationen hinzugefügt oder geändert, Datenbanken verteilt usw. werden.) Verbesserungen des Frontends haben sich in unserer Arbeit bewährt. Bei Yahoo haben wir fünfzig Teams, die ihre benutzerseitige Reaktionszeit unter Einhaltung unserer Bestleistungsregeln um 25 % oder mehr verbessert haben.
Unsere goldene Regel besteht darin, zuerst die Front-End-Leistung zu optimieren, da diese Dinge 80 % der Reaktionszeit auf der Benutzerseite in Anspruch nehmen.
1. Reduzieren Sie die Anzahl der HTTP-Anfragen <br />Bilder, CSS, Skripte, Flash usw. erhöhen die Anzahl der HTTP-Anfragen. Die Reduzierung dieser Elemente kann die Antwortzeit verkürzen.
Die CSS-Sprites-Technologie kann die Anzahl der Bildanforderungen reduzieren, verstreute kleine Bilder zusammenfügen und mithilfe der Hintergrundposition die Position des Hintergrundbilds ändern. Die Voraussetzung ist, dass die Breite und Höhe des HTML-Elements im Voraus definiert sind. Tatsächlich ist es wie eine Maske. Sie werden unterschiedliche Szenen sehen, wenn Sie den Hintergrund verschieben.
Eingebettete Bilder verwenden das URL-Schema data:, um den Bildinhaltscode direkt in den HTML-Code einzubetten, wodurch die Größe des HTML-Codes zunimmt. Die bessere Methode besteht darin, die eingebetteten Bilder in CSS einzubetten (CSS wird zwischengespeichert), wodurch die Anzahl der HTTP-Anfragen besser reduziert wird, ohne die Größe des HTML zu erhöhen.
Viele Benutzer greifen mit leerem Cache auf Ihre Site zu. Daher ist die Geschwindigkeit beim ersten Zugriff wichtig.
Die erste Regel ist die wichtigste.

Vorherige Seite 1 2 3 Nächste Seite Mehr lesen

<<: Ungewöhnliche, aber nützliche Tags in Xhtml

>>: Detaillierte Erläuterung der Idee zur Implementierung dynamischer Spalten in AngularJS-Loop-Objekteigenschaften

Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre

14 Techniken für leistungsstarke Websites

Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre

Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

Gründe und Lösungen für die fehlende Remote-Verbindung zur MySQL-Datenbank unter CentOS7

Ant entwirft eine Vue-Tabelle, um ein vollständiges Beispiel skalierbarer Spalten zu erhalten

Deaktivieren der AutoVervollständigen-Funktion im Eingabefeld

Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()

Zusammenfassung der Verwendung von JavaScript JSON.stringify()

So definieren Sie Datenbeispiele in Vue

Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft

Implementierungsschritte zur Kapselung von Komponenten basierend auf React

Artikel empfehlen

Details zur Verwendung des JSON-Typs in MySQL 5.7

Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte

So zeigen Sie Anwendungsprotokolle von Docker-Containern an

Warum MySQL das Löschen von Daten nicht empfiehlt

Das Prinzip und die Anwendung der ES6-Dekonstruktionszuweisung

Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank

Wie verstecke ich einen bestimmten Text in HTML?

Der Browser speichert die relevanten HTTP-Header im Cache, um die Anzahl der HTTP-Anfragen zu minimieren

Detaillierte Erklärung der referenziellen Integrität in SQL (eins-zu-eins, eins-zu-viele, viele-zu-viele)

mysql5.7-Remotezugriffseinstellungen

Lösen Sie das Problem der unsicheren Docker x509-Registrierung

Neunundvierzig JavaScript-Tipps und Tricks

Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS

Detaillierte Erklärung des Unterschieds zwischen Pfeilfunktionen und normalen Funktionen in JavaScript

Detaillierte Erläuterung der Nginx Rewrite-Nutzungsszenarien und Codebeispiele