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

  • Show Comments (32)

32
Hinterlasse einen Kommentar

avatar
30 Kommentar Themen
2 Themen Antworten
0 Follower
 
Kommentar, auf das am meisten reagiert wurde
Beliebtestes Kommentar Thema
20 Kommentatoren
DaniloKnutFrankThomas GrübelMatt Letzte Kommentartoren
  Abonnieren  
Benachrichtige mich bei
Danilo
Gast
Danilo

Für die Optimierung von Bildern unter Windows kann ich noch RIOT (Radical Image Optimizing Tool)empfehlen: http://luci.criosweb.ro/riot/ Läuft auch mit Wine/VirtualBox unter Linux.

Knut
Gast
Knut

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

Frank
Gast
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 ;-)

Thomas Grübel
Gast
Thomas Grübel

Auch wenn es spät ist: super Sendung. Wieder ein paar schnell und einfach umzusetzende Möglichkeiten gelernt, Webseiten schlanker, schneller und besser zu machen.

Viktor
Gast
Viktor

Was sagt eigentlich Google dazu, dass in meinem Header steht:
Expires: Thu, 19 Nov 1981 08:52:00 GMT

Matt
Gast
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 :)

Msc
Gast
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.

Pascal
Gast
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

Wolfgang | Elektrotechnik Tutorials
Gast
Wolfgang | Elektrotechnik Tutorials

Hat sich erledigt. Hypercache scheint eine Lösung zu sein.

Wolfgang | Elektrotechnik Tutorials
Gast
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 ?

Jens Bardel
Gast
Jens Bardel

Grad noch gefunden, schönes Testing-Tool für die Ladezeiten.
http://www.webpagetest.org/
Standort des Rechners, Browser, Mobile oder Desktop und Benchmarkts lassen sich einstellen. Dazu gibts alle wichtigen Werte, gut aufbereitet.

Woy
Gast
Woy

Abend,

lange nicht mehr so kompakte und gute Infos erhalten.

Merci

Sebastian
Gast
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

Jens Bardel
Gast
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

Eric
Gast
Eric

Großartiger Podcast!

Vielen Dank und Respekt!

eric

Horst
Gast
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. 8-)

Viktor
Gast
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?

Tino
Gast
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,… Weiterlesen »

Viktor
Gast
Viktor

^^funzt nicht :( die killen mich

Viktor
Gast
Viktor

äähm, jetzt aber mal noch ne „dumme“ Frage hinterher, die Toolbar sitzt ja auch hinter dieser IP Adresse?!

Viktor
Gast
Viktor

26. sehe ich zwar nicht, aber Du meinst sicherlich:

# deny folder access
Deny from All
# allow from your IP only
Allow from 123.244.234.89

Danke!

Viktor
Gast
Viktor

und gibt es eine Möglichkeit das zu verhindern? Da gibt es ein paar Monster, die 20-40sek laden?!?!

Viktor
Gast
Viktor

Habt Ihr vielleicht eine Ahnung, warum GWT bei mir in passwortgeschützte Verzeichnisse reinschauen kann und dort die Pagespeed der Seiten berechnet? https://plus.google.com/112457602357038466754/posts/UxyHifA6ATR

Nikolas
Gast
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!

Viktor
Gast
Viktor

Ich weiß nicht welchen Blogpost mit 5 Tips für die .htaccess gemeint habt, aber hier ist einer auf deutsch und mit 5. Tips :)
http://mizine.de/html/turbo-fur-die-webseite-htaccess-tunen-gzip-injizieren-und-ballast-abwerfen/

Daniel Weihmann
Gast
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

monoseo
Gast
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.

monoseo
Gast
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.

Diese Webseite benötigt Cookies, um optimal zu funktionieren. Bitte stimmen Sie der Verwendung zu, in dem Sie auf 'Akzeptieren' klicken.