Site Speed am Limit - Campixx 2015

2.271 Aufrufe

Veröffentlicht am

Veröffentlicht in: Marketing
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.271
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
312
Aktionen
Geteilt
0
Downloads
123
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Site Speed am Limit - Campixx 2015

  1. 1. Site Speed am Limit Web Performance Optimization Tech Guide SEO Campixx 2015 Walter Andreas Pucko
  2. 2. 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
  3. 3. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 3 von 29SEOCampixx - 15. März 2015 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
  4. 4. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 4 von 29SEOCampixx - 15. März 2015 Need for Speed – Warum eigentlich?
  5. 5. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 5 von 29SEOCampixx - 15. März 2015 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.
  6. 6. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 6 von 29SEOCampixx - 15. März 2015 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.
  7. 7. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 7 von 29SEOCampixx - 15. März 2015 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
  8. 8. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 8 von 29SEOCampixx - 15. März 2015 Need for Speed – Google Ranking Factors User Signals Social Backlinks Onpage (technical) Onpage (content) • Sitespeed ist wichtigster technischer Onpage Ranking Faktor
  9. 9. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 9 von 29SEOCampixx - 15. März 2015 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
  10. 10. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 10 von 29SEOCampixx - 15. März 2015 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
  11. 11. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 11 von 29SEOCampixx - 15. März 2015 Tools: YSlow YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites
  12. 12. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 12 von 29SEOCampixx - 15. März 2015 Speichertypen Schnell Langsam
  13. 13. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 13 von 29SEOCampixx - 15. März 2015 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!
  14. 14. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 14 von 29SEOCampixx - 15. März 2015 LAMP-Stack Architecture Index Data Imagedata Optimiertes Backend sorgt für wenig IO bei hohem Durchsatz
  15. 15. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 15 von 29SEOCampixx - 15. März 2015 Profiling mit WinCacheGrind und X-Debug Was dauert da so lange beim Zusammenbauen der Seite? Analysieren der Laufzeiten beim generieren (Interpreter) der Seiten
  16. 16. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 16 von 29SEOCampixx - 15. März 2015 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/
  17. 17. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 17 von 29SEOCampixx - 15. März 2015 Solr http://lucene.apache.org/solr/
  18. 18. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 18 von 29SEOCampixx - 15. März 2015 Solr – Mehr Funktionen und Speed • Rasend schnell • Filter statt Suchwort • Facetten • Beliebige Suchseiten
  19. 19. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 19 von 29SEOCampixx - 15. März 2015 eAccelerator – „Cache“ is KING!
  20. 20. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 20 von 29SEOCampixx - 15. März 2015 HTTP-Requests minimieren und verteilen Statische Inhalte von dynamischen getrennt ausliefern Grafiken in CSS-Sprites zusammenfassen und reduzieren
  21. 21. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 21 von 29SEOCampixx - 15. März 2015 CSS Sprites Grafiken in CSS Sprites zusammenfassen um HTTP-Requests einzusparen
  22. 22. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 22 von 29SEOCampixx - 15. März 2015 Javascript und CSS. Zusammenführen, Komprimieren CSS Dateien bestehen aus Kommentaren, White-Space und für die Funktion unnötigen Zeichen.
  23. 23. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 23 von 29SEOCampixx - 15. März 2015 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!!
  24. 24. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 24 von 29SEOCampixx - 15. März 2015 www.CSScompressor.com
  25. 25. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 25 von 29SEOCampixx - 15. März 2015 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.
  26. 26. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 26 von 29SEOCampixx - 15. März 2015 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.
  27. 27. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 27 von 29SEOCampixx - 15. März 2015 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
  28. 28. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 28 von 29SEOCampixx - 15. März 2015 Zusammenfassung Speed is KING! Mehr Traffic, Kundenzufriedenheit, Umsatz  HTTP-Requests minimieren  IO Vermeiden durch Caching  Datenbank entlasten  Inhalte und Code komprimieren
  29. 29. Walter Andreas Pucko – andreas@pucko.de – @AndreasPucko Seite 29 von 29SEOCampixx - 15. März 2015 Fragen?

×