|
Best Practices für die Web-Frontend-Optimierung: Inhalt
Bewährte Methoden zur Web-Frontend-Optimierung: Server
Best Practices zur Web-Frontend-Optimierung: Cookies
Best Practices zur Web-Frontend-Optimierung: CSS
Best Practices für die Web-Frontend-Optimierung: JavaScript
Best Practices zur Web-Frontend-Optimierung: Bilder
Best Practices zur Web-Frontend-Optimierung: Mobil (iPhone) Das Exceptional Performance-Team von Yahoo! hat herausragende Beiträge zum Web-Frontend geleistet. Auch die Anzahl der bekannten Optimierungsregeln hat sich von 13 auf 14, dann auf 20 und mittlerweile auf 34 erhöht – es geht wirklich mit der Zeit. Auch die neuesten 34 Artikel werden aus unterschiedlichen Perspektiven kategorisiert. Derzeit gibt es 10 inhaltsorientierte Optimierungsregeln. 1. Stellen Sie weniger HTTP-Anfragen
Der erste ist wahrscheinlich der wichtigste. Laut der Datenanalyse des Yahoo!-Forschungsteams profitiert ein großer Teil der Benutzerbesuche am meisten von diesem Punkt. Es gibt mehrere gängige Möglichkeiten, HTTP-Anfragen tatsächlich zu reduzieren: •1) Dateien zusammenführen, z. B. mehrere CSS-Dateien zu einer einzigen kombinieren;
•2) CSS Sprites verwenden CSS-Hintergrundelemente, um das Hintergrundbild absolut zu positionieren; siehe: CSS Sprites: Image Slicing's Kiss of Death
•3) Bildkarte
•4) Inline-Bilder verwenden das data: URL-Schema, um die Bilddaten in die eigentliche Seite einzubetten.
2. Reduzieren Sie DNS-Lookups
Es muss klar sein, dass DNS-Lookups sehr teuer sind. Darüber hinaus glaube ich, dass dies ein allgemeines Problem bei allen Yahoo!-Sites ist. Yahoo! Auf der Hauptseite ist das vielleicht nicht offensichtlich genug, aber auf einigen Unterseiten gibt es ähnlich offensichtliche Probleme. Wenn bei inländischen Websites zu viele externe Widgets verwendet werden, kann es leicht zu zu vielen DNS-Lookup-Problemen kommen. 3. Weiterleitungen vermeiden
Dabei geht es nicht darum, es völlig zu vermeiden, sondern zu versuchen, es zu reduzieren. Darüber hinaus sollten einige unnötige Weiterleitungen beachtet werden. Beispielsweise kann das Hinzufügen eines / (Schrägstrich) nach dem Unterverzeichnis einer Website eine Weiterleitung wirksam vermeiden. Es gibt einen Unterschied zwischen http://www.dbanotes.net/arch und http://www.dbanotes.net/arch/ . Handelt es sich um einen Apache-Server, lässt sich dieses Problem durch die Konfiguration von Alias bzw. mod_rewrite bzw. DirectorySlash beheben. 4. Machen Sie Ajax zwischenspeicherbar
Die Reaktionszeit ist für Ajax von entscheidender Bedeutung, da sonst das Benutzererlebnis definitiv nicht gut ist. Eine effektive Möglichkeit zur Verbesserung der Reaktionszeit ist der Cache. Darüber hinaus gelten auch einige andere Optimierungsregeln. 5. Komponenten nachladen
6. Komponenten vorladen
Genau genommen geht es bei den beiden oben genannten Punkten um die flexible Anwendung der Idee der Asynchronität. 7. Reduzieren Sie die Anzahl der DOM-Elemente
8. Komponenten auf mehrere Domänen aufteilen
Der Hauptzweck besteht darin, die parallele Downloadfähigkeit von Seitenkomponenten zu verbessern. Überkreuzen Sie jedoch nicht zu viele Domänennamen, da dies sonst zum Konflikt mit dem zweiten Punkt führt. 9. Minimieren Sie die Anzahl der Iframes
Freunde, die sich mit SEO auskennen, wissen, dass Iframes im SEO tabu sind. Für die Front-End-Optimierung hat iframe seine Vor- und Nachteile. Betrachten wir das Problem aus zwei Perspektiven. 10. Beseitigen Sie HTTP-404-Fehler (Keine 404-Fehler)
Durch gründliches Testen der Seitenlinks und kontinuierliches Verfolgen der Fehlerprotokolle des Webservers können 404-Fehler wirksam reduziert und das Benutzererlebnis verbessert werden. Erwähnenswert ist, dass 404-Fehler, die durch CSS und Java Script verursacht werden, häufig leicht übersehen werden, da sie etwas „schwieriger“ zu lokalisieren sind. Dies sind die 10 Elemente im Inhaltsabschnitt. Es muss gesagt werden, dass die spezifischen Anleitungsinhalte nicht detailliert genug sind. Ich werde nach und nach mehr hinzufügen, basierend auf meinem eigenen Verständnis.
Erstellung von Webseiten poluoluo Artikeleinführung: Die Leistungsoptimierung des Web-Front-Ends ist ein großes Thema, ein Thema, das eine kontinuierliche Verfolgung durch Betriebs- und Wartungspersonal verdient, und eine Technologie, die von vielen Websites rücksichtslos ignoriert wird.
Der zweite Teil der Best Practices zur Web-Frontend-Optimierung ist serverorientiert. Insgesamt gibt es aktuell 6 Übungsregeln. [Hinweis: Dies ist höchstens ein technischer Hinweis. Um den Originalinhalt anzuzeigen, besuchen Sie bitte: Außergewöhnliche Leistung: Best Practices zur Beschleunigung Ihrer Website] 1. Nutzen Sie ein Content Delivery Network
Inländische CDNs sind noch nicht weit verbreitet. Wir haben jedoch einzigartige Probleme zwischen China Telecom und China Netcom. Wenn wir dies optimieren, können wir grundsätzlich CDN oder ähnliche Effekte erzielen (so tun, als ob). [Tin sagte, dass CDN in China weit verbreitet ist. Man muss sich nur den Markt der CDN-Anbieter ansehen, und man weiß, dass es noch nicht in die Haushalte der normalen Leute vorgedrungen ist.] 2. Fügen Sie einen Expires- oder Cache-Control-Header hinzu
Für jeden Browser gibt es eine spezifische Lösung, z. B. Apache [Hinweis: Das folgende Beispiel ist nicht detailliert genug und es müssen einige Anpassungen an die jeweilige Umgebung vorgenommen werden]: Läuft abAktiv am
ExpiresByType Bild/Gif „Modifikation plus 1 Woche“ Nachdem Lighttpd das Modul mod_expire aktiviert hat: $HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; {
expire.url = ( "" => "Zugriff 1 Jahr" )
Nginx-Beispielreferenz: Standort ~* \.(jpg|gif|png)$ {
if (-f $Anforderungsdateiname) {
läuft maximal ab;
brechen;
}
} 3. Gzip-Komponenten
Für die meisten Sites ist dies ein notwendiger Schritt, um die Belastung des Netzwerkverkehrs effektiv zu reduzieren. Manche Leute machen sich vielleicht Sorgen über die Auswirkungen der CPU-Komprimierung auf die CPU. Keine Sorge, machen Sie es einfach. Es ist okay. Nginx-Beispiel: gzip an;
gzip_types text/plain text/html text/css ext/javascript; Siehe auch: Wie aktiviere ich die Gzip-Komprimierung in IIS?
4. ETags konfigurieren
Etag ist möglicherweise etwas, das die meisten Website-Betreiber übersehen. Bevor diese Reihe von Optimierungsregeln erschien, ignorierten die meisten Websites im Internet dieses Problem wahrscheinlich. Natürlich hat Etag keinen signifikanten Einfluss auf die Leistung der meisten Sites. Sofern es sich nicht um eine RSS-orientierte Site handelt. [Ich habe gesehen, wie einige Freunde kritisierten, dass es kurz geschrieben sei und sagten, dass der IE ETag nicht unterstützt. Um es klar zu sagen: IE unterstützt ETag, aber bei Verwendung von IIS müssen Sie auf den zugehörigen Etag-Fehler achten. 】 Ergänzung: Was ich meine ist: „Viele Websites aktivieren Etag, ohne darauf zu achten, und keine Website kümmert sich darum, wie sie es verwenden soll, und verbraucht Ressourcen, ohne es zu wissen. Das bedeutet nicht, dass Etag schlecht ist. Eine vernünftige Verwendung von Etag kann definitiv gute Vorteile bringen.“ 5. Leeren Sie den Puffer frühzeitig
Nachdem ich lange darüber nachgedacht habe, scheint die Idee immer noch asynchron zu sein. Kann es das Benutzererlebnis verbessern? 6. Verwenden Sie GET für AJAX-Anfragen
XMLHttpRequest POST erfordert zwei Schritte, während GET nur einen erfordert. Beachten Sie jedoch, dass die maximale URL-Länge, die GET im IE verarbeiten kann, 2 KB beträgt.
Erstellung von Webseiten poluoluo Artikeleinführung: Die Leistungsoptimierung des Web-Front-Ends ist ein großes Thema, ein Thema, das eine kontinuierliche Verfolgung durch Betriebs- und Wartungspersonal verdient, und eine Technologie, die von vielen Websites rücksichtslos ignoriert wird.
Der dritte Teil der Best Practices zur Web-Frontend-Optimierung konzentriert sich auf Cookies. Derzeit gibt es nur zwei Praxisregeln.
1. Reduzieren Sie die Cookie-Größe
Cookies sind ein interessantes Thema. Laut RFC 2109 kann jeder Client bis zu 300 Cookies speichern, wobei für jeden Domänennamen maximal 20 Cookies möglich sind (tatsächlich haben die meisten Browser inzwischen mehr, beispielsweise Firefox hat 50). Jedes Cookie ist bis zu 4 KB groß. Beachten Sie, dass die 4 KB hier je nach Browser möglicherweise nicht genau 4096 entsprechen. Lassen Sie uns nicht vom Thema abweichen. Das Wichtigste bei Cookies ist, ihre Größe zu kontrollieren und sie nicht mit nutzlosen Informationen vollzustopfen. 2. Verwenden Sie Cookie-freie Domänen für Komponenten
Dieses Thema wurde bereits in der Diskussion zu Web Image Servern erwähnt. Die hier erwähnten Webkomponenten beziehen sich hauptsächlich auf statische Dateien wie Bilder und CSS. Die statischen Dateien von Yahoo! befinden sich alle auf yimg.com. Wenn der Client statische Dateien anfordert, wird die Auswirkung der wiederholten Cookie-Übertragung auf den primären Domänennamen (yahoo.com) verringert. Aus dem Artikel Wenn der Keks zerbröselt können wir entnehmen, dass die Cookies von MySpace und eBay nicht klein sind, was daran liegen muss, dass sie sich stärker um das Nutzerverhalten kümmern. eBay hat vor Kurzem die Personalization Platform entwickelt, die die Beschränkungen von Cookies aufheben soll.
Erstellung von Webseiten poluoluo Artikeleinführung: Die Leistungsoptimierung des Web-Front-Ends ist ein großes Thema, ein Thema, das eine kontinuierliche Verfolgung durch Betriebs- und Wartungspersonal verdient, und eine Technologie, die von vielen Websites rücksichtslos ignoriert wird.
Der vierte Teil der Best Practices zur Web-Frontend-Optimierung ist auf CSS ausgerichtet.
Insgesamt gibt es aktuell 6 Übungsregeln. Siehe auch den Artikel des Mozilla Developer Center: Writing Efficient CSS 1. Platzieren Sie Stylesheets an der Spitze
Ich finde die offizielle Erklärung etwas vage. Dies hängt tatsächlich mit den Erwartungen der Benutzer an den Benutzerzugriff zusammen. Durch die Platzierung von CSS am Anfang kann der Browser die HTML-Seite gezielt von oben nach unten analysieren und rendern. Niemand wartet gerne, und die Browser haben dies berücksichtigt. 2. Vermeiden Sie CSS-Ausdrücke
Ich persönlich denke, dass das, was mit CSS-Ausdrücken erreicht werden kann, auch mit anderen Mitteln und mit geringerem Risiko erreicht werden kann. 3. Machen Sie JavaScript und CSS extern
Nach dem Stripping kann darauf gezielt eine eigene Verarbeitungsstrategie, wie etwa eine Komprimierungs- oder Caching-Strategie, angewendet werden. 4. Minimieren Sie JavaScript und CSS
Ohne JavaScript und CSS wäre es wahrscheinlich besser. Aber das ist unmöglich, also versuchen Sie, es kleiner zu machen. Die Grammatik kann abgekürzt werden. 5. Wählen Sie <link> statt @import
Im Internet Explorer entspricht die Direktive @import dem Einfügen eines Link-Tags am Ende des HTML. Dies widerspricht dem ersten Punkt. 6. Vermeiden Sie Filter Erstellung von Webseiten poluoluo Artikeleinführung: Die Leistungsoptimierung des Web-Front-Ends ist ein großes Thema, ein Thema, das eine kontinuierliche Verfolgung durch Betriebs- und Wartungspersonal verdient, und eine Technologie, die von vielen Websites rücksichtslos ignoriert wird.
Best Practices für die Web-Frontend-Optimierung: JavaScript
Dieser Abschnitt enthält 6 Regeln, von denen einige im CSS-Abschnitt wiederholt werden. Das Wichtigste an den Best Practices der Front-End-Optimierung ist „Übung“. Es ist leicht zu verstehen, aber der Schlüssel liegt darin, „zu üben“, „auszuführen“, „Feedback zu geben“ und Vorteile zu erzielen. 1. Platzieren Sie Skripte am Ende
Während ein Skript heruntergeladen wird, kann der Browser nichts anderes tun (Serialisierung). Also werfen Sie es bis zum Ende weg und beschäftigen Sie sich damit. Bei einigen funktionalen Skripten kann die Implementierung schwierig sein. Viele inländische Websites verwenden jedoch die Dienste von Google Analytics zur Analyse der Websitedaten. Die diesbezüglich unbedingt umsetzbaren Vorschläge sind weiter unten auf der Seite aufgeführt. 2. Machen Sie JavaScript und CSS extern
Siehe die Beschreibung im CSS-Artikel 3. Minimieren Sie JavaScript und CSS
Siehe die Beschreibung im CSS-Artikel 4. Entfernen Sie doppelte Skripte
Dies kommt bei manchen historischen Stätten oder Websites im Forumsstil recht häufig vor. Zu oft gab es vor und nach der Übernahme Wechsel beim Wartungspersonal und jeder hat seine eigenen Regeln. Dies könnte möglicherweise zu Problemen führen. 5. DOM-Zugriff minimieren
Es gibt drei Leitvorschläge: •Cache-Verweise auf aufgerufene Elemente
•Knoten „offline“ aktualisieren und dann zum Baum hinzufügen
•Vermeiden Sie es, das Layout mit JavaScript zu korrigieren – dies sollte mit CSS erfolgen.
6. Entwickeln Sie intelligente Event-Handler
Neben der englischen Erklärung finden Sie hier auch eine Erinnerung, auf das Problem der Java Script-Speicherlecks zu achten. Ich empfehle außerdem einen Artikel mit dem Titel „So optimieren Sie die Leistung von JavaScript-Skripten“. Richtlinien zur Ajax-Optimierung finden Sie unter „Verbessern der Leistung von Ajax-Anwendungen und Vermeiden von Sicherheitslücken bei Webdiensten“. Nachtrag 1): Nachdem ich mit der Organisation fast fertig war, stellte ich fest, dass es im Internet bereits einen Artikel mit dem Titel „34 goldene Regeln für das beste Yahoo!-Website-Performance-Erlebnis“ gab, bei dem es sich um eine übersetzte Version handelte. Es scheint, als hätte ich einige Arbeiten doppelt erledigt. Nachtrag 2): CSS/JavaScript haben Optimierungsregeln. Es scheint jedoch an Optimierungsverfahren für Flash zu mangeln.
Erstellung von Webseiten poluoluo Artikeleinführung: Die Leistungsoptimierung des Web-Front-Ends ist ein großes Thema, ein Thema, das eine kontinuierliche Verfolgung durch Betriebs- und Wartungspersonal verdient, und eine Technologie, die von vielen Websites rücksichtslos ignoriert wird.
Best Practices zur Web-Frontend-Optimierung Teil 6: Bild
Derzeit gibt es in diesem Abschnitt 4 Regeln. Auf der jüngsten Technologiekonferenz Velocity 2008 war auch das Buch „Bildoptimierung: Wie viele dieser 7 Fehler machen Sie?“ von Stoyan Stefanov von Yahoo! ein sehr wertvolles Nachschlagewerk. Lassen Sie uns gemeinsam darüber sprechen. 1. Bilder optimieren
Soll ich Bilder im GIF-, JPG- oder PNG-Format verwenden? Verwenden Sie nach Möglichkeit Bilder im PNG-Format, da diese über mehr Funktionen verfügen und (im Vergleich zu GIF) kleiner sind. Erwägen Sie bei PNG-Bildern eine Optimierung mit Pngcrush oder einem ähnlichen Tool. Nachfolgend sind die gängigen Tools aufgeführt: •pngcrush http://pmt.sourceforge.net/pngcrush/
•pngrewrite http://www.pobox.com/~jason1/pngrewrite/
•OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (siehe: Tutorial)
•PNGOut http://advsys.net/ken/utils.htm
Siehe auch: Fünf Tipps für die effektive Verwendung von PNG-Bildern Optimierungstools für JPEG-Bilder: •jpegtran ( http://jpegclub.org/ )
Es muss betont werden, dass Studierende des Bilddesigns darauf achten sollten, Bilder für das Web zu entwerfen und keine Bilder zu entwerfen, die die zulässige Größe überschreiten. Dies sollte eine Gewohnheit sein, keine herausragende Fähigkeit. Sie müssen es sich nur merken. 2. CSS-Sprites optimieren
Wie bereits erwähnt, handelt es sich, vereinfacht ausgedrückt, um „die Verwendung von CSS-Hintergrundelementen zur absoluten Positionierung des Hintergrundbilds“, wodurch mehrere HTTP-Aufrufe in einen einzigen Aufruf umgewandelt werden. Weitere Informationen finden Sie unter: CSS Sprites: Image Slicing's Kiss of Death Außerdem habe ich gesehen, wie Leute diese Technik missbraucht haben. Es ist eine gute Idee, mehrere Hintergrundbilder zu einem zu kombinieren, um HTTP-Aufrufe zu reduzieren. Aber denken Sie daran, dass dieses große Bild nicht zu „schwer“ sein darf. Ich habe Hintergrundbilder gesehen, die über 100 KB groß waren. Ein Bild kann die gesamte Site verlangsamen. Ein gutes Beispiel finden Sie in dieser Grafik der Yahoo-Beziehungen. Update: Eine mögliche Nebenwirkung der Verwendung von CSS-Sprites besteht darin, dass der Client mehr Speicher verbraucht (Referenz). 3. Bilder in HTML nicht skalieren
Häufig liegt es an Nachlässigkeit, dass die Bilder nicht die richtige Größe haben. Wenn Sie Bilder stapelweise verarbeiten, kann dies möglicherweise mit einem ImageMagic-Befehl (Konvertieren) erledigt werden. Es muss erwähnt werden, dass ich zu viele Seiten mit hässlichen, gestreckten Bildern gesehen habe. Speichern Sie diese Seiten! 4. Machen Sie favicon.ico klein und zwischenspeicherbar
Kleiner und zwischenspeicherbar, was beides kein Problem sein dürfte. Das Problem ist, dass zu viele Sites überhaupt kein favicon.ico haben. Um zu beurteilen, ob ein Blog mit einem eigenständigen Domänennamen professionell ist, reicht es manchmal aus, grundsätzlich zu prüfen, ob es über ein favicon.ico verfügt. --EOF-- Ergänzung: Visuelle Designer sollten versuchen, die Bildgröße zu kontrollieren. Es wird empfohlen, dass sie unter 200 KB liegt. Das ist kein Unsinn, siehe Seite.
Erstellung von Webseiten poluoluo Artikeleinführung: Die Leistungsoptimierung des Web-Front-Ends ist ein großes Thema, ein Thema, das eine kontinuierliche Verfolgung durch Betriebs- und Wartungspersonal verdient, und eine Technologie, die von vielen Websites rücksichtslos ignoriert wird.
Der letzte Teil der Best Practices zur Web-Frontend-Optimierung betrifft mobile Anwendungen. Tatsächlich gilt er nur für iPhones und es gibt derzeit nur zwei Regeln.
1. Beschränken Sie die Komponenten auf unter 25.000
Dies scheint nur für das iPhone erforscht zu sein. Es wird empfohlen, einzelne Webdatenobjekte unter 25 KB zu halten. Warum 25 KB? Laut den offiziellen Angaben von Apple beträgt die maximale Größe eines Webobjekts, das im Speicher zwischengespeichert werden kann, 10 MB. Nach dem Testen liegt sie jedoch bei etwa 25 KB. Aufgrund der hervorragenden Leistung des iPhone auf dem Markt müssen Webentwickler darüber nachdenken, wie es optimiert werden kann. Ich glaube, dass sich auch dieser Teil des Inhalts ständig ändert. 2. Komponenten in ein mehrteiliges Dokument packen
Verpackt Webseitenkomponenten in ein mehrteiliges Dokument. Sein Zweck besteht darin, HTTP-Anfragen zu reduzieren. Dieser Teil ist nicht sehr detailliert, bitte warten Sie auf das nächste Update.
| 
