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
- Vorstellung unseres Gastes: Wer bist Du, was machst du, wie bist du zu dem gekommen, was du machst?
- Warum eigentlich Optimierungen?
- Ladezeiten bringt bessere Conversion, Mehr Traffic, etc.
Zahlen hierzu: http://www.slideshare.net/kliehm/performancewmfra - Zusammenhang zwischen SEO-Performance und Ladezeit
- Schnellere Seiten werden bevorzugt
- Webmaster Tools Webseiten Leistung
- Fastpath
- Cookie klein halten, weil es bei jedem Aufruf transferiert werden!
- Dörfer + LTE + mobile max. 10-30 KB
- DNS Lookups, Hostnamen reduzieren (30-120ms)
- Header, Cookies
- Cache Control, Expires Header, ETags http://de.wikipedia.org/wiki/HTTP_ETag
- HTTP Requests + Weiterleitungen vermeiden
- CSS Revisionen mit GET-Parametern
- HTML-Parsing möglichst kurz halten
- Serverseitiges Caching, APC, MemCache, SQL -> Unnötige Requests, Indizes, DB-Optimierung
- Wir halten fest: Schlechte Programmierung ist schlecht
- CSS am Seitenanfang laden, damit der User möglichst schnell etwas sieht
- CSS Auslagern in EINE Datei, genau wie JS, die aber am Ende der Seite laden
- Normalisierte Datenbanken http://de.wikipedia.org/wiki/Normalisierung_%28Datenbank%29
- Kompression: JavaScript + CSS Minify
- http://www.csscompressor.com/
- http://javascriptcompressor.com/
- Blogposts -> htaccess
- GZIP
- Bilder:
- Bildgröße optimieren -> GIF, PNG8, PNG32, JPG
- Bilder nicht via HTML/CSS skalieren!
- Auf Subdomains auslagern (Paralleles Laden)
- CSS Sprites verwenden -> Generator
- Keine leeren SRC Attribute
- Icons als @fontface
- Breite & Höhe exakt definierent
- effiziente css selektoren #id / .link statt #meineId .abc td tr span strong a.link
- jpegmini http://www.jpegmini.com/main/home -> gerade getestet … 587kb bild auf 130kb reduziert, smush reduziert nur um 98,7kb
- AJAX Cachefähig machen (Am besten GET)
- 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!
- Cookie möglichst vermeiden
- Dom klein halten, iframes vermeiden
- Tools
- pingdom
- yslow http://developer.yahoo.com/yslow/
- google pagespeed https://developers.google.com/pagespeed/
- loads.in http://loads.in/
- http://www.smushit.com/ysmush.it/
- gtmetrix.com
- Caching plugins für wordpress
- W3 Total Cache
- WP Super Cache
- Hyper Cache
- Cachify
- Ohne Cachify: 35 DB-Anfragen, 3,00 Sekunden, 21,44 MB
- Mit Cachify: 8 DB-Anfragen, 0,91 Sekunden, 20,48 MB
- Generiert: 1 Tag zuvor
- 10 Ways to Use .htaccess to Speed Up WordPress
- 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
* Affiliate-Links
loading...
OnlineRadar 007 – Ladezeitenoptimierung von Webseiten [ 1:27:30 ] Jetzt abspielen | Play in Popup | Download
[...] http://www.onlineradar.de/007/ [...]
Habt ihr noch Fragen, Anmerkungen oder Kommentare?
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.
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.
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
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/
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!
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
Jupp, die Daten stammen Clientseitig aus der Google-Toolbar und ähnlichen Produkten (Chrome auch?)
und gibt es eine Möglichkeit das zu verhindern? Da gibt es ein paar Monster, die 20-40sek laden?!?!
@Viktor der artikel steht unter 26. http://wpshout.com/10-ways-to-use-htaccess-to-speed-up-wordpress/
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!
äähm, jetzt aber mal noch ne “dumme” Frage hinterher, die Toolbar sitzt ja auch hinter dieser IP Adresse?!
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
^^funzt nicht
die killen mich
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
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?
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.
Großartiger Podcast!
Vielen Dank und Respekt!
eric
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
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 http://www.webentwickler24.com/news/ladezeit-von-webseiten-optimieren/
Grüße
Sebastian
Abend,
lange nicht mehr so kompakte und gute Infos erhalten.
Merci
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.
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 ?
Hat sich erledigt. Hypercache scheint eine Lösung zu sein.
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
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.
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
Was sagt eigentlich Google dazu, dass in meinem Header steht:
Expires: Thu, 19 Nov 1981 08:52:00 GMT
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.
[...] da fällt mir ein, dass ich schon vor Wochen den sensationellen Online Radar mit Timon Hartung von 121 Watt empfehlen wollte. Darin ging es um Page-Speed. Wie ich gerade heute [...]
[...] der Ausgabe #7 des OnlineRadar-Podcats vom November 2011 geht es ausschließlich um das Thema Ladezeiten-Optimierung von Webseiten. Wer (wie ich) lieber hört statt liest, sollte sich die 1,5 Stunden Zeit nehmen und hier alles [...]
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
Tolle Sendung! Dieser Podcast avanciert, neben dem von Jens Fauldraht, gerade zu meinem Lieblings Podcast. Bitte genau so weiter machen! Gruss Knut
Schreib einen Kommentar!
Sponsoren
OnlineRadar bei Facebook
Kalender
Freunde
Seiten
archiv
Heiß diskutiert
Meiste Aufrufe