+ All Categories
Home > Education > Sitespeed - Speed Matters

Sitespeed - Speed Matters

Date post: 18-Dec-2014
Category:
Upload: 121watt-online-marketing-seo-und-google-analytics-seminare
View: 1,555 times
Download: 1 times
Share this document with a friend
Description:
Präsentation auf der SMX München 2012 von Timon Hartung von der http://www.121watt.de zum Thema: Sitespeed: LösungenWoooooooow bin ich schneeeeeelllAm Beispiel der 121watt.de
28
Sitespeed: Lösungen Woooooooow bin ich schneeeeeelll Am Beispiel der 121watt.de
Transcript
Page 1: Sitespeed - Speed Matters

Sitespeed: LösungenWoooooooow bin ich schneeeeeelllAm Beispiel der 121watt.de

Page 2: Sitespeed - Speed Matters

Timon Hartung

CTO bei der 121WATT

Dipl. Wirtschaftsinformatiker

vorher Head of Online Marketing bei amiando.com (XING Tochter)

kann JAVA, PHP, MySQL, … programmieren

macht SEO, SEA, Facebook

habe 18Kg seit der letzten SMX abgenommen

Page 3: Sitespeed - Speed Matters

Die 121watt.de war langsam: 5 sek!

Standard Wordpress– Mit Plugins– Angepasstem Template

Average Sitespeed:nach GWMT 5sek!

Quelle: GWMT

Page 4: Sitespeed - Speed Matters

Problem: Alter langsamer Server, den wir nicht einfach wechseln konnten.

Quelle: http://photoblog.twincityphotos.com/wp-content/uploads/2010/01/cornerjunk.jpg

Page 5: Sitespeed - Speed Matters

4 sek! Quelle:tools.pingdom.com

Sloooow!

Page 6: Sitespeed - Speed Matters

Dann habe ich angefangen zu optimieren

Frontend

Backend

Caching

Bis die Seite endlich schneller war!

Page 7: Sitespeed - Speed Matters

900ms Quelle:tools.pingdom.com

Schneller!

Page 8: Sitespeed - Speed Matters

Jetzt sind wir hier!

Quelle:tools.pingdom.com

Page 9: Sitespeed - Speed Matters

900ms Ladezeit, Yes!

Aber wie habe ichdas gemacht?

Dieses Bild ist in jeder Präsentation!

Page 10: Sitespeed - Speed Matters

Veränderungen ohne Server Wechsel

GZIP Komprimierung aktiviert reduziert den ausgehenden Traffic um 70% bis 90%– Einfach in der .htaccess zu aktivieren – Tipp: die DEFLATE Komprimierung Alternative ist noch

einmal ca. 40% schneller als GZIP wegen der fehlenden md5 Checksum

Page 11: Sitespeed - Speed Matters

Frontend

Mit Screamingfrog und XENU nach 404 Fehlern auf den Seiten gesucht.

Alle Frames und Weiterleitungen entfernt– Wenn Weiterleitung dann in der .htaccess

DOM Verschachtelung reduziert um Renderzeit zu sparen. Nicht auf großen DOMs mit JS arbeiten.

HTTP requests reduziert:– CSS Sprites– CSS und JS Minify

Page 12: Sitespeed - Speed Matters

Frontend: Bilder

Die meist aufgerufenen Bilder noch einmal optimiert mit smushit von Yahoo (bis zu 50% besser nach Photoshop Optimierung)

CSS Image Sprites erstellt Tools: http://spritepad.wearekiss.com/ oder http://spriteme.org/

Mit HTML skalierte Bilder entfernt und die richtige Größe hochgeladen (kostet CPU Zeit zum berechnen)

Quelle: Sprite von google.com

Page 13: Sitespeed - Speed Matters

Frontend: CSS und JS

Minify Javascript und CSS– Unnütze Leerzeichen und Zeilenumbrüche werden entfernt– Wenn es mehrere Dateien gibt werde diese in eine große

zusammengefasst um die HTTP requests zu reduzieren.

CSS oben in den <head>– Sehr flache CSS Verschachtelung am besten nur eine Id

oder Klasse als Selektor verwenden <div class=“unique“>

Javascript unten vor dem </body> laden Alle inline JS und CSS Dateien extern auslagern

Page 14: Sitespeed - Speed Matters

Frontend: CDNs und Subdomains

80-90% der Zeit wartet der User auf den Download der statischen Komponenten der Website

Aktuelle Browser öffnen ca. 6 Verbindungen gleichzeitig pro Host. (bei durchschnittlich 50 – 100 Komponenten)

Quelle: http://www.pharmacyowners.com/Portals/37772/images/It-can-be-a-LONG-wait-at-the-pharmacy-resized-600.jpg

Page 15: Sitespeed - Speed Matters

Komponenten Ladezeit ohne CDNs

Page 16: Sitespeed - Speed Matters

Frontend: CDNs und Subdomains

Daher HTTP requests parallelisieren

Subdomains gelten als Host so können pro Subdomain 6 Verbindungen aufgemacht werden. – Mit mehreren Subdomains lassen sich HTTP request

parallelisieren– Allerdings erhöht sich die DNS abfrage zeit daher nicht

mehr als 4 Sub Domains einsetzen.

Vorteil CDN: hohe Geschwindigkeit bei der Auslieferung

Page 17: Sitespeed - Speed Matters

Komponenten Ladezeit mit CDNs

Page 18: Sitespeed - Speed Matters

Backend

Quellcode optimieren unnötige Berechnungen vermeiden.– Caching des kompilierten Quellcodes (z.B. APC)

Datenbank abfragen optimieren und reduzieren– Datenbank Queries cachen

Flush Buffer Early:– <?php flush()?>– Zeigt schon HTML an auch wenn das Backend noch

arbeitet.– Sinnvoll für stark Backend lastige Seiten

Page 19: Sitespeed - Speed Matters

Caching

Caching ist ein Zwischenspeicher der aufwändige Neuberechnungen zwischenspeichert.

Page 20: Sitespeed - Speed Matters

Client side Caching im Browser Server side Caching durch den Server

Die zwei Caching Arten

Server side Caching liefert eine auf dem Server gecachte Version beim ersten Klick an Browser

Client side Caching liefert ab dem zweiten Klick eine im Browser gecachte Version an den User aus

Page 21: Sitespeed - Speed Matters

Caching: Client side

Das Client side Caching erhöht die Ladezeit erst ab dem zweiten Klick für den User. Weil nicht alle Komponenten neu geladen werden müssen.

Page 22: Sitespeed - Speed Matters

Caching: Client side

Cache Control Header– Macht nur einen HTTP Request wenn das Datum

abgelaufen ist (Vorsicht mit CSS und JS Dateien) – Sinnvoll bei Bildern und statischen Komponenten

E Tags– Macht immer einen request um dann zu entscheiden oder

die Datei gesendet werden soll oder ein 304 zurück kommt und die Version aus dem Cache genommen werden soll

Page 23: Sitespeed - Speed Matters

Caching: Server side

Server side Caching liefert eine bereits berechnete Version der Abfrage aus und ist daher schon beim ersten Klick schneller

Page 24: Sitespeed - Speed Matters

Caching: Server side

Die Seite wird einmal komplett erzeugt und im Server Cache abgespeichert. Die nächste Auslieferung erfolgt direkt ohne Backend abfrage, was die Ladezeit stark verkürzt.

Das reduziert die Last auf dem Backend erheblich schränkt aber die Dynamik ein.

Ajax lädt einfach die dynamischen Elemente nach

Spannende Tools:– APC PHP Caching, MemCache (Datenbanken), Varnish

Page 25: Sitespeed - Speed Matters

Exkurs die schnelle First Click Landing Page

Serverside Caching an, dauerhaft erstellt, keine Backend abfrage.

Wenig HTML und geringe tiefe des DOM Um noch einmal HTTP requests zu sparen

– Unkompliziertes CSS und JS ist inline im HTML – Kleine Bilder als CSS Sprite

Early Buffer Flush Diskussion: verwenden von base64 images im HTML

Code Keine Cookies Analytics Pixel anstatt von JS

Page 26: Sitespeed - Speed Matters

Entwicklung der 121WATT in den GWMT

Optimierungszeitraum CDNs

Quelle: GWMT

Page 27: Sitespeed - Speed Matters

Takeaways

GZIP aktivieren HTTP requests reduzieren CSS sprites verwenden CSS & JS Minify Keine komplizierten CSS Selektoren HTML DOM klein halten Caching an

CDNs

Quelle: http://www.kildalkeyvillage.com/images/tn_rossi-takeaway-ext.jpg

Page 28: Sitespeed - Speed Matters

Vielen Dank!

Fragen!?

Get in touch: Twitter: http://twitter.com/#!/timondeluxe XING: https://www.xing.com/profile/Timon_Hartung G+: https://plus.google.com/100734808651715229257/ or google my name


Recommended