site speed am limit - campixx 2015
TRANSCRIPT
Site Speed am Limit
Web Performance Optimization Tech Guide
SEO Campixx 2015
Walter Andreas Pucko
Walter Andreas Pucko – [email protected] – @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
Walter Andreas Pucko – [email protected] – @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
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 4 von 29SEOCampixx - 15. März 2015
Need for Speed – Warum eigentlich?
Walter Andreas Pucko – [email protected] – @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.
Walter Andreas Pucko – [email protected] – @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 Verringerungder Load Time um 2.2 Sekunden.
Walter Andreas Pucko – [email protected] – @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
DataData
Slow Fast
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 8 von 29SEOCampixx - 15. März 2015
Need for Speed – Google Ranking Factors
User SignalsSocialBacklinksOnpage (technical)Onpage (content)
• Sitespeed ist wichtigster technischer OnpageRanking Faktor
Walter Andreas Pucko – [email protected] – @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
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 10 von 29SEOCampixx - 15. März 2015
Tools: Speedtest Analysis
Searchmetrics: http://rapid.searchmetrics.comPingdom: http://tools.pingdom.comPagespeed: https://developers.google.com/speed/pagespeed/insights/…
Zahlreiche Tools zur Analyse von Ladezeiten verfügbar
Walter Andreas Pucko – [email protected] – @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
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 12 von 29SEOCampixx - 15. März 2015
Speichertypen
Schnell Langsam
Walter Andreas Pucko – [email protected] – @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‘tHIT me!
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 14 von 29SEOCampixx - 15. März 2015
LAMP-Stack Architecture
Index Data
Image data
Optimiertes Backend sorgt für wenig IO bei hohem Durchsatz
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 15 von 29SEOCampixx - 15. März 2015
Profiling mit WinCacheGrind und X-Debug
Was dauert da so lange beimZusammenbauen der Seite?
Analysieren der Laufzeiten beim generieren (Interpreter) der Seiten
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 16 von 29SEOCampixx - 15. März 2015
Datenbank und Indexabfragen Optimieren
1. Low Hanging Fruit: Query OptimizationAusführungsdauer aller SQL-Abfragen messen und optimieren
2. High Hanging Fruit: MySQL Server OptimizationAlle Tabellen in den RAMStartup-Parameter optimierenMySQLTuner nutzen: http://mysqltuner.com/
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 17 von 29SEOCampixx - 15. März 2015
Solr
http://lucene.apache.org/solr/
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 18 von 29SEOCampixx - 15. März 2015
Solr – Mehr Funktionen und Speed
• Rasend schnell• Filter statt Suchwort• Facetten• Beliebige Suchseiten
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 19 von 29SEOCampixx - 15. März 2015
eAccelerator – „Cache“ is KING!
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 20 von 29SEOCampixx - 15. März 2015
HTTP-Requests minimieren und verteilen
Statische Inhalte von dynamischen getrennt ausliefernGrafiken in CSS-Sprites zusammenfassen und reduzieren
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 21 von 29SEOCampixx - 15. März 2015
CSS Sprites
Grafiken in CSS Sprites zusammenfassen um HTTP-Requestseinzusparen
Walter Andreas Pucko – [email protected] – @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.
Walter Andreas Pucko – [email protected] – @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!!
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 24 von 29SEOCampixx - 15. März 2015
www.CSScompressor.com
Walter Andreas Pucko – [email protected] – @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.
Walter Andreas Pucko – [email protected] – @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.
Walter Andreas Pucko – [email protected] – @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
Walter Andreas Pucko – [email protected] – @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
Walter Andreas Pucko – [email protected] – @AndreasPucko Seite 29 von 29SEOCampixx - 15. März 2015
Fragen?