SlideShare ist ein Scribd-Unternehmen logo

Frontend-Performance mit PHP

Mehr und mehr entscheidet sich die Performance von Webanwendungen nicht mehr auf dem Server, sondern im Browser des Users. Die Session zeigt auf, warum nicht nur PHP-Performance eine Rolle spielt, sondern was wirklich zu einer schnellen Website beiträgt und welche Hilfsmittel man in der PHP-Welt zur Verfügung hat.

1 von 77
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

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

Destacado

Web2.0 Für Jugend- Sozialarbeiter
Web2.0 Für Jugend- SozialarbeiterWeb2.0 Für Jugend- Sozialarbeiter
Web2.0 Für Jugend- SozialarbeiterKlisch Andreas
 
Ich bin "ON" - Aber auch sicher?
Ich bin "ON" - Aber auch sicher?Ich bin "ON" - Aber auch sicher?
Ich bin "ON" - Aber auch sicher?Klisch Andreas
 
Web 2.0 fuer Musiker & Bands
Web 2.0 fuer Musiker & BandsWeb 2.0 fuer Musiker & Bands
Web 2.0 fuer Musiker & BandsKlisch Andreas
 

Destacado (7)

Web2.0 Für Jugend- Sozialarbeiter
Web2.0 Für Jugend- SozialarbeiterWeb2.0 Für Jugend- Sozialarbeiter
Web2.0 Für Jugend- Sozialarbeiter
 
Eltern Uni 08
Eltern Uni 08Eltern Uni 08
Eltern Uni 08
 
Googleplus
GoogleplusGoogleplus
Googleplus
 
Ebber Cc Republica
Ebber Cc RepublicaEbber Cc Republica
Ebber Cc Republica
 
Medienqualifikation
MedienqualifikationMedienqualifikation
Medienqualifikation
 
Ich bin "ON" - Aber auch sicher?
Ich bin "ON" - Aber auch sicher?Ich bin "ON" - Aber auch sicher?
Ich bin "ON" - Aber auch sicher?
 
Web 2.0 fuer Musiker & Bands
Web 2.0 fuer Musiker & BandsWeb 2.0 fuer Musiker & Bands
Web 2.0 fuer Musiker & Bands
 

Ähnlich wie Frontend-Performance mit PHP

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 mit PHP (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
 

Frontend-Performance mit PHP

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