Yahoo gibt Client-Performance-Tipps

Die Jungs bei Yahoo verstehen wirklich etwas von Web-Entwicklung. Vor einiger Zeit hatten Sie bereits 20 Tipps zur Beschleunigung des Seitenaufbaus beim Client veröffentlicht. Nun sind aus den User-Kommentaren dazu 20 weitere Tipps entstanden.

Die ersten 20 Tipps waren in das grandiose Firefox-Plugin YSlow eingeflossen. Für Performance-Freaks wirklich feinste Kost.
Diese und die 20 neuen Tipps gibts nun als Präsentation:

Falls ihr Erfahrungen mit den Tipps, weitere Performance-Verbesserungsvorschläge (insbesondere clientseitig) oder Fragen habt, dann schreibt das als Kommentar, damit wir darüber diskutieren können.

PS: Wie ihr vielleicht bemerkt habt, habe ich extra für diesen Beitrag eine neue Kategorie „HTML, CSS, JS“ angelegt. Ich hatte schon öfter Beiträge zu Client-Technologien, habe diese dann aber einfach irgendwo reingeworfen. Von nun an gibts dafür eine eigene Kategorie. Dem schließt sich gleich die Frage an, ob die Leser dieses Blogs das Thema Client-Optimierung überhaupt interessiert. Auch dazu sind Kommentare erwünscht.

Jan hat 150 Beiträge geschrieben

25 Kommentare zu “Yahoo gibt Client-Performance-Tipps

  1. Pingback: maischi.de
  2. Olav sagt:

    Nunja, also Yahoo.com ist ja wohl ultragrottig. Wo im Quelltext erstmal 2500 Zeilen CSS kommen kann man wohl kaum von sinnvollem coden sprechen!

  3. Jan sagt:

    Naja, wer mal in so einer großen Firma gearbeitet hat, weiß, wie sowas zustande kommt. Spreche da aus Erfahrung.

    Aber im Übrigen kann es für die scheinbaren „Fehler“ auch Gründe geben. FÜr die HTML-Fehler könnten Kompatibilitätsgründe verantwortlich sein (siehe Google-Startseite, die sich ähnlich verhält). Für die vielen CSS-Anweisungen im Quelltext könnten eine Minimierung der Requests und Caching Gründe sein.

  4. Jan sagt:

    Entweder als Inline-Regel bzw. im Head-Bereich, dann direkt durch Auslieferung des gesamten Dokuments in komprimierter Form.

    Ansonsten (bei eingebundenen externen CSS-Dateien), indem Du das CSS vorher noch durch den PHP-Parser schickst und den ob_gzhandler drauf loslässt.

    Hab ich zum Beispiel hier beschrieben.

  5. Andreas sagt:

    Jo ok. Meine normalen PHP-Skripte komprimiere ich ja schon. Aber alle CSS- und JS-Dateien auch noch durch den PHP-Parser jagen erhöht auch wieder die Load. Da ist mir eine niedrigere Load in diesem Fall lieber als weniger Traffic (denn die Javascript-Dateien habe ich schon mit CSS-Compressor und Javascriptcompressor verkleinert).

  6. Jan sagt:

    So, und nun werfe ich nochmal die „ultragrottige“ Yahoo-Site in die Diskussion. Jetzt klar, warum die auf der Startseite die CSS-Regeln nicht in externe Dateien auslagern?

  7. narkaT sagt:

    warum so viel css innerhalb des dokuments steht,
    merkt man wenn man sich anguckt wie lang externe css-dateien zum laden brauchen.
    kleine css-datei brauchen ~100ms größere über ~200ms.

    für jede datei muss wieder ein request gesendet werden.
    die ‚index‘-datei wird eh geladen, die css-regeln dort
    einzufügen spart traffic, da kein neuer request für eine externe css-datei gesendet werden muss.

    und die validierung soll programmierern helfen eventuelle fehler zu finden.
    valides html ist noch kein garant für „praktisch valides“ html.
    schaden tut valides html allerdings nicht 😀
    wobei bei yahoo.com alle doctype angaben fehlen 😉
    die seite kann man also gar nicht aussagebkräftig validieren.
    wobei bei der w3c validator bei der auswahl von html 4.0 transitional 33 Fehler findet 😉
    über 300 fehler „findet“ nur das firefox plugin, welches nacher eh sinnlose meldungen ausspuckt.

    was man auch noch in betracht ziehen sollte:
    die yahoo-seite ist für eine anzahl von gleichzeitigen zugriffen ausgelegt, die ein normalsterblicher webentwickler sich nur schwer vorstellen kann 😉
    dort können 200kb traffic überflüssiger innerhalb _kürzester_ zeit zu (grob überschlagen) 200mb werden 😉

    die tipps sind also nur bedingt auf eigene projekt anwendbar :)

    MfG

  8. Jan sagt:

    Hoffe ich hab den Link sinngemäß korrigiert. Links können wohl aus Spamgründen nur vom Admin gepostet werden – keine Ahnung, was WP da macht…

    Ansonsten: Genau das wollte ich damit sagen, narkat. Es verringert einfach die Anzahl an HTTP-Requests.

    Dass die Tipps nur „bedingt“ anwendbar sind, würde ich so nicht sehen, denn einie Leser dieses blogs haben schon recht große Projekte – und wenn man Folie 2 beachtet (auch wenn ich die Werte bissl übertrieben finde), sollte sich da jeder mal drüber Gedanken machen.

  9. Andreas sagt:

    @Jan:
    Sehe ich genauso. Ich habe auch ein recht großes Projekt und allein durch die Komprimierung der CSS- und Javascript-Dateien spare ich mehr als 75 Gigabyte Traffic pro Monat (hierbei ist schon eingerechnet, dass CSS und JS-Dateien nicht bei jedem Seitenaufruf geladen werden, sondern häufig im lokalen Cache landen).

    Ich fand die Yahoo-Folien sehr interessant, auch wenn ich vieles davon schon implementiert hatte. Vielen Dank nochmal dafür.

  10. Jo ok. Meine normalen PHP-Skripte komprimiere ich ja schon. Aber alle CSS- und JS-Dateien auch noch durch den PHP-Parser jagen erhöht auch wieder die Load.

    Üblicherweise können das Webserver auch ohne PHP zu bemühen, Apache bspw. mit mod_deflate.

    Beispiel:
    [code]PGNvZGU+QWRkT3V0cHV0RmlsdGVyIERFRkxBVEUgY3NzPC9jb2RlPg==[/code]
    → Komprimiert alle ausgehenden *.css-Dateien mit Gzip, wenn der Browser dies unterstützt.

  11. Emirates sagt:

    Moin
    Das Problem schneller Seitenaufbau stellt sich bei uns auch immer.Unsere Seiten liegen auf DE Servern,die Kunden sind aber in China(Seitenaufbau dauert ewig,Kunden hauen ab).Mit den Seiten nach China umziehen wollen wir nicht,da wir nicht wissen wer da dann so seine Hand draufhat.Werde mich mit dem Thema mal genauer auseinandersetzen,bin aber für den Bericht hier schon dankbar,zeigt mir Sonne am Horizont.Falls jemand weiss wo das auf chinesisch publiziert wurde,wäre ich für einen Tipp dankbar.Dann könnte sich das hier mal ein Seitenbauer durchlesen.

Eine Antwort schreiben

Ihre E-Mail-Adresse wird nicht veröffentlicht. Benötigte Felder sind markiert mit *

You may use these HTML tags and attributes: <a href=""> <blockquote cite=""> <pre lang=""> <b> <strong> <i> <em>