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

So setzen Sie das Zabbix-Passwort zurück (ein Schritt)

14 Techniken für leistungsstarke Websites

So setzen Sie das Zabbix-Passwort zurück (ein Schritt)

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion

4 Möglichkeiten, sich schnell Linux-Befehle selbst beizubringen

Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

14 Techniken für leistungsstarke Websites

MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial

So fügen Sie Tastenkombinationen in Xshell hinzu

Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert

Vue implementiert nahtloses Scrollen von Listen

Artikel empfehlen

Analyse einfacher Anwendungsbeispiele für abgeleitete MySQL-Tabellen (abgeleitete Tabellen)

Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React

nginx generiert automatisch Konfigurationsdateien im Docker-Container

Detaillierte Erklärung zur Verwendung von Vue-Mixin

Multiservice-Image-Packaging-Vorgang von Dockerfile unter Aufsicht

Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx

Bereitstellung und Konfiguration des Apache-Dienstes unter Linux

So installieren Sie MongoDB 4.2 mit Yum auf CentOS8

Vue+js realisiert Video-Ein- und Ausblendeffekte

So konfigurieren Sie Anti-Hotlinking für den Nginx-Websitedienst (empfohlen)

Heute bin ich auf ein sehr seltsames Problem gestoßen und habe es selbst gelöst

Detaillierte Erklärung von MySQL Explain

Eine detaillierte Diskussion der Komponenten in Vue

vue-table implementiert das Hinzufügen und Löschen

Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen