SlideShare ist ein Scribd-Unternehmen logo

Frontend-Performance @ IPC

Presentation at IPC 2010 in Berlin, Germany. Frank Kleine and me talked about how to accelerate page speed in general with a detailed look at PHP solutions.

1 von 77
Downloaden Sie, um offline zu lesen
Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
Vorstellung ,[object Object],[object Object],[object Object],[object Object]
Vorstellung ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vorstellung ,[object Object],[object Object],[object Object],[object Object],[object Object],2007 2009 Steve Souders YSlow Firebug Extension
Frontend-Performance mit PHP ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTTP Protokoll Client  Server Request Response URL Header Header Body SC GET /xml/shop/home.html Host: kunden.1und1.de User-Agent: Mozilla/5.0 (Windows; U; […]) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 […] HTTP/1.1 200 OK Date: Thu, 27 May 2010 07:40:50 GMT Server: Apache […] Content-Type: text/html;charset=UTF-8 http://livehttpheaders.mozdev.org/ Liv e HTTP Headers
Anzeige

Recomendados

SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
 
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Florian Elbers
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenDavid Maciejewski
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformanceNico Steiner
 
Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Dennis Oderwald
 
Bidirektionale Verbindungen für Webanwendungen
Bidirektionale Verbindungen für WebanwendungenBidirektionale Verbindungen für Webanwendungen
Bidirektionale Verbindungen für WebanwendungenMarco Rico Gomez
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend PerformanceNico Steiner
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationJakob
 

Más contenido relacionado

Ähnlich wie Frontend-Performance @ IPC

PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Bastian Grimm
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Martin Kliehm
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)kaftanenko
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkFabian Lange
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondUlrich Krause
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02Chris Palatinus
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionMartin Leyrer
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenMartin Leyrer
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartJakob
 
Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...
Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...
Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...Communardo GmbH
 

Ähnlich wie Frontend-Performance @ IPC (20)

PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
 
Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...
Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...
Confluence & JIRA Community Day - Anforderungsmanagement auf Basis von Conflu...
 
Html5 einführung
Html5 einführungHtml5 einführung
Html5 einführung
 

Mehr von Nico Steiner

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak previewNico Steiner
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox ExtensionNico Steiner
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop IINico Steiner
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend WorkshopNico Steiner
 

Mehr von Nico Steiner (6)

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 

Frontend-Performance @ IPC

Hinweis der Redaktion

  1. Frank: Willkommen
  2. Frank: kurze Vorstellung Nico: kurze Vorstellung
  3. Frank, danach Wechsel zu Nico
  4. Nächste Folie: "Was wollen wir in unserem Vortrag vorstellen?"
  5. "Wenn ihr Fragen habt…"
  6. Bestandskundenshop AJAX-lastig Feedback über Lightboxen
  7. + Enter Test URL + Warten auf Testgenerierung
  8. Start des Rendering
  9. Aus UK / Kleinste DSL-Geschwindigkeit
  10. Nächste Folie: HTML
  11. Nächste Folie: Goldene Regel
  12. 12%: DNS-Lookup + Initialer Verbindungsaufbau + Generieren des Dokuments + Download Anmerkung Frank: PHP-Optimierungen im Millisekundenbereich, auch zusätzliche Hardware hilft hier nicht Typisches Feedback von Kollegen aus den USA: "Unsere Seiten laden zu langsam." -> Chef: Macht's doppelt so schnell!
  13. Komponenten aus realen 1&1 Anwendungen Wie schafft man das in PHP-Anwendungen? -> Frank
  14. Nächste Folien: Wie ist das Ergebnis?
  15. Nächste Folien: Wie ist das Ergebnis?
  16. Erster Erfolg, aber das geht noch mehr. > Nico
  17. Beispiel DSL-Bestellprozess Buttons in unterschiedlichen Farben, Zuständen, Größen
  18. Inline-Images IE7! Oder mit PHP… -> Frank
  19. Oder mit PHP… -> Frank Wir können aber noch mehr optimieren -> Komprimierung ab nächster Folie
  20. Frank: Content Negotiation erklären
  21. Wechsel zu Nico mit Ergebnissen
  22. Gestrichelte Linie
  23. Gestrichelte Linie Seite im Vergleich zu vorher
  24. Da sind wir schon bei 50% weniger Ladezeit! Nächste Folie: Weitere Optimierung im Frontend
  25. Um rauszubekommen, wie viel schneller -> Anderes Feature von WebPagetest Zeitlicher Verlauf Oben nachher / Unten vorher (Laser-Pointer) Nur Stylesheet-Optimierung
  26. Abweichungen durch Videoaufzeichnung von US-Server Nächste Folie: Auch JavaScript spielt eine Rolle
  27. 2/3 schneller! 2/3 der Datengröße eingespart! HTML unkomprimiert Sprites waren schon in der ursprünglichen Version (36 Requests!)
  28. Wie sieht es mit der Optimierung an dem 2. Request aus?
  29. Grafiken ohne Expires-Header Sind bereits im Cache, trotzdem Geschwätz zwischen Client und Server (1,4 Sekunden!)
  30. Am besten beide Methoden
  31. Hash -> kein Bezug zu urspünglicher Adresse Version: Aufwendig zu implementieren Cookie-freie Domain Verteilung über verschiedene Subdomains
  32. Resultat Oben nachher / Unten vorher
  33. Jede Menge Geld… Damit sind wir mit den wichtigsten Regeln durch. Webpagetest.org und minify sind nicht die einzigen Tools… -> Frank
  34. Im Frontend -> Nico