14 Techniken für leistungsstarke Websites

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

Artikel empfehlen

Zusammenfassung der Wissenspunkte des Nodejs-Clustermoduls und Anwendungsbeispiele

Der Interviewer wird Sie manchmal fragen: „Sagen ...

Eine kurze Diskussion über die Lösung für übermäßige Daten in ElementUI el-select

Inhaltsverzeichnis 1. Szenariobeschreibung 2. Lös...

So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux

Nach der Eingabe von yum in Linux erscheint die E...

Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler

Fehlermeldung: Die Store-Update-, Insert- oder De...

MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter CentOS6.9

CentOS6.9 installiert Mysql5.7 zu Ihrer Informati...

Beispiel für die Ausführung eines MySQL-Befehlszeilenskripts

Dieser Artikel veranschaulicht anhand eines Beisp...

Tutorial zum Bereitstellen von nginx+uwsgi in Django-Projekten unter Centos8

1. Virtuelle Umgebung virtualenv installieren 1. ...

Detaillierte Erläuterung des grafischen Tutorials zur VMware12-Installation und CentOS8-Konfiguration (Tutorial zur Installation virtueller VM-Maschinen auf CentOS8)

CentOS8 wurde vor ein paar Tagen veröffentlicht. ...

Detaillierte Erläuterung der Umleitungskonfiguration und -praxis von Rewrite in Nginx

1: Verstehen Sie die Bedeutung von Adressumschrei...

Lösung für das Problem, dass Ubuntu in der virtuellen Maschine keine Verbindung zum Internet herstellen kann

Es ist sehr mühsam, eine virtuelle Maschine einzu...

So rufen Sie mit dem Flash-Plugin die Kamera des PCs auf und binden diese in die TML-Seite ein

Vorwort Der Grund für das Schreiben dieses Artikel...

MySQL-Beispielcode für die Addition und Subtraktion von Datum und Uhrzeit

Inhaltsverzeichnis 1.MySQL addiert oder subtrahie...

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Hinweis: Der grundlegende Verzeichnispfad für die...

Ein Beispiel zum Schreiben eines großen Sonnenwettersymbols in reinem CSS

Wirkung Das Wirkungsdiagramm sieht wie folgt aus ...

Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann

In diesem Artikel finden Sie eine Sammlung von Ja...