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 :
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
Artikel empfehlen
Analyse und Meinungen zur Designstruktur des großen Bildes auf der Homepage der Taobao Mall (Bild)
Nachdem ich das letzte Mal die Taobao-Detailseite ...
Das vergessene Button-Tag
Hinweis: Dieser Artikel wurde von jemand anderem ü...
Installation von VMware Workstation unter Linux (Ubuntu)
Wenn Sie nicht wissen, wie das System auf dem Com...
So finden Sie langsame MySQL-Abfragen
Vorwort Ich glaube, dass jeder in seiner tägliche...
Führen Sie die Shell oder das Programm im Docker-Container auf dem Host aus.
Um zu vermeiden, dass für den Betrieb immer wiede...
Vue implementiert Benutzeranmeldung und Token-Verifizierung
Im Falle einer vollständigen Trennung von Front-E...
css Alle Elemente ab dem n-ten abrufen
Der spezifische Code lautet wie folgt: <div id...
Detaillierte Bereitstellung von Docker+Gitlab+Gitlab-Runner
Umfeld Server: centos7 Kunde: Fenster Stellen Sie...
Erfahren Sie mehr über den MySQL-Ausführungsplan
Inhaltsverzeichnis 1. Einführung in den Implement...
Verwenden Sie die Clip-Path-Eigenschaft von CSS, um unregelmäßige Grafiken anzuzeigen
clip-path CSS-Eigenschaften verwenden Clipping, u...
Implementierung der Vue-Anmeldefunktion
Inhaltsverzeichnis Vorne geschrieben Anmeldeübers...
Implementierung des Imports und Exports von Docker-Images
Docker-Nutzung von Gitlab Gitlab Docker Startbefe...
Ausführliche Erläuterung der verschiedenen Methoden sowie der Vor- und Nachteile der JavaScript-Vererbung
Inhaltsverzeichnis 1. Vererbung der Prototypkette...
Was ist em? Einführung und Konvertierungsmethode von em und px
Was ist sie? „em“ bezieht sich auf die Schrifthöhe...
Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.17 winx64.zip
Vorwort: Ich habe Win10 neu installiert und gleic...