OR007 – Ladezeiten Optimierung von Webseiten

Es ist soweit! Keine 6 Wochen nach unserer fabulösen Ausgabe 006 gibt es ab sofort OnlineRadar in der Ausgabe 007. Darin besprechen wir, nämlich Kai Spriestersbach und Dominik Hafner, mit unserem Gast Timon Hartung von der 121WATT das spannende Thema „Ladezeitenoptimierung von Webseiten“.

Die Themen in dieser Sendung

  1. Vorstellung unseres Gastes: Wer bist Du, was machst du, wie bist du zu dem gekommen, was du machst?
  2. Warum eigentlich Optimierungen?
  3. Ladezeiten bringt bessere Conversion, Mehr Traffic, etc.
    Zahlen hierzu: http://www.slideshare.net/kliehm/performancewmfra

    1. Zusammenhang zwischen SEO-Performance und Ladezeit
    2. Schnellere Seiten werden bevorzugt
    3. Webmaster Tools Webseiten Leistung
    4. Fastpath
  4. Cookie klein halten, weil es bei jedem Aufruf transferiert werden!
  5. Dörfer + LTE + mobile max. 10-30 KB
  6. DNS Lookups, Hostnamen reduzieren (30-120ms)
  7. Header, Cookies
  8. Cache Control, Expires Header, ETags http://de.wikipedia.org/wiki/HTTP_ETag
  9. HTTP Requests + Weiterleitungen vermeiden
  10. CSS Revisionen mit GET-Parametern
  11. HTML-Parsing möglichst kurz halten
  12. Serverseitiges Caching, APC, MemCache, SQL -> Unnötige Requests, Indizes, DB-Optimierung
  13. Wir halten fest: Schlechte Programmierung ist schlecht
  14. CSS am Seitenanfang laden, damit der User möglichst schnell etwas sieht
  15. CSS Auslagern in EINE Datei, genau wie JS, die aber am Ende der Seite laden
  16. Normalisierte Datenbanken http://de.wikipedia.org/wiki/Normalisierung_%28Datenbank%29
  17. Kompression: JavaScript + CSS Minify
    1. http://www.csscompressor.com/
    2. http://javascriptcompressor.com/
    3. Blogposts -> htaccess
  18. GZIP
  19. Bilder:
    1. Bildgröße optimieren -> GIF, PNG8, PNG32, JPG
    2. Bilder nicht via HTML/CSS skalieren!
    3. Auf Subdomains auslagern (Paralleles Laden)
    4. CSS Sprites verwenden -> Generator
    5. Keine leeren SRC Attribute
    6. Icons als @fontface
    7. Breite & Höhe exakt definierent
    8. effiziente css selektoren #id / .link statt #meineId .abc td tr span strong a.link
    9. jpegmini http://www.jpegmini.com/main/home -> gerade getestet … 587kb bild auf 130kb reduziert, smush reduziert nur um 98,7kb
  20. AJAX Cachefähig machen (Am besten GET)
  21. CDN -> Was ist das? Was nutzt es? Bilder auf CDN, rankt mein CDN Bild? -> Erfahrungen => 4 CDNs + www Host => synchrones laden, 4x speed, sozusagen – cookies nicht von cds setzten / schicken etc. => cdns keine cookies setzen!
  22. Cookie möglichst vermeiden
  23. Dom klein halten, iframes vermeiden
  24. Tools
    1. pingdom
    2. yslow http://developer.yahoo.com/yslow/
    3. google pagespeed https://developers.google.com/pagespeed/
    4. loads.in http://loads.in/
    5. http://www.smushit.com/ysmush.it/
    6. gtmetrix.com
  25. Caching plugins für wordpress
    1. W3 Total Cache
    2. WP Super Cache
    3. Hyper Cache
    4. Cachify
      1. Ohne Cachify: 35 DB-Anfragen, 3,00 Sekunden, 21,44 MB
      2. Mit Cachify: 8 DB-Anfragen, 0,91 Sekunden, 20,48 MB
      3. Generiert: 1 Tag zuvor
  26. 10 Ways to Use .htaccess to Speed Up WordPress
  27. mod_pagespeed http://code.google.com/p/modpagespeed/

Gewinnen

Ihr könnt in dieser Ausgabe 2 schöne Dinge gewinnen:

Einmal verlosen wir das Buch: Marketing in the Age of Google: Your Online Strategy IS Your Business Strategy* von Vanessa Fox unter allen lieben Zuhörern, die uns eine Rezension bei iTunes schreiben.

Und zum anderen verlost Dominik das Buch High Performance MySQL. Optimierung, Datensicherung, Replikation & Lastverteilung*, welches Ihr gewinnen könnt, in dem ihr folgenden Tweet veröffentlicht:

Ich will mehr MySQL Performance mit http://kai.im/4s und @onlineradar_de http://www.onlineradar.de/007/

Events

  1. SEO Stammtisch am 15.11.2011 im Chaos
  2. Social Media Economy Days am 21. & 22.11.2011 in München

* Affiliate-Links

Bleiben Sie Up to Date in Sachen SEO!
Abonnieren Sie jetzt unseren kostenlosen Newsletter und erhalten regelmäßig interessante Artikel, Tools und Angebote per E-Mail.
Und keine Angst, ich mag Spam ebenso wenig wie Sie und gebe Ihre E-Mail Adresse garantiert nicht weiter!

Comments 35

  1. Knut

    Tolle Sendung! Dieser Podcast avanciert, neben dem von Jens Fauldraht, gerade zu meinem Lieblings Podcast. Bitte genau so weiter machen! Gruss Knut

  2. Frank

    Ich würde gern zu der sehr übersichtlichen Liste noch die Seite http://page-speed.net/ hinzufügen wollen, auch dort sind einige Tipps, Hinweise, Tutorials rund um die Ladezeiten-Optimierung zu finden.

    Und nicht vergessen, 100 Punkte zu erreichen ist nicht immer sinnvoll, da das Design dann meistens nur aus Texten besteht

  3. Matt

    Bin erst vor zwei Tagen von nem Kumpel auf den Podcast hingewiesen worden, deshalb mit etwas Verspätung:

    Wenn eine eigene Subdomain für CDN-Inhalte genutzt wird bekommt der eigene Server davon überhaupt nichts mit, da wird auch nichts über diesen umgeleitet oder sonstwie verarbeitet, da das ganze über den DNS gelöst ist. Bei Amazon ist es beispielsweise ein CNAME-Eintrag.
    Damit ist das eine sehr gute Möglichkeit, um einem überlasteten Webserver wieder etwas Luft zum Atmen zu geben. Außerdem bekommt man mit einem CDN cookiefreie statische Inhalte quasi umsonst mit dazu, weil das CDN ja keine Cookies setzt.

    mod_pagespeed ist super, mit manchen Optionen, vor allem dem stripping von nach der Meinung von mod_pagespeed unnötigen HTML-Attributen sollte man aber vorsichtig sein, das kann dazu führen, dass Formulare im Internet Explorer nicht mehr funktionieren…

    Und nicht übertreiben. Meist verhageln einem die Statistik eh externe Dienste, auf die man keinen Einfluss hat, wie beispielsweise Google Analytics

  4. Msc

    Ich fand die Sendung mehr als geil !! So ein techi talk könnte man öfter machen. Wahnsinn ! Ich habe mich gefühlt wie bei meinen besten Kumpels auf dem Sofa bei ein zwei Bierchen.

  5. Pascal

    Bin endlich auch mal zum Hören gekommen. Sehr cooles Teil mit vielen Sachen, die mir so auch noch nicht bewusst waren. Wobei man den Teil über die Normalisierungsformen glaub hätte weglassen können

    Viele Grüße
    Pascal

  6. Wolfgang | Elektrotechnik Tutorials

    Wieder eine tolle Sendung.
    Ich habe eben einmal cachify installiert.
    Leider sind danach die Adsense Anzeigen verschwunden.

    Googeln und diverse Formen bringen nur die Infos, dass ich da nicht der Einzige bin, der dieses Problem hat.

    Kennt jemand von Euch eine Abhilfe ?

  7. Sebastian

    Hi,

    wieder ein sehr interessanter Podcast. Gab mir direkt einen Anlass mich mal wieder mehr mit dem Thema zu beschäftigen und auch verschiedene Dinge auszuprobieren. Konnte dadurch nun meinen PageSpeed Grade immerhin von C auf A verbessern Ich habe mal alle meine Änderungen auf meiner Webseite beschrieben und erläutert.
    Grüße
    Sebastian

  8. Jens Bardel

    Hi Ho,
    ein schönes Thema und danke für die Anregungen!
    Bei dem von euch besprochenem Tabellen-Problem, kann man einfach mit Views arbeiten, gibts selbst bei MySQL ab Version 5. Da braucht man nix doppelt ablegen und auch keine kilometerlange sql Abfragen bauen.
    Falls man Daten doch unbedingt doppelt haben möchte, einfach ein wenig Logik in die DB legen und dann sollten die Daten auch einheitlich sein.
    Grüße
    Jens

  9. Horst

    Klasse Sendung. Ich bin ja Tekkie und habe schon http per Hand programmiert. Daher bin ich umso mehr angetan von der Qualität der Inhalte, auch wenn ich selber eher die 20/80-Schiene fahre. Auf vieles hätte man gerne noch genauer eingehen können, ich hätte auch kein Problem mit 10 Stunden Podcast gehabt.

  10. Viktor

    Würde es eigentlich gehen, und wenn ja, würde es dann Sinn machen (Geschwindigkeit) anstatt einer Subdomain ein Verzeichnis einer Domain auf einen CDN zu rerouten? Also quasi den ganzen /images Ordner auf einem CDN zu Deployen?

  11. Tino

    Interessante Sendung, auch wenn der Hype um das Thema aktuell etwas drüber ist. Natürlich sind schnelle Ladezeiten allein schon aus Usability Sicht Top, aber naja, übertreiben braucht man es dann auch nicht.

    Was mich ja interessieren würde, vielleicht weiß das ja jemand von euch. Woher hat der werte Herr aus der Präsentation zur Web-Performance die Werte, vor allem die von Amazon?
    Wenn überhaupt waren die Werte m. M. nach nur runtergerechnet auf 100ms, also hat Amazon beispielsweise die Aussage gemacht 1 Sekunde = 10% weniger Umsatz. Dann dürfte man auf keinen Fall das einfach so auf eine Millisekunde runterrechnen, falls das hier passiert ist. Obwohl ich mir auch den Wert so auf keinen Fall vorstellen kann.

    Dann mal noch ein aktuelles Beispiel zum Google Page Speed Score, wieso es fatal wäre, wenn Google den in dieser Art Einfluss aufs Ranking nehmen lässt. Obwohl das natürlich nicht heißt, dass sie es nicht tuen. Vielleicht fehlt mir aber auch nur das Wissen und ich kenne manchen Einflussfaktor der bei einem >> Page Speed << Score zählt und den ich nicht berücksichtige. Hier mal ein Beispiel aus der Praxis, eine WordPress Installation.

    Google Page Speed Score: 74 (!) – (Hier haben manch unoptimierte Seiten von mir einen besseren Wert).
    Als einzige Verbesserung beim "Online Page Speed Score Web Tool" wird mir noch das Nutzen von CSS Sprites zu nutzen. Das als mittlere Priorität. Sonst hat es nichts zu beanstanden, denn Caching ist an, Expiration Header & eTags sind gesetzt, Komprimierung ist an, Bilder optimiert, usw..

    Damit ihr auch nen Vergleich habt, wie performant die Website nun eigentlich ist:
    GTmetrix:
    92% Page Speed Grade
    93% YSlow Grade

    tools.pingdom.com:
    Grade: 98/100
    Requests: 16
    Load time: 788ms (!)
    PageSize: 35kB

    Wie gesagt, dass ist ne WordPress Installation und die normale "Web-Version der Website". Würde man noch ein CDN nutzen, wäre der GTmetrix Score wohl bei 95%+? Und das ist für ne einfache WP Installation mit einem gekauften 0815 Premium Theme aus einem Theme Club wohl ganz okay.

    Somit: Schöner random.org Wert beim Page Speed Score, Mr. Google. Aber naja, für Panda nutzt man ihn ja auch teilweise ;).

    Vielleicht hat der ein oder andere das ja auch schon mal beobachtet. Möchte nicht wissen, was für unsinnige Werte bei einem größeren Vergleich das Google PageSpeed Tool wohl so ausspucken würde.

    Das selbe zählt übrigens für loads.in`? Amazon zum Teil mit 15 Sekunden (!), google.de mit mehreren Sekunden? Komisches Tool.

    Und am Ende noch ein paar Alternativen zu smush.it:
    http://kraken.io/ (!!!)
    http://optipng.sourceforge.net/
    http://www.advsys.net/ken/util/pngout.htm

    last but not least: Photoshop!

    Auch wenn es im Podcast etwas schlecht gemacht wird, richtig eingestellt habe ich zumindest in einem Test immer maximal im Schnitt noch 5% einsparen können. Bei verschiedensten Bildern. Man sollte natürlich die "Für das Web speichern" Funktion auch richtig einstellen. (Hier kann man auch nochmal wählen, ob und welche Meta-Daten mitgesichert werden, usw…)
    Vielleicht liegt es auch an der Version. In meinem Fall CS5. Wer es also nicht übertreiben möchte kann seine Bilder nach wie vor auch aus Photoshop heraus speichern…
    Spart Zeit, beispielsweise fürs Linkbuilding ;).

    1. Post
      Author
      Kai

      Genau,
      ich meinte auch den Punkt 26. in unseren Shownotes, da ist der Artikel mit der .htaccess, das war kein Bezug auf deine Frage, wie man Google da ausperrt, das geht nämlich nicht wirklich, wenn die Daten durch Clients kommen.
      Sag allen deinen Admins und Redakteuren halt, dass die keine Toolbars oder Chrome verwenden sollen

  12. Post
    Author
    1. Post
      Author
  13. Nikolas

    sehr schöne Sendung. Ich finde das so Thema so interessant, dass ihr ruhig noch eine Stunde länger hättet machen können.

    Ich finde es auch völlig in Ordnung, bei den technischen Themen ein bisschen tiefer reinzugehen. Wenn ich an einer Stelle nicht mehr mitkomme, weiß ich wenigstens, wo meine Wissenslücken sind und worüber ich mich noch informieren sollte. SEO ist eben auch ein technischer Beruf und da sollte man keine Angst haben, sich auch in schwierige Themen einzuarbeiten.

    Freue mich schon auf eure nächste Sendung!

  14. Daniel Weihmann

    Man, man, man – war das eine geile Sendung!
    War genau mein berufliches Themengebiet und somit der überwiegende Teil auch bekannt. Dass ihr es aber geschafft habt, aus einem solchen (oft technisch-trockenen) Nerd-Thema einen Podcast zu zaubern, klasse!

    Neu für mich war der gleich der erste Punkt mit der Reduzierung der Hostnamen. Wie sieht das aus Timon, wenn man *.domain.de im DNS eingetragen hat? Dazu dann sicher noch 1-2 Subdomains, die auf andere IPs zeigen. In diesem Fall habe ich zumindest eine beliebige Anzahl an Subdomains, die zwar alle auf den selben Server zeigen, und könnte diese für zig CDNs nutzen. Die Frage: Ist die Wildcard-Nutzung zeitlich problematisch oder vielleicht sogar ein Vorteil?

    Schöne Grüße
    Daniel

  15. monoseo

    Ach ja, vielleicht noch eine kleine Ergänzung. Für die Apple-User gibt es ein Programm namens ImageOptim. Eine einfache Methode schnell und vor allem offline Bilder verlustfrei zu komprimieren. Was man jedoch bei allen Komprimierungstools beachten sollte ist, dass diese Programme alle EXIF-Informationen aus den Bildern löschen. Vielleicht ist es nur eine Frage der Zeit bis auch Suchmaschinen diese Informationen bewerten.

  16. monoseo

    Wie immer ein toller Podcast. Vor allem das Thema Seitenladegeschwindigkeit in Bezug auf die Conversion ist wirklich interessant. Danke für die Auswertung bzw. das Zitieren dieser.

  17. Post
    Author

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *