Site Speed am Limit - Campixx 2015

Site Speed am Limit
Web Performance Optimization Tech Guide
SEO Campixx 2015
Walter Andreas Pucko

Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 2 von 29SEOCampixx - 15. März 2015
Who‘s talking?
• Walter Andreas Pucko
• Head of Audience Development
bei Burda Intermedia
• T-Marketer, Full-Stack-Developer
und Unternehmer seit 2001
• Gründer von GLOBOsapiens und
Findix Kleinanzeigen

Agenda
• Need for Speed
• Was dauert da eigentlich so lange?
• Backend – Architektur und System
– Architektur
– Profiling
– Datenbankzugriff minimieren
– Solr als Megaturbo
– Caching
• Frontend – Weniger ist mehr
– HTTP-Requests minimieren
– CSS-Sprites für Grafiken
– Javascript und CSS zusammenführen, komprimieren
– Bilder optimieren
– Gzip-Komprimierung
• Dynamisches HTTP-Caching mit Etags
• Wrap-Up

Need for Speed – Warum eigentlich?

Need for Speed – Conversion Rate
Conversion Rate sinkt dramatisch bei steigender Load Time
Für jede eingesparte Sekunde, wurden bei Walmart 2% höhere Conversion Rates festgestellt.

Need for Speed – Prominente Erfolge
• Shopzilla verringerte Ladezeit von 6 auf 1.2s und steigerte damit den Umsatz um 12 %
sowie Page Views um 25%
• Amazon erhöhte den Umsatz um 1% pro 100ms Geschwindigkeitszuwachs (wie Walmart).
• Yahoo steigerte den Traffic um 9% pro 400ms Geschwindigkeitszuwachs
• Mozilla erhöhte die Anzahl der Downloads um 60 Millionen pro Jahr durch Verringerung
der Load Time um 2.2 Sekunden.

Need for Speed – Resourcen sparen
• Physische Server einsparen
• Datentransfer reduzieren
• Last verringern
• Mehr Nutzer pro Aufwand
• Effizienter Geld verdienen
Server
Resources
Server
Resources
Data
D
a
t
a
Slow Fast

Need for Speed – Google Ranking Factors
User Signals
Social
Backlinks
Onpage (technical)
Onpage (content)
• Sitespeed ist wichtigster
technischer Onpage
Ranking Faktor

Was dauert da eigentlich so lange?
• Anfrage für eine neue URL wird an den Web-Server gestellt
• Seite wird generiert oder aus dem Cache geholt
• Auslieferung der Seite mit Ihren Elementen
Anfrage Generierung Auslieferung

Tools: Speedtest Analysis
Searchmetrics: http://rapid.searchmetrics.com
Pingdom: http://tools.pingdom.com
Pagespeed: https://developers.google.com/speed/pagespeed/insights/
…
Zahlreiche Tools zur Analyse von Ladezeiten verfügbar

Tools: YSlow
YSlow analyzes web pages and why they're
slow based on Yahoo!'s rules for high
performance web sites

Speichertypen
Schnell Langsam

Don‘t HIT me! - I/O vermeiden
• RAM is KING!
• I/O Zugriff minimieren
• -> MySQL, SOLR alle Tabellen in den RAM
• -> Caching – Backend und Frontend
Cache
Request
Compute
Output
Check
HIT!
Miss
Store
NO HIT!
Don‘t
HIT me!

LAMP-Stack Architecture
Index Data
Imagedata
Optimiertes Backend sorgt für wenig IO bei hohem Durchsatz

Profiling mit WinCacheGrind und X-Debug
Was dauert da so lange beim
Zusammenbauen der Seite?
Analysieren der Laufzeiten beim generieren (Interpreter) der Seiten

Datenbank und Indexabfragen Optimieren
1. Low Hanging Fruit: Query Optimization
Ausführungsdauer aller SQL-Abfragen messen und optimieren
2. High Hanging Fruit: MySQL Server Optimization
Alle Tabellen in den RAM
Startup-Parameter optimieren
MySQLTuner nutzen: http://mysqltuner.com/

Solr
http://lucene.apache.org/solr/

Solr – Mehr Funktionen und Speed
• Rasend schnell
• Filter statt Suchwort
• Facetten
• Beliebige Suchseiten

eAccelerator – „Cache“ is KING!

HTTP-Requests minimieren und verteilen
Statische Inhalte von dynamischen getrennt ausliefern
Grafiken in CSS-Sprites zusammenfassen und reduzieren

CSS Sprites
Grafiken in CSS Sprites
zusammenfassen um HTTP-Requests
einzusparen

Javascript und CSS. Zusammenführen, Komprimieren
CSS Dateien bestehen aus Kommentaren, White-Space und für die
Funktion unnötigen Zeichen.

Javascript und CSS. Zusammenführen, Komprimieren
Minimisierte Version – Nicht hübsch, aber schön klein.
6,6 – 4,4 = 1,8KB gespart: 28% kleinere Datei!!

www.CSScompressor.com

Bilder: Die Größe macht den Unterschied
Google PageSpeed Module
www.jpegmini.com
www.imageoptimizer.net
…
• Bilder in passender Größe bereitstellen – nicht skalieren!
• Richtiges Format individuell wählen – JPEG oder PNG?
• Zusatzsoftware nutzen um Bilder stärker zu komprimieren.

Gzip Compression
Enabling gzip compression on your
site will dramatically reduce the
amount of data sent from your server
to the visitors browsers, thus
increasing the page-load speed.

Dynamisches HTTP-Caching mit ETags
Ein Validierungstoken ermöglicht
effiziente Aktualisierungsprüfungen
von Ressourcen. Es werden keine
Daten übertragen, wenn sich die
Ressource nicht geändert hat.
Neue Inhalte
Bekannte Inhalte

Zusammenfassung
Speed is KING! Mehr Traffic, Kundenzufriedenheit, Umsatz
 HTTP-Requests minimieren
 IO Vermeiden durch Caching
 Datenbank entlasten
 Inhalte und Code komprimieren

Fragen?

Site Speed am Limit - Campixx 2015

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Site Speed am Limit - Campixx 2015

Similaire à Site Speed am Limit - Campixx 2015 (20)

Site Speed am Limit - Campixx 2015