IPC 2014

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.


Schlagwörter: , , , , ,

25 Kommentare bisher »

  1. Shybe sagt

    am 26. März 2008 @ 21:00

    Wirklich gute Präsi. Zwar nicht wirklich viel neues aber nett erläutet.

  2. GhostGambler sagt

    am 26. März 2008 @ 22:15

    Jop, der Beitrag war interessant. :)

  3. Michael sagt

    am 26. März 2008 @ 23:45

    Ja, finde ich auch! Ich hätte nichts gegen mehr in die Richtung einzuwenden.

    Danke für den Artikel!

    Michael

  4. Mindfucker sagt

    am 27. März 2008 @ 12:22

    Soweit ich weiß, hatte die beim ersten Mal nur 13 Tipps veröffentlicht. Jedenfalls sind auch in YSlow nur 13 Prüfungen vorhanden.

  5. Jan sagt

    am 27. März 2008 @ 12:46

    Schau mal auf Folie 12, da sind die 20 Tipps, die auch bei YSlow drinstecken.

  6. Mindfucker sagt

    am 28. März 2008 @ 01:01

    Auf der Seite sind aber nur 14:
    http://developer.yahoo.com/performance/rules.html

  7. Jan sagt

    am 28. März 2008 @ 08:15

    Gut, ist jetzt eigentlich auch egal ;-)

  8. maischi.de sagt

    am 28. März 2008 @ 09:52

    Client-Optimierung präsentiert durch Yahoo!…

    Click to continue reading ""
    ……

  9. Olav sagt

    am 28. März 2008 @ 10:50

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

  10. Tcomic sagt

    am 28. März 2008 @ 11:20

    @Olav: und dann erst noch 275 Fehler (W3C-HTML check) ;-)

  11. Urlaubswerk sagt

    am 28. März 2008 @ 13:31

    Und dann wird noch davon geredet das die Programmierer was drauf hätten?

  12. Jan sagt

    am 28. März 2008 @ 14:17

    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.

  13. Andreas sagt

    am 28. März 2008 @ 17:35

    Wie kann man denn CSS und Javascript geGZIPed ausliefern?

  14. Jan sagt

    am 28. März 2008 @ 17:42

    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.

  15. Andreas sagt

    am 28. März 2008 @ 17:55

    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).

  16. Jan sagt

    am 28. März 2008 @ 18:02

    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?

  17. narkaT sagt

    am 28. März 2008 @ 19:12

    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 :D
    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

  18. Jan sagt

    am 28. März 2008 @ 19:28

    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.

  19. Andreas sagt

    am 28. März 2008 @ 23:19

    @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.

  20. narkaT sagt

    am 29. März 2008 @ 14:25

    das meinte ich mit bedingt anwendbar ;)

  21. CSS Sprites - Einsparung an HTTP-Requests durch Kombination von Hintergrund-Bildern » Beitrag » PHP Performance sagt

    am 2. April 2008 @ 12:32

    [...] Apr, 2008  HTML, CSS, JS Geschrieben von Jan Wie sich ja gewünscht wurde, möchte ich von nun an auch etwas mehr über die Performance von Client-Systemen in Bezug [...]

  22. Christoph Jeschke sagt

    am 12. April 2008 @ 15:56

    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:
    AddOutputFilter DEFLATE css
    → Komprimiert alle ausgehenden *.css-Dateien mit Gzip, wenn der Browser dies unterstützt.

  23. Andreas sagt

    am 12. April 2008 @ 17:40

    Cool, danke für den Tipp :)

  24. Maren sagt

    am 24. April 2008 @ 20:55

    Find Yahoo gar nicht so schlecht. Immerhin die zweitmeiste genutzte Suchmaschine oder bin ich da falsch informiert.

  25. Emirates sagt

    am 19. Juni 2008 @ 15:35

    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.

Komentar RSS · TrackBack URI

Hinterlasse einen Kommentar

Name: (erforderlich)

eMail: (erforderlich)

Website:

Kommentar: