PageSpeed ​​Optimierung im Überblick

Ich glaube, dass das Internet zu einem immer unverzichtbareren Teil des Lebens der Menschen geworden ist. Durch die Anwendung von Rich Clients wie Ajax und Flex können die Leute viele Funktionen, die ursprünglich nur in C/S verfügbar waren, „freudiger“ erleben. Beispielsweise hat Google die grundlegendsten Office-Anwendungen bereits ins Internet verlagert. Dies ist zwar praktisch, führt aber zweifellos dazu, dass die Seitengeschwindigkeit immer weiter abnimmt. Ich bin Frontend-Entwickler. Laut einer Yahoo-Umfrage beträgt der Anteil des Backends an der Leistung nur 5 %, während der Anteil des Frontends 95 % beträgt, von denen 88 % optimiert werden können.

Oben ist ein Diagramm des Lebenszyklus einer Web 2.0-Seite. Der Ingenieur beschrieb den Prozess anschaulich als vier Phasen: „Schwangerschaft, Geburt, Schulabschluss und Heirat.“ Wenn wir uns über den Vorgang beim Klicken auf einen Weblink im Klaren sind und nicht nur über eine einfache Anfrage-Antwort, können wir viele Details herausfinden, die die Leistung verbessern können. Heute habe ich mir einen Vortrag von Pony Ma von Taobao über Web-Performance-Forschung für das Yahoo-Entwicklungsteam angehört. Ich hatte das Gefühl, dass ich viel daraus gelernt habe und wollte es auf meinem Blog teilen.

Ich glaube, viele Leute haben von den 14 Regeln zur Optimierung der Website-Leistung gehört. Weitere Informationen finden Sie unter developer.yahoo.com

1. Reduzieren Sie die Anzahl der HTTP-Anfragen so weit wie möglich [Inhalt]
2. CDN (Content Delivery Network) [Server] verwenden
3. Expires-Header (oder Cache-Control) hinzufügen [Server]
4. Gzip-Komponente [Server]
5. Platzieren Sie CSS-Stile oben auf der Seite [css]
6. Skripte nach unten verschieben (auch Inline-Skripte) [Javascript]
7. Vermeiden Sie die Verwendung von Ausdrücken in CSS [css]
8. JavaScript und CSS in externe Dateien trennen [javascript] [css]
9. Reduzieren Sie DNS-Anfragen [Inhalt]
10. Komprimieren Sie JavaScript und CSS (einschließlich Inline-JS) [javascript] [css]
11. Weiterleitungen vermeiden [Server]
12. Entfernen Sie doppelte Skripte [Javascript]
13. Entity Tags (ETags) konfigurieren [css]
14. AJAX-Cache aktivieren

Es gibt ein Plugin namens yslow in Firefox, das in Firebug integriert ist. Sie können es verwenden, um die Leistung Ihrer Website in diesen Aspekten einfach zu überprüfen.

Dies ist das Ergebnis der Bewertung meiner Website Xifengfang mit yslow. Leider erreichte sie nur 51 Punkte. hehe. Die Punktzahlen der großen chinesischen Websites sind nicht hoch. Ich habe es gerade getestet und festgestellt, dass Sina und NetEase beide 31 Punkte erreichten. Dann beträgt das Ergebnis von Yahoo (US) tatsächlich 97 Punkte! Dies zeigt die Anstrengungen, die Yahoo in dieser Hinsicht unternommen hat. Gemessen an den 14 Regeln, die sie zusammengefasst haben, und den 20 neuen Punkten, die hinzugefügt wurden, gibt es viele Details, über die wir wirklich nie nachdenken würden, und einige Praktiken sind sogar ein bisschen „unnormal“.

Erstens: Stellen Sie so wenig HTTP-Anfragen wie möglich

HTTP-Anfragen sind zeitaufwändig. Daher kann die Geschwindigkeit der Webseite natürlich erhöht werden, wenn man Wege findet, die Anzahl der Anfragen zu reduzieren. Zu den häufig verwendeten Methoden gehören das Zusammenführen von CSS, JS (separates Zusammenführen von CSS- und JS-Dateien auf einer Seite), Imagemaps und CSS-Sprites. Der Grund für die Aufteilung von CSS- und JS-Dateien in mehrere Dateien kann natürlich auch in Überlegungen wie der CSS-Struktur und -Freigabe liegen. Der Ansatz der chinesischen Website von Alibaba bestand damals darin, die Entwicklung separat durchzuführen und dann JS und CSS im Hintergrund zusammenzuführen. Auf diese Weise handelte es sich zwar immer noch um eine einzelne Anfrage für den Browser, aber während der Entwicklung konnte sie dennoch auf mehrere Anfragen zurückgeführt werden, was für die Verwaltung und wiederholte Referenzen praktisch war. Yahoo empfiehlt sogar, CSS und JS der Homepage direkt in die Seitendatei zu schreiben, anstatt extern darauf zu verweisen. Da die Homepage zu viele Besuche hat, kann durch diese Maßnahme auch die Anzahl der Anfragen um zwei reduziert werden. Tatsächlich ist dies bei vielen inländischen Portalen der Fall.

Bei CSS-Sprites werden einfach die Hintergrundbilder auf der Seite zu einem zusammengeführt und der Hintergrund dann durch den durch die CSS-Eigenschaft „background-position“ definierten Wert geführt. Dies ist derzeit auf den chinesischen Websites von Taobao und Alibaba der Fall. Bei Interesse können Sie sich die Hintergrundbilder von Taobao und Alibaba ansehen.

http://www.csssprites.com/ Dies ist eine Tool-Website, die die von Ihnen hochgeladenen Bilder automatisch zusammenführen und die entsprechenden Hintergrundpositionskoordinaten angeben kann. Und geben Sie die Ergebnisse in den Formaten PNG und GIF aus.

Artikel 2: Verwenden Sie ein Content Delivery Network

Ehrlich gesagt weiß ich nicht viel über CDN. Einfach ausgedrückt: Durch das Hinzufügen einer neuen Netzwerkarchitektur zum bestehenden Internet werden die Website-Inhalte auf dem Cache-Server veröffentlicht, der dem Benutzer am nächsten ist. Durch die DNS-Lastausgleichstechnologie wird die Quelle des Benutzers ermittelt und der nächstgelegene Cache-Server wird aufgerufen, um die erforderlichen Inhalte abzurufen. Benutzer in Hangzhou greifen auf Inhalte auf Servern in der Nähe von Hangzhou zu, und Benutzer in Peking greifen auf Inhalte auf Servern in der Nähe von Peking zu. Dadurch kann die Datenübertragungszeit über das Netzwerk effektiv verkürzt und die Geschwindigkeit erhöht werden. Ausführlichere Informationen finden Sie in der Erklärung zu CDN in der Baidu-Enzyklopädie. Yahoo! verteilt statische Inhalte an CDN, um die Benutzereinwirkungszeit um 20 % oder mehr zu reduzieren.

Diagramm der CDN-Technologie:

CDN-Netzwerkdiagramm:

Artikel 3. Einen Expires-Header hinzufügen

Heutzutage sind immer mehr Bilder, Skripte, CSS und Flash in Webseiten eingebettet. Wenn wir darauf zugreifen, stellen wir zwangsläufig viele HTTP-Anfragen. Tatsächlich können wir diese Dateien zwischenspeichern, indem wir den Expires-Header festlegen. Expire gibt tatsächlich die Cache-Zeit eines bestimmten Dateityps im Browser über eine Header-Nachricht an. Die meisten Bilder und Flash-Dateien müssen nach ihrer Veröffentlichung nicht häufig geändert werden. Nach dem Zwischenspeichern muss der Browser diese Dateien nicht mehr vom Server herunterladen, sondern kann sie direkt aus dem Cache lesen, was den Seitenzugriff erheblich beschleunigt. Ein typisches HTTP 1.1-Protokoll gibt die folgenden Header-Informationen zurück:
HTTP/1.1 200 OK
Datum: Fr, 30. Okt. 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max. Alter = 3600, muss erneut validiert werden
Läuft ab: Fr., 30. Okt. 1998 14:19:41 GMT
Letzte Änderung: Montag, 29. Juni 1998, 02:28:12 GMT
ETag: "3e86-410-3596fbbc"
Inhaltslänge: 1040
Inhaltstyp: text/html

Dies kann durch die Festlegung von Cache-Control und Expires über serverseitige Skripte erfolgen.

Legen Sie beispielsweise in PHP fest, dass es nach 30 Tagen abläuft:

<!--pHeader("Cache-Control: must-revalidate");$offset = 60 * 60 * 24 * 30;$ExpStr = "Expires: " . gmdate("D, d MYH:i:s", time() + $offset) . " GMT";Header($ExpStr);-->Dies kann auch durch die Konfiguration des Servers selbst erfolgen. Ich bin mir darüber nicht ganz im Klaren, haha. Wenn Sie mehr wissen möchten, besuchen Sie http://www.web-caching.com/

Soweit ich weiß, beträgt die Ablaufzeit der chinesischen Alibaba-Site derzeit 30 Tage. Allerdings gab es während dieser Zeit einige Probleme, insbesondere die Einstellung der Ablaufzeit des Skripts sollte sorgfältig bedacht werden, da es sonst nach der Aktualisierung der entsprechenden Skriptfunktion lange dauern kann, bis der Client solche Änderungen „wahrnimmt“. Ich bin schon einmal auf dieses Problem gestoßen, als ich [Projekt vorschlagen] durchgeführt habe. Daher sollten Sie sorgfältig überlegen, was zwischengespeichert werden soll und was nicht.

4. Gzip-Komprimierung aktivieren: Gzip-Komponenten

Die Idee von Gzip besteht darin, die Datei vor der Übertragung serverseitig zu komprimieren. Dadurch kann die Größe der übertragenen Datei erheblich reduziert werden. Nach Abschluss der Übertragung dekomprimiert der Browser den komprimierten Inhalt erneut und führt ihn aus. Die meisten aktuellen Browser unterstützen gzip „gut“. Nicht nur Browser können es erkennen, sondern auch die wichtigsten „Crawler“, sodass SEO-Experten beruhigt sein können. Darüber hinaus ist die Komprimierungsrate von gzip sehr hoch, im Allgemeinen etwa 85 %, was bedeutet, dass eine 100-K-Seite auf der Serverseite auf etwa 25 K komprimiert werden kann, bevor sie an den Client gesendet wird. Informationen zum spezifischen Gzip-Komprimierungsprinzip finden Sie im Artikel „Gzip-Komprimierungsalgorithmus“ auf csdn. Yahoo legt ausdrücklich Wert darauf, dass sämtliche Textinhalte mit GZIP komprimiert werden müssen: HTML (PHP), JS, CSS, XML, TXT … Unsere Website schneidet in dieser Hinsicht gut ab und erhält die Note A. Unsere Homepage war vorher nicht A, da auf der Homepage viele JS von Werbecodes platziert waren. Die JS auf den Websites der Inhaber dieser Werbecodes wurden nicht von gzip komprimiert, was unsere Website ebenfalls nach unten ziehen würde.

Die oben genannten drei Punkte gehören größtenteils zum serverseitigen Inhalt und ich habe nur ein oberflächliches Verständnis davon. Ich hoffe, Sie können mich auf etwaige Fehler aufmerksam machen, die ich gemacht habe.

Artikel 5. Stylesheets an den Anfang stellen

Warum CSS oben auf der Seite platzieren? Denn Browser wie IE und Firefox rendern erst etwas, wenn alle CSS vollständig übertragen sind. Der Grund ist so einfach, wie Xiao Ma sagte. css, der vollständige Name ist Cascading Style Sheets. Kaskadierung bedeutet, dass das letztere CSS das vorherige CSS abdecken kann und das CSS der höheren Ebene das CSS der niedrigeren Ebene abdecken kann. In [css! Diese hierarchische Beziehung wurde am Ende dieses Artikels kurz erwähnt. Hier müssen wir nur wissen, dass CSS überschrieben werden kann. Da das vorherige überschrieben werden kann, ist es für den Browser zweifellos sinnvoll, es erst nach dem vollständigen Laden darzustellen. In vielen Browsern, wie z. B. dem Internet Explorer, besteht das Problem beim Platzieren des Stylesheets am unteren Seitenrand darin, dass es die sequentielle Anzeige von Webseiteninhalten verhindert. Der Browser blockiert die Anzeige, um ein Neuzeichnen der Seitenelemente zu vermeiden, sodass dem Benutzer nur eine leere Seite angezeigt wird. Firefox blockiert die Anzeige nicht, aber es kann sein, dass einige Seitenelemente während des Herunterladens des Stylesheets neu gezeichnet werden müssen, was zu Flackerproblemen führen kann. Deshalb sollten wir CSS so schnell wie möglich laden

Dieser Bedeutung folgend, zeigen sich bei genauerem Hinsehen tatsächlich Bereiche, die optimiert werden können. Die beiden auf dieser Site enthaltenen CSS-Dateien sind beispielsweise <link rel="stylesheet" rev="stylesheet" href="http://www.space007.com/themes/google/style/google.css" type="text/css" media="screen" /> und <link rel="stylesheet" rev="stylesheet" href="http://www.space007.com/css/print.css" type="text/css" media="print" />. Anhand der Medien können Sie erkennen, dass das erste CSS für den Browser und die zweite CSS-Datei für den Druckstil bestimmt ist. Aus den Verhaltensgewohnheiten des Benutzers muss hervorgehen, dass der Ausdruck einer Seite nach der Anzeige der Seite erfolgen muss. Ein besserer Ansatz wäre daher, dieser Seite nach dem Laden dynamisch CSS für Druckgeräte hinzuzufügen, was die Geschwindigkeit etwas erhöhen kann. (Ha ha)

Artikel 6. Platzieren Sie Skripte am Ende

Das Platzieren des Skripts am unteren Seitenrand hat zwei Gründe: 1. Um zu verhindern, dass die Ausführung des Skripts den Download der Seite blockiert. Wenn der Browser während des Seitenladevorgangs die JS-Ausführungsanweisung liest, interpretiert er sie vollständig und liest dann den folgenden Inhalt. Wenn Sie es nicht glauben, können Sie eine JS-Endlosschleife schreiben, um zu sehen, ob die Dinge unterhalb der Seite immer noch angezeigt werden. (Die Ausführung von setTimeout und setInterval ähnelt ein wenig Multithreading, und die folgende Inhaltswiedergabe wird vor der entsprechenden Antwortzeit fortgesetzt.) Die Logik dahinter ist, dass js location.href oder andere Funktionen ausführen kann, die den Prozess dieser Seite jederzeit vollständig unterbrechen können. In diesem Fall müssen Sie natürlich warten, bis es ausgeführt wird, bevor Sie es laden. Daher kann die Platzierung am Ende der Seite die Ladezeit der visuellen Elemente der Seite effektiv verkürzen. 2. Das zweite durch das Skript verursachte Problem besteht darin, dass es die Anzahl paralleler Downloads blockiert. Die HTTP/1.1-Spezifikation empfiehlt, dass die Anzahl paralleler Downloads pro Host in einem Browser 2 nicht überschreiten sollte (IE kann nur 2 haben, andere Browser wie FF sind standardmäßig auf 2 eingestellt, aber der neue IE8 kann bis zu 6 haben). Wenn Sie die Bilddateien auf mehrere Maschinen verteilen, können Sie also mehr als zwei parallele Downloads erreichen. Während die Skriptdatei heruntergeladen wird, startet der Browser jedoch keine anderen parallelen Downloads.

Natürlich ist für jede Website immer noch fraglich, ob das Laden von Skripten am unteren Seitenrand durchführbar ist. Beispielsweise die Seite der chinesischen Alibaba-Website. An vielen Stellen gibt es Inline-JS, und die Anzeige der Seite hängt stark davon ab. Ich gebe zu, dass dies weit vom Konzept nicht aufdringlicher Skripte entfernt ist, aber viele „historische Probleme“ sind nicht so einfach zu lösen.

Artikel 7. Vermeiden Sie die Verwendung von Ausdrücken in CSS

Allerdings werden dadurch zwei Ebenen sinnloser Verschachtelung hinzugefügt, was definitiv nicht gut ist. Es bedarf einer besseren Methode.

8. Machen Sie JavaScript und CSS extern

Ich denke, das ist leicht zu verstehen. Dies sollte nicht nur aus der Perspektive der Leistungsoptimierung, sondern auch im Hinblick auf eine einfache Wartbarkeit des Codes erfolgen. Das Schreiben von CSS und JS in den Seiteninhalt kann 2 Anfragen reduzieren, erhöht jedoch auch die Größe der Seite. Wenn CSS und JS zwischengespeichert wurden, gibt es nicht zwei unnötige HTTP-Anfragen. Natürlich werden sich, wie ich bereits sagte, einige spezielle Seitenentwickler weiterhin für Inline-CSS- und JS-Dateien entscheiden.

Artikel 9. Reduzieren Sie DNS-Lookups

Im Internet besteht eine Eins-zu-eins-Entsprechung zwischen Domänennamen und IP-Adressen. Domänennamen (kuqin.com) sind leicht zu merken, aber Computer erkennen sie nicht. Damit Computer sich gegenseitig „erkennen“, müssen sie in IP-Adressen umgewandelt werden. Jeder Computer im Netzwerk hat eine eindeutige IP-Adresse. Die Konvertierung zwischen Domänennamen und IP-Adressen wird als Domänennamenauflösung bezeichnet, auch bekannt als DNS-Abfrage. Ein DNS-Auflösungsprozess dauert 20-120 Millisekunden. Bevor die DNS-Abfrage abgeschlossen ist, lädt der Browser nichts unter dem Domänennamen herunter. Daher kann die Reduzierung der DNS-Abfragezeit das Laden von Seiten beschleunigen. Yahoo empfiehlt, die Anzahl der Domänennamen auf einer Seite auf 2–4 zu begrenzen. Dies erfordert eine gute Planung der gesamten Seite. Diesbezüglich sind wir derzeit nicht sehr erfolgreich und viele Systeme zur Anzeigenübermittlung halten uns zurück.

10. JavaScript minimieren

Die Vorteile der Komprimierung von JS und CSS liegen auf der Hand, da dadurch die Anzahl der Seitenbytes reduziert wird. Je kleiner die Kapazität, desto schneller wird die Seite geladen. Neben der Lautstärkereduzierung kann die Komprimierung auch einen gewissen Schutz bieten. Wir haben in dieser Hinsicht gute Arbeit geleistet. Zu den häufig verwendeten Komprimierungstools gehören JsMin, YUI Compressor usw. Darüber hinaus stellt uns http://dean.edwards.name/packer/ auch ein sehr praktisches Online-Komprimierungstool zur Verfügung. Sie können den Größenunterschied zwischen komprimierten und unkomprimierten JS-Dateien auf der jQuery-Webseite sehen:

Ein Nachteil der Komprimierung besteht natürlich darin, dass die Lesbarkeit des Codes verloren geht. Ich glaube, dass viele Freunde, die am Frontend arbeiten, auf dieses Problem gestoßen sind: Die Wirkung bei Google ist sehr cool, aber wenn man sich den Quellcode ansieht, sieht man, dass dort viele Zeichen zusammengedrängt sind und sogar die Funktionsnamen ersetzt wurden. Das ist so beängstigend! Wäre es nicht sehr umständlich, den eigenen Code zu pflegen, wenn es so wäre? Die derzeit auf allen chinesischen Alibaba-Sites angewandte Vorgehensweise besteht darin, JS und CSS beim Veröffentlichen auf der Serverseite zu komprimieren. Dies erleichtert uns die Wartung unseres eigenen Codes.

Artikel 11. Weiterleitungen vermeiden

Ich habe vor kurzem den Artikel „Internet Explorer und Verbindungslimits“ auf ieblog gesehen. Wenn Sie beispielsweise http://www.kuqin.com/ eingeben, generiert der Server automatisch eine 301-Serverumleitung zu http://www.kuqin.com/. Sie können dies sehen, indem Sie auf die Adressleiste des Browsers schauen. Diese Umleitung braucht natürlich Zeit. Natürlich ist dies nur ein Beispiel. Es gibt noch viele weitere Gründe für eine Umleitung. Was jedoch unverändert bleibt, ist, dass jede zusätzliche Umleitung die Webanforderungen erhöht und daher minimiert werden sollte.

Artikel 12: Doppelte Skripte entfernen

Ich denke, Sie wissen das, ohne es sagen zu müssen, nicht nur aus Leistungssicht, sondern auch aus Sicht der Codestandards. Wir müssen jedoch zugeben, dass wir häufig möglicherweise doppelten Code hinzufügen, nur um den momentanen Bedarf zu decken. Vielleicht kann ein einheitliches CSS-Framework und JS-Framework unser Problem besser lösen. Xiaozhus Standpunkt ist völlig richtig. Es ist nicht nur wichtig, Duplikate zu vermeiden, sondern auch, sie wiederverwendbar zu machen.

Artikel 13. ETags konfigurieren

Ich verstehe das auch nicht, haha. Eine relativ ausführliche Erklärung habe ich auf inforQ gefunden: „Verwenden von ETags zur Reduzierung der Bandbreite und Belastung von Webanwendungen“. Interessierte Studierende können sich das gerne anschauen.

Artikel 14: Ajax zwischenspeicherbar machen

Muss Ajax zwischengespeichert werden? Bei einer Ajax-Anfrage ist es häufig erforderlich, einen Zeitstempel hinzuzufügen, um das Caching zu vermeiden. Es ist wichtig, sich daran zu erinnern, dass „asynchron“ nicht „sofort“ bedeutet. Denken Sie daran: Auch wenn AJAX dynamisch generiert wird und nur für einen Benutzer funktioniert, kann es trotzdem zwischengespeichert werden.