Bewertungsregeln von YSlow, einem von Yahoo entwickelten Webseiten-Bewertungs-Plugin
|
YSlow ist ein von Yahoo USA entwickeltes Plug-in zur Seitenbewertung. Es ist sehr gut. Damit können wir viele Mängel unserer Seite erkennen und wissen, wie wir sie verbessern und optimieren können. Studieren Sie die YSlow-Wertungsregeln sorgfältig. Es gibt 12 Hauptelemente: 1. Stellen Sie weniger HTTP-Anfragen. . Wir haben 141 Anfragen (15 JS-Anfragen, 3 CSS-Anfragen, 47 Anfragen für CSS-Hintergrundbilder), was schrecklich ist. Warum werden diese drei Anfragetypen, wenn ich darüber nachdenke, als wichtige nachteilige Faktoren für das Laden der Seite aufgeführt, während übermäßige IMG-Anfragen nicht als nachteilige Faktoren aufgeführt werden? Es stellt sich heraus, dass diese Anfragen vermieden werden können. 15 JS und 3 CSS können durch eine spezielle Methode zusammengeführt werden (die technische Abteilung hat uns geholfen, dieses Problem zu lösen, vielen Dank, hehe). Nach der Zusammenführung werden auf der Seite im Allgemeinen nur ein JS und ein CSS angezeigt (es gibt bestimmte Anforderungen für die JS-Kapselung). Aber wie lassen sich die 47 Anfragen für CSS-Hintergrundbilder lösen? Warum sind reine IMG-Anfragen auf einer Seite sinnvoll, zu viele CSS-Hintergrundbild-Anfragen jedoch von Nachteil? Ich habe lange darüber nachgedacht und es schließlich herausgefunden. Es stellte sich folgendermaßen heraus: Im Allgemeinen verwenden wir Bild-CSS-Hintergründe, um Symbole, Spaltenhintergründe und Bildschaltflächen auf der Seite zu implementieren. Im Allgemeinen sind die in diesem Bild-CSS-Hintergrund verwendeten Bilder relativ klein, sodass es durchaus möglich ist, diese Bilder zu einem relativ großen Bild zusammenzuführen. Auf diese Weise wird auf der Seite nur eine oder höchstens 2-3 CSS-Hintergrundbildanforderungen geben. Später habe ich mir die US-Seite von Yahoo genauer angesehen und festgestellt, dass sie dasselbe taten. Obwohl es eine gewisse Zeit in Anspruch nimmt, diese Symbole, Spaltenhintergründe und Bildschaltflächen regelmäßig zusammenzuführen, um CSS-Aufrufe zu ermöglichen, ist es definitiv kostengünstig und notwendig. YSlow ist ebenfalls sehr zu empfehlen. 2. Verwenden Sie ein CDN. Unser Score hierfür ist F, der niedrigste. Ehrlich gesagt wusste ich am Anfang nicht, was CDN ist. Ich habe es später herausgefunden, nachdem ich bei GOODLE nachgesehen hatte. Der vollständige Name von CDN lautet Content Delivery Network. Sein Zweck besteht darin, dem vorhandenen Internet eine neue Schicht der Netzwerkarchitektur hinzuzufügen und den Inhalt der Website am „Rand“ des Netzwerks zu veröffentlichen, der dem Benutzer am nächsten ist, sodass Benutzer den erforderlichen Inhalt in der Nähe abrufen können. Dies löst das Problem der Überlastung des Internetnetzwerks und verbessert die Reaktionsgeschwindigkeit der Benutzer, die die Website besuchen. Aus technischer Sicht löst es umfassend das Problem langsamer Reaktionszeiten beim Zugriff von Benutzern auf Websites aufgrund geringer Netzwerkbandbreite, großer Benutzerbesuche, ungleichmäßiger Verteilung der Netzwerkpunkte usw. Nachdem ich die obige Erklärung gelesen hatte, verstand ich im Wesentlichen, was CDN ist. Später konsultierte ich die chinesische Site SA und erfuhr, dass unsere Website noch nicht für CDN optimiert wurde, aber es heißt, dass wir über eine fortschrittlichere Technologie verfügen, um ähnliche Probleme zu lösen (die spezifische Technologie wird vertraulich behandelt). Aber schließlich ist CDN auch eine sehr gute Technologie, daher wird eine CDN-Optimierung auf der Grundlage unserer fortschrittlichen Technologie definitiv besser sein als jetzt, hehe. Es wird gesagt, dass SA im nächsten Jahr an mehreren Standorten CND durchführen wird. 3. Fügen Sie einen Expires-Header hinzu, um den abgelaufenen HTTP-Header festzulegen. Durch das Festlegen des Expires-Headers können Skripte, Stylesheets, Bilder, Flash usw. im Cache des Browsers zwischengespeichert werden. Tatsächlich haben wir diese Optimierung auch auf unserer Website durchgeführt, zumindest wurden die Bilder diesbezüglich optimiert, aber es ist noch nicht vollständig abgeschlossen. Unser CSS und JS wurden noch nicht optimiert, aber ein externes Werbe-JS hat das getan, haha. Tatsächlich sollte das Festlegen des abgelaufenen HTTP-Headers in Skripten, Stylesheets und Flash erfolgen. Es wird jedoch gesagt, dass SA dies nicht getan hat, aber es besteht ein gewisses Risiko, da JS und CSS eine bestimmte Logik haben. Wenn sowohl auf dem Server als auch auf dem Client ein Cache vorhanden ist und etwas schief geht, wird es für uns in Zukunft schwieriger, das Problem zu finden. Ich denke jedoch, dass die beiden abgewogen und koexistiert werden können. 4. Gzip-Komponenten komprimieren unseren Seiteninhalt im Gzip-Format. Das Gzip-Format ist eine sehr verbreitete Komprimierungstechnologie. Fast alle Browser können das Gzip-Format dekomprimieren und es kann mit einem sehr großen Verhältnis komprimieren. Die allgemeine Komprimierungsrate beträgt 85 %, was bedeutet, dass eine 100 KB große Seite auf der Serverseite in etwa 25 KB Gzip-Formatdaten komprimiert und an den Client gesendet werden kann. Nach dem Empfang der Gzip-Formatdaten dekomprimiert der Client sie automatisch und zeigt die Seite an. Unsere Website hat davon grundsätzlich 100 % erreicht, aber unsere Bewertung für diesen Punkt erreichte nicht das erhoffte A-Niveau. Der Grund sind unsere externen Links. Unsere Homepage hat beispielsweise ein externes Werbe-JS. Die Website, die dieses JS besitzt, wurde nicht GZIP-optimiert, was unsere Website beeinträchtigt hat. Daher werden wir nur mit B oder C bewertet. 5. Platzieren Sie CSS oben. Platzieren Sie den externen CSS-Link oben auf der Seite. Tatsächlich folgen wir im Allgemeinen diesem Prinzip. Wenn CSS-externe Links als Teil der Logik unterhalb des Seitenkopfs erscheinen, halte ich persönlich dies für einen Fehler an sich. Glücklicherweise haben wir dies im Grunde auf allen unseren Seiten erreicht, aber einige Seiten, wie z. B. die LIST-Seite, haben immer noch CSS-Links, die mit Logik verknüpft sind. Der Grund dafür ist, eine Produktlogik zu lösen, die von vornherein nicht sinnvoll ist. Daher haben wir als Front-End-Webentwickler die Pflicht, zu verhindern, dass diese unangemessenen Produktlogiken unsere Seitenergebnisse und Seitenladegeschwindigkeiten zerstören, und wir können sie nicht einfach nur der Implementierung wegen implementieren. Vorherige Seite 1 2 Nächste Seite Gesamten Artikel lesen |
<<: So ändern Sie das Root-Passwort von MySQL in Docker
>>: Verwendung des Array-Filters filter() in JS
Artikel empfehlen
Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste
Dieses Projekt teilt den spezifischen Code von Vu...
Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)
iOS 1. URL-Schema Diese Lösung ist grundsätzlich ...
Warum sollten MySQL-Felder NOT NULL verwenden?
Ich habe vor Kurzem in einer neuen Firma angefang...
Detaillierte Erläuterung des Problems bei der Konfiguration des Servlet-URL-Musters in Tomcat
Beim Konfigurieren von web.xml für Tomcat ist Ser...
jQuery-Plugin zum Erreichen eines Bildvergleichs
In diesem Artikelbeispiel wird der spezifische Co...
Ausführliche Erläuterung der gespeicherten MySQL-Prozeduren (in, out, inout)
1. Einleitung Es wird seit Version 5.0 unterstütz...
So legen Sie die Tabellenbreite in IE8 und Chrome fest
Wenn die oben genannten Einstellungen in IE8 und C...
Detaillierte Erläuterung der Konfigurationsmethode der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation
1. Beschreibung Früher haben wir über die Install...
Eine kurze Diskussion über die häufig verwendeten APIs der VUE uni-app
Inhaltsverzeichnis 1. Routing und Seitensprung 2....
Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren
In diesem Artikel wird der spezifische Code von V...
MySQL-Datenbank-Grundlagen SQL-Fensterfunktion Beispielanalyse-Tutorial
Inhaltsverzeichnis Einführung Einführung Aggregat...
Idea stellt Remote-Docker bereit und konfiguriert die Datei
1. Ändern Sie die Docker-Konfigurationsdatei des ...
Einige einfache Implementierungscodes des Formularelements nehmen die Registrierung als Beispiel
Code-Implementierung: Code kopieren Der Code laut...
Implementierung der Anmeldeseite des tatsächlichen Kampfprotokolls von Vue
Inhaltsverzeichnis 1. Vorbereitende Maßnahmen 1.1...
Detailliertes Tutorial zur Migration des Home-Verzeichnisses auf eine neue Partition unter Ubuntu
Wenn das Home-Verzeichnis des Benutzers immer grö...