Site Speed am Limit - Campixx 2015

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

mailto:[email protected]�


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 Verringerungder 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

DataData

Slow Fast



Need for Speed – Google Ranking Factors

User SignalsSocialBacklinksOnpage (technical)Onpage (content)

• Sitespeed ist wichtigster technischer OnpageRanking 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.comPingdom: http://tools.pingdom.comPagespeed: https://developers.google.com/speed/pagespeed/insights/…

Zahlreiche Tools zur Analyse von Ladezeiten verfügbar


http://rapid.searchmetrics.com/�

http://tools.pingdom.com/�

https://developers.google.com/speed/pagespeed/insights/�


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‘tHIT me!



LAMP-Stack Architecture

Index Data

Image data

Optimiertes Backend sorgt für wenig IO bei hohem Durchsatz



Profiling mit WinCacheGrind und X-Debug

Was dauert da so lange beimZusammenbauen der Seite?

Analysieren der Laufzeiten beim generieren (Interpreter) der Seiten



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/


http://mysqltuner.com/�


Solr

http://lucene.apache.org/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 ausliefernGrafiken in CSS-Sprites zusammenfassen und reduzieren



CSS Sprites

Grafiken in CSS Sprites zusammenfassen um HTTP-Requestseinzusparen



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.


http://www.jpegmini.com/�



http://www.imageoptimizer.net/�


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

Marketing

andreaspucko seite

upwalter andreas pucko

auslieferung der seite

agenda need for speed

site speed

millionen pro

komprimierung dynamisches

requests minimieren