SlideShare ist ein Scribd-Unternehmen logo
Frontend-Architektur der1&1 Bestellsysteme WebTech Conference | 2010
Hi! Seit 2003 bei der 1&1 Internet AG Abteilung betreut die Bestellsysteme der 1&1 (Shops) Experte für Frontend-Technologien HTML, XML, CSS, JavaScript Accessibility, Website Performance, AJAX, Suchmaschinenoptimierung Nico
Was erwartet euch? Frontend, Frontend, Frontend Inspiration Modularisierung und Organisation Performance-Optimierung Statische Codeanalysen Frontend-Kennzahlen
Eigenschaften der 1&1 Shops Ca. 30 verschieden große Webapplikationen Sehr hohe Änderungsfrequenz Produkte, Kampagnen, Redesigns Einheitliche Layouts gewünscht Ausnahmen müssen möglich sein Internationalisierung für UK, US, FR, ES, PL
Eigenschaften der 1&1 Shops Ca. 30 verschieden große Webapplikationen Sehr hohe Änderungsfrequenz Produkte, Kampagnen, Redesigns Einheitliche Layouts gewünscht Ausnahmen müssen möglich sein Internationalisierung für UK, US, FR, ES, PL
Modularisierung und Organisation
Datenbank Server-Logik Frontend CSS + IMG + Script + HTML
Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML Website Blog Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML E-Shop Intranet
Wie share ich gemeinsame Ressourcen? Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML Website Blog Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML E-Shop Intranet grid.css reset.css JavaScript-Library Basis-Styles
30 verschiedene Shops…
1&1 Bestellsysteme Datenbank Datenbank Datenbank Datenbank Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Wie share ich gemeinsame Ressourcen?
Module! CSS IMG Script XML
Module stellen Ressourcen zentral bereit
Beispiel-Modul A DSL Mobile Internet Hosting
Beispiel-Modul B Bestandskunden Hosting Spanien Interne Tools
Module sind versionierbar
Formular-Modul Alte Version Neue Version
50 Module und Applikationen Module Applikationen DSL Autocompletion Formulare JS Basis-Bibliothek Hosting Bestandskunden Shop-Skin Stopper Mobile Internet
Früher Mit Build-Script readonly in Applikation kopieren Nachteil: Build nach jeder Änderung htdocs/modules/skin/img htdocs/modules/skin/styles
Lösung In Applikation kopieren und „life“ editierbar machen Nachteil: Module und Applikationen basieren auf unterschiedlichen Technologien htdocs/modules/skin/img htdocs/modules/skin/styles
Lösung Modularisierung des Applikations-Codes (Java) Maven als gemeinsame Basis-Technologie für Module und Applikationen Einheitliches Build-System Einheitliche Verzeichnisstruktur
Workspace Bündelt Frontend-Module und Applikations-Module je nach Anwendungsfall „Verdrahtet“ diese automatisch untereinander Aktionen: Open / Close / Update / Commit Verwaltung mit Subversion: Checkouts / Branches
Beispiele
Hosting-Workspace Hosting Us Hosting UK Shopskin Hosting PL Hosting DE Formulare
Hosting-Workspace
BK-Shop-Workspace Mobile BK-Shop DSL BK-Shop Hosting BK-Shop Formulare Shopskin
BK-Shop-Workspace
Fazit Modularisierung bietet sich für komplexe Systeme an Versionierung für die Unterstützung/Pflege älterer Entwicklungen Workspaces für beliebige Kombinationen von Modulen und Applikationen Permanent bei zusammengehörigen Applikationen Für den Zeitraum eines Projekts / Kampagne / Redesigns
http://maven.apache.org/ http://subversion.apache.org/
Performance-Optimierung
Performance-Optimierung 2007 2009 Steve Souders
Studien http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/
Typische Frontend-Ressourcen CSS IMG Script XML
Typische Frontend-Ressourcen CSS IMG Script XML Jasmin
Typische Frontend-Ressourcen CSS IMG CDS Script XML
Typische Frontend-Ressourcen CSS IMG Script XML Pustefix Framework
Jasmin Schönheit aus 1001 Nacht? http://www.flickr.com/photos/honma/4084355466
Jasmin Nur ein Servlet;-) JavaScript Minifier Modularisierung mit Dependencies Wenige HTTP Requests Minimiert und komprimiert Ressourcen Ergänzt Far Future Expires Header
Modularisierung mit Dependencies Qooxdoo Dependency Autocompletion Webservice.js autocompletion.js autocompletion.css
Modularisierung mit Dependencies <LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“> <SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>
Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ DslStart DslMobile DslCheck dslorder dslorder dslorder 1. Request autocompletion 2. Request
Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ 1. Request 2. Request gZip 1. Seite 2. Seite
Minimierung Optimierte Version Original /**** zip:/home/servlet/pfixschlundAS_b/style/reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0;   /*outline: 0;*/ font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} sup{line-height:0;font-size:60%;}body{line-height:1;color:black;background:white;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption, th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote :after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix: after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hidesfrom IE-mac / .clearfix{display:block;}/* End hidefrom IE-mac */ #skipmenu{position:absolute;top:10px;left:10px;width:180px;z-index:100;}a.skiptarget{display:block;width:0;height:0;overflow:hidden;}a.skip{fontsize:11px;texttransform:uppercase;textdecoration:none;}a.skip,a.skip:link,a.skip:visited{position:absolute;top:999em;}a.skip:focus,a.skip:active{outline:1px dotted #fff;color:#fff;position:absolute;top:0;left:0;}
Komprimierung gZip Einsparung: 70%
Jasmin Ergänzt Far Future Expires Header Erkläre ich Später …
Content Delivery Server (CDS) CSS IMG CDS Script XML
Content Delivery Server (CDS) Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. aus Ermittelt Kennzahlen zu diesen Ressourcen Ergänzt einen Far Future Expires Header Erhöht die Anzahl der parallelen Downloads Liefert Ressourcen unter eigener Domain aus Soll zu einem Content Delivery Network ausgebaut werden
Content Delivery Server (CDS) Apache CDS htdocs Internet
Far Future Expires Header 2,5 Sekunden! Far Future Expires Header: 	„Diese Ressource verändert sich für die 			nächsten 15 Jahre nicht und kann immer 			aus dem Cache bezogen werden.“
Far Future Expires Header „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“
Far Future Expires Header Internet /img/footer/ui-logo.gif Publish <imgsrc=„http://uicdn.net/32j4g23j4-ui-logo.gif“> url(http://uicdn.net/32j4g23j4-ui-logo.gif) HTML <imgsrc=„/img/footer/ui-logo.gif“> url(/img/footer/ui-logo.gif) MD5-Hash /img/footer/ui-logo.gif 32j4g23j4-ui-logo.gif CDS Expires Header Sync auf CDS
Parallele Downloads
Content Delivery Server (CDS) Warum eine eigene Domain? Darum
Content Delivery Server (CDS) * Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit
Content Delivery Server (CDS) * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
Content Delivery Server (CDS) * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
Content Delivery Network Europa Lenexa Karlsruhe Atlantik USA
Kennzahlen „Welche Größe haben die Daten, welche von den verschiedenen Seiten einesProjekts abgerufen werden?“ „Werden Daten angefragt, die nicht verfügbar sind (404)?“ http://zoompf.com/2010-state-of-web-performance-report
Content Delivery Server (CDS) http://www.youtube.com/watch?v=IWWBnJEsUtU „Larry Page hat einmal die Vision geäußert, Webseiten so schnell browsen zu können, wie man die Seiten in einem Hochglanzmagazin umblättert.“
Content Delivery Server (CDS)
Content Delivery Server (CDS) onLoad: Webservice.getNextGraphics(); „Image Prefetching“
Performance-Optimierung http://www.youtube.com/watch?v=ANMrzw7JFzA http://www.youtube.com/watch?v=0QRO3gKj3qw
Statische Codeanalysen
Statische Codeanalysen Problematischer Frontend-Code Inline-Code (Styles und Events) Deprecated Attributes (clear, target, align) Blank-Gifs Verwendung interner Templates Block-Elemente innerhalb von Inline-Elementen
Statische Codeanalysen Teil des Build-Prozess Regeln in Xpath-Syntax 	//@style		//pfx:button//div 	//@target		//shop:price//div 	//@onclick		//shop:countdown//div 	//br/br 	//img[@width=“1“ and @height=“1“]
Statische Codeanalysen Initialer Aufwand nötig Danach … http://www.flickr.com/photos/29208923@N06/3755752618/
Frontend-Kennzahlen
Wie groß sind die ausgelieferten Ressourcen? Pro Applikation Pro Seite Werden Ressourcen nicht gefunden? Gibt es Ausreißer? Gibt es überflüssige Ressourcen?
CDS Grafiken / Flash Jasmin Apache CSS / JS HTML Größe Fehlende Ress. Überflüssige Ress. Größe Ungenutzte CSS-Selektoren JavaScript-Fehler Größe Fehlende Dokumente
Beispiel: JavaScript-Fehler
Horst Marco Ralf Johannes Dietmar Matthias Helena Kerim Alex Andre Neda Ralph Mathias Gregor Andi Nico Matthias Kilian Uli
Fragen? nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steiner
Vielen Dank für eure Aufmerksamkeit! nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steiner

Weitere ähnliche Inhalte

Ähnlich wie Frontend-Architektur der 1&1 Bestellsysteme

2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
Nico Steiner
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
DWX 2016 -Build and Release Management
DWX 2016 -Build and Release ManagementDWX 2016 -Build and Release Management
DWX 2016 -Build and Release Management
Marc Müller
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
AOE
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Bjoern Reinhold
 
Infrastructure Solution Day | Core
Infrastructure Solution Day | CoreInfrastructure Solution Day | Core
Infrastructure Solution Day | Core
Microsoft Österreich
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroids
Blogwerk AG
 
Citrix Day 2014: Panalpina - global und doch nah
Citrix Day 2014: Panalpina - global und doch nahCitrix Day 2014: Panalpina - global und doch nah
Citrix Day 2014: Panalpina - global und doch nah
Digicomp Academy AG
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
Predrag61
 
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Mayflower GmbH
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
Alexander Merkel
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
DNUG e.V.
 
Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...
Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...
Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...
comspace GmbH & Co. KG
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Martin Kliehm
 

Ähnlich wie Frontend-Architektur der 1&1 Bestellsysteme (20)

2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
DWX 2016 -Build and Release Management
DWX 2016 -Build and Release ManagementDWX 2016 -Build and Release Management
DWX 2016 -Build and Release Management
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Infrastructure Solution Day | Core
Infrastructure Solution Day | CoreInfrastructure Solution Day | Core
Infrastructure Solution Day | Core
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroids
 
Citrix Day 2014: Panalpina - global und doch nah
Citrix Day 2014: Panalpina - global und doch nahCitrix Day 2014: Panalpina - global und doch nah
Citrix Day 2014: Panalpina - global und doch nah
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
 
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
 
Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...
Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...
Umzug in die Cloud - flexible, dynamische Websites und Digital Marketing am B...
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 

Mehr von Nico Steiner

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
Nico Steiner
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
Nico Steiner
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
Nico Steiner
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 

Mehr von Nico Steiner (6)

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
 
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-Architektur der 1&1 Bestellsysteme

  • 1. Frontend-Architektur der1&1 Bestellsysteme WebTech Conference | 2010
  • 2. Hi! Seit 2003 bei der 1&1 Internet AG Abteilung betreut die Bestellsysteme der 1&1 (Shops) Experte für Frontend-Technologien HTML, XML, CSS, JavaScript Accessibility, Website Performance, AJAX, Suchmaschinenoptimierung Nico
  • 3. Was erwartet euch? Frontend, Frontend, Frontend Inspiration Modularisierung und Organisation Performance-Optimierung Statische Codeanalysen Frontend-Kennzahlen
  • 4. Eigenschaften der 1&1 Shops Ca. 30 verschieden große Webapplikationen Sehr hohe Änderungsfrequenz Produkte, Kampagnen, Redesigns Einheitliche Layouts gewünscht Ausnahmen müssen möglich sein Internationalisierung für UK, US, FR, ES, PL
  • 5. Eigenschaften der 1&1 Shops Ca. 30 verschieden große Webapplikationen Sehr hohe Änderungsfrequenz Produkte, Kampagnen, Redesigns Einheitliche Layouts gewünscht Ausnahmen müssen möglich sein Internationalisierung für UK, US, FR, ES, PL
  • 7. Datenbank Server-Logik Frontend CSS + IMG + Script + HTML
  • 8. Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML Website Blog Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML E-Shop Intranet
  • 9. Wie share ich gemeinsame Ressourcen? Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML Website Blog Datenbank Datenbank Server-Logik Server-Logik Frontend Frontend CSS + IMG + Script + HTML CSS + IMG + Script + HTML E-Shop Intranet grid.css reset.css JavaScript-Library Basis-Styles
  • 11. 1&1 Bestellsysteme Datenbank Datenbank Datenbank Datenbank Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Logik Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Frontend Wie share ich gemeinsame Ressourcen?
  • 12. Module! CSS IMG Script XML
  • 13. Module stellen Ressourcen zentral bereit
  • 14. Beispiel-Modul A DSL Mobile Internet Hosting
  • 15. Beispiel-Modul B Bestandskunden Hosting Spanien Interne Tools
  • 18. 50 Module und Applikationen Module Applikationen DSL Autocompletion Formulare JS Basis-Bibliothek Hosting Bestandskunden Shop-Skin Stopper Mobile Internet
  • 19. Früher Mit Build-Script readonly in Applikation kopieren Nachteil: Build nach jeder Änderung htdocs/modules/skin/img htdocs/modules/skin/styles
  • 20. Lösung In Applikation kopieren und „life“ editierbar machen Nachteil: Module und Applikationen basieren auf unterschiedlichen Technologien htdocs/modules/skin/img htdocs/modules/skin/styles
  • 21. Lösung Modularisierung des Applikations-Codes (Java) Maven als gemeinsame Basis-Technologie für Module und Applikationen Einheitliches Build-System Einheitliche Verzeichnisstruktur
  • 22. Workspace Bündelt Frontend-Module und Applikations-Module je nach Anwendungsfall „Verdrahtet“ diese automatisch untereinander Aktionen: Open / Close / Update / Commit Verwaltung mit Subversion: Checkouts / Branches
  • 24. Hosting-Workspace Hosting Us Hosting UK Shopskin Hosting PL Hosting DE Formulare
  • 26. BK-Shop-Workspace Mobile BK-Shop DSL BK-Shop Hosting BK-Shop Formulare Shopskin
  • 28. Fazit Modularisierung bietet sich für komplexe Systeme an Versionierung für die Unterstützung/Pflege älterer Entwicklungen Workspaces für beliebige Kombinationen von Modulen und Applikationen Permanent bei zusammengehörigen Applikationen Für den Zeitraum eines Projekts / Kampagne / Redesigns
  • 34. Typische Frontend-Ressourcen CSS IMG Script XML Jasmin
  • 35. Typische Frontend-Ressourcen CSS IMG CDS Script XML
  • 36. Typische Frontend-Ressourcen CSS IMG Script XML Pustefix Framework
  • 37. Jasmin Schönheit aus 1001 Nacht? http://www.flickr.com/photos/honma/4084355466
  • 38. Jasmin Nur ein Servlet;-) JavaScript Minifier Modularisierung mit Dependencies Wenige HTTP Requests Minimiert und komprimiert Ressourcen Ergänzt Far Future Expires Header
  • 39. Modularisierung mit Dependencies Qooxdoo Dependency Autocompletion Webservice.js autocompletion.js autocompletion.css
  • 40. Modularisierung mit Dependencies <LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“> <SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>
  • 41. Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ DslStart DslMobile DslCheck dslorder dslorder dslorder 1. Request autocompletion 2. Request
  • 42. Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ 1. Request 2. Request gZip 1. Seite 2. Seite
  • 43. Minimierung Optimierte Version Original /**** zip:/home/servlet/pfixschlundAS_b/style/reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; /*outline: 0;*/ font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} sup{line-height:0;font-size:60%;}body{line-height:1;color:black;background:white;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption, th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote :after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix: after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hidesfrom IE-mac / .clearfix{display:block;}/* End hidefrom IE-mac */ #skipmenu{position:absolute;top:10px;left:10px;width:180px;z-index:100;}a.skiptarget{display:block;width:0;height:0;overflow:hidden;}a.skip{fontsize:11px;texttransform:uppercase;textdecoration:none;}a.skip,a.skip:link,a.skip:visited{position:absolute;top:999em;}a.skip:focus,a.skip:active{outline:1px dotted #fff;color:#fff;position:absolute;top:0;left:0;}
  • 45. Jasmin Ergänzt Far Future Expires Header Erkläre ich Später …
  • 46. Content Delivery Server (CDS) CSS IMG CDS Script XML
  • 47. Content Delivery Server (CDS) Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. aus Ermittelt Kennzahlen zu diesen Ressourcen Ergänzt einen Far Future Expires Header Erhöht die Anzahl der parallelen Downloads Liefert Ressourcen unter eigener Domain aus Soll zu einem Content Delivery Network ausgebaut werden
  • 48. Content Delivery Server (CDS) Apache CDS htdocs Internet
  • 49. Far Future Expires Header 2,5 Sekunden! Far Future Expires Header: „Diese Ressource verändert sich für die nächsten 15 Jahre nicht und kann immer aus dem Cache bezogen werden.“
  • 50. Far Future Expires Header „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“
  • 51. Far Future Expires Header Internet /img/footer/ui-logo.gif Publish <imgsrc=„http://uicdn.net/32j4g23j4-ui-logo.gif“> url(http://uicdn.net/32j4g23j4-ui-logo.gif) HTML <imgsrc=„/img/footer/ui-logo.gif“> url(/img/footer/ui-logo.gif) MD5-Hash /img/footer/ui-logo.gif 32j4g23j4-ui-logo.gif CDS Expires Header Sync auf CDS
  • 53. Content Delivery Server (CDS) Warum eine eigene Domain? Darum
  • 54. Content Delivery Server (CDS) * Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit
  • 55. Content Delivery Server (CDS) * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
  • 56. Content Delivery Server (CDS) * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
  • 57. Content Delivery Network Europa Lenexa Karlsruhe Atlantik USA
  • 58. Kennzahlen „Welche Größe haben die Daten, welche von den verschiedenen Seiten einesProjekts abgerufen werden?“ „Werden Daten angefragt, die nicht verfügbar sind (404)?“ http://zoompf.com/2010-state-of-web-performance-report
  • 59. Content Delivery Server (CDS) http://www.youtube.com/watch?v=IWWBnJEsUtU „Larry Page hat einmal die Vision geäußert, Webseiten so schnell browsen zu können, wie man die Seiten in einem Hochglanzmagazin umblättert.“
  • 61. Content Delivery Server (CDS) onLoad: Webservice.getNextGraphics(); „Image Prefetching“
  • 64. Statische Codeanalysen Problematischer Frontend-Code Inline-Code (Styles und Events) Deprecated Attributes (clear, target, align) Blank-Gifs Verwendung interner Templates Block-Elemente innerhalb von Inline-Elementen
  • 65. Statische Codeanalysen Teil des Build-Prozess Regeln in Xpath-Syntax //@style //pfx:button//div //@target //shop:price//div //@onclick //shop:countdown//div //br/br //img[@width=“1“ and @height=“1“]
  • 66. Statische Codeanalysen Initialer Aufwand nötig Danach … http://www.flickr.com/photos/29208923@N06/3755752618/
  • 68. Wie groß sind die ausgelieferten Ressourcen? Pro Applikation Pro Seite Werden Ressourcen nicht gefunden? Gibt es Ausreißer? Gibt es überflüssige Ressourcen?
  • 69.
  • 70. CDS Grafiken / Flash Jasmin Apache CSS / JS HTML Größe Fehlende Ress. Überflüssige Ress. Größe Ungenutzte CSS-Selektoren JavaScript-Fehler Größe Fehlende Dokumente
  • 72. Horst Marco Ralf Johannes Dietmar Matthias Helena Kerim Alex Andre Neda Ralph Mathias Gregor Andi Nico Matthias Kilian Uli
  • 73. Fragen? nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steiner
  • 74. Vielen Dank für eure Aufmerksamkeit! nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steiner