SlideShare ist ein Scribd-Unternehmen logo
Webmontag. Frankfurt. Schneller. Nur 15 Minuten. WPO. Web Performance Optimierung. Namics.Martin Kliehm. Senior Frontend Engineer.@kliehm. @namics.17. Mai 2010
Web Performance Optimierung seit 200617.05.2010Performance. Webmontag.2
Performance:schnell & klein sein.17.05.20103Performance. Webmontag.http://flic.kr/p/5jZ2nP
Performance. Webmontag.Komponenten einer Webseite:Ein großes deutsches Bankhaus17.05.20104http://webpagetest.org

Empfohlen für Sie

FMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael ValentinFMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael Valentin

FileMaker WebDirect ist eine in FileMaker Server 14 integrierte, wegweisende Webtechnologie. Sie führen damit individuelle Business-Lösungen direkt mit einem handelsüblichen Webbrowser eines Arbeitsplatzrechners oder Laptops aus. Sie benötigen dafür keinerlei Webentwicklungsfähigkeiten. Einfacher geht es nicht. Mit FileMaker WebDirect benötigen Sie keine Codierungswerkzeuge wie PHP, HTML5, CSS oder JavaScript, um stabile Lösungen für das Web zu entwickeln. Ihre FileMaker-Kenntnisse reichen vollkommen, um mit wenigen Klicks eine Datenbanklösung zu erstellen und für die Verwendung mit einem Webbrowser anzubieten. Weil FileMaker WebDirect wie eine Desktopanwendung aussieht und auch genauso funktioniert, nutzen Sie bekannt und damit vertraute Funktionen für die Interaktion, für Aktualisierungen in Echtzeit und für automatisiert ausgeführte Prozesse. Ich werde in diesem Vortrag auf die zu verwendeten Technologien eingehen: - Aktivieren und Bereitstellen auf dem FileMaker Server - Designrichtlinien - Lizenzmodelle, Connection-Packs Als Arbeitsgrundlage dient das WebDirect Guide, Starterlösungen von FileMaker, FTS Material.

filemaker konferenz 2015filemaker 14webdirect
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!

A presentation at Kscope16 about using WebSockets to improve usability in an Oracle APEX Application.

javascriptwebsocketsmt ag
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?

Neuerungen mit IBM Connections 6 und eine Vorschau auf "Pink", der nächste Schritt für IBM Connections

dockerorientmetouchpoint
Performance. Webmontag.Komponenten einer Webseite:Ein großes deutsches Bankhaus17.05.20105← Backend (HTML): 8,67%DNS Lookup:	299 msBackend (HTML):	514 ms = 8,67%Frontend:	5402 ms = 91,12%JavaScript:1717 ms
Komponenten einer Webseite:Ein großes deutsches Bankhaus17.05.20106DNS Lookup:	299 msBackend (HTML):	514 ms = 8,67%Frontend:	5402 ms = 91,12%JavaScript:1717 msJavaScript lädt sequentiellBilder:nur 2 – 4parallelGesamt:	5928 msFrontend: 91,12%Performance. Webmontag.
5,9 Sekunden Ladezeit sinddoch nicht schlecht, oder?17.05.20107Performance. Webmontag.http://flic.kr/p/27sG2k
Case Studies: Langsamer100 ms. Verzögerung è− 1% Umsatz400 ms. Verzögerung è− 0,59% Suchen pro User400 ms. Verzögerung è5 – 9% weniger Traffic2 sec. langsamer è− 4,3% Umsatz pro User17.05.2010Performance. Webmontag.8

Empfohlen für Sie

Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual

Eine Übersicht der neuen Möglichkeiten und der Client Vielfalt für den Zugriff auf Domino Mail

on premisesimsmoibm verse
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)

Mein Vortrag auf der WebTech-Konferenz am 12.10.2010 in Mainz und der SEO-Konferenz am 13.10.2010 in Zürich.

wpoyslowpage speed
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014

Meine Präsentation der #SEOkomm2014 in Salzburg zum Thema Performance Optimierung. Neben diversen Zahlen sprechen wir über das Critical Path Rendering, Strategien zur Web-Request Optimierung, (WordPress-) Caching und vieles mehr!

sitespeedweb optimierungperformance
Case Studies: Schneller2,2 sec. schnellere Seite è+ 15,4% Downloads− 30% Dateivolumen è+ 30% KartenaufrufeEine einzige Optimierungsmaßnahme, gzipè		+ 13-25% schneller,50% Dateivolumen eingespart5 sec. schnellere Shopseitenè+ 7-12% Conversion Rate,		+ 25% mehr Seitenaufrufe,		50% Server + Energiekosten gespart17.05.2010Performance. Webmontag.9
17.05.2010Performance. Webmontag.10http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
17.05.2010Performance. Webmontag.11http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
17.05.2010Performance. Webmontag.12http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team

Empfohlen für Sie

Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
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.

phpperformancefrontend
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
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.

berlinwebinaleipc
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
cdnmodularisierungcss
17.05.2010Performance. Webmontag.13http://scribd.com/doc/16878352/The-Secret-Weapons-of-the-AOL-Optimization-Team
Google Search Ranking“Our users place a lot of value in speed —  that’s why we’ve decided to take site speed  into account in our search rankings.”Google Blog, April 201017.05.2010Performance. Webmontag.14
Performanz. Schneller. Besser. Grüner.Mehr Umsatz. Alle glücklich. Namics.17.05.201015Performance. Webmontag.http://flic.kr/p/8VHFb
Die (bekannten) 14 Regeln17.05.201016Performance. Webmontag.

Empfohlen für Sie

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
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance

My talk at PHP Kongress 2010 about rules and practices considering web performance.

prefetchingcdnstatistics
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
wpoclient-side performanceweb performance
Die (bekannten) 14 RegelnGzip Components Add an Expires HeaderReduce DNS Lookups Avoid RedirectsMake Fewer HTTP RequestsMake JavaScript and CSS ExternalMinify JavaScriptPut CSS at the TopAvoid CSS ExpressionsPut Scripts at the BottomRemove DuplicateScriptsUse a Content Delivery Network (CDN)Configure ETagsMake AJAX Cacheable17.05.2010Performance. Webmontag.17http://developer.yahoo.com/performance/rules.html
Die (bekannten) 14 35 RegelnFlushBufferEarlyUseGETforAjaxRequestsPostload ComponentsPreload ComponentsReducetheNumberofDOM ElementsSplit ComponentsAcross DomainsMinimizeNumberofiframesAvoid404sReduceCookie SizeUseCookie-Free Domains for ComponentsMinimizeDOM AccessDevelopSmart Event HandlersChoose<link> Over @importAvoidFiltersOptimizeImagesOptimizeCSS SpritesDo Not ScaleImages in HTMLMakefavicon.ico Small andCacheableKeep Components Under25 KBPack Components Into a Multipart DocumentAvoidEmpty Imagesrc17.05.2010Performance. Webmontag.18http://developer.yahoo.com/performance/rules.html
17.05.201019Performance. Webmontag.Neue (?) Ideen:Keine eigene Datei print.css
<link type="text/css"media="print"src="print.css" />17.05.2010Performance. Webmontag.20@mediaprint { a { text-decoration: none; }}ü

Empfohlen für Sie

HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009

Presentation of HTML5 (history, context, current state) at W3C-Tag 2009

Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance

10 wichtige Regeln zur Steigerung der Frontend Performance in Verbindung mit der Jasmin-Servlet-Technologie. Vorstellung von Performance-Tools.

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)

Morgens halb zehn in Deutschland: Der Puls Ihrer Anwender ist mittlerweile im dreistelligen Bereich und die ersten User denken ernsthaft darüber nach, den PC aus dem Fenster zu werfen. Ursache: Die von Ihnen entwickelte webbasierte App bremst die Nutzer stets an den entscheidenden Stellen aus. An produktives Arbeiten ist kaum noch zu denken und Überstunden stehen auf dem Tagesprogramm. Doch so weit muss es gar nicht kommen. Glückliche Anwender sind nur wenige Handgriffe entfernt. Und genau diese Handgriffe, wird Ihnen André Krämer in diesem Vortrag zeigen. Gemeinsam werden wir den Ursachen langsamer Web- und Mobile-Apps in den Bereichen JavaScript, CSS und Co. auf den Grund gehen und diese Schritt für Schritt eliminieren.

performancehtml5javascript
17.05.201021Performance. Webmontag.CSS background-images reduzieren mit data:URI
#wrapper {	background:url( bg.gif ); }17.05.2010Performance. Webmontag.22#wrapper {	background:url( "data:image/png; 			base64,iVBORw0[…]" ); }ühttp://software.hixie.ch/utilities/cgi/data/data
		Die Lösung: M(ultipart)HTML		in der ie.css/*Content-Type: multipart/related; boundary="SEPARATOR"--SEPARATORContent-Location:bgimg1Content-Transfer-Encoding:base64iVBORw0[…]*/17.05.2010Performance. Webmontag.23http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
		Die Lösung: M(ultipart)HTML		in der ie.css#wrapper {	background:url( "mhtml:http://me.com/ie.css!bgimg1" );}17.05.2010Performance. Webmontag.24http://phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Empfohlen für Sie

Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015

Mein Vortrag der SEOkomm 2015 in Salzburg, u.a. rund um Webfonts, asynchrone Scripte, Prefetching und Prerendering, AMP, HTTP2 und mehr!

http2webperfwebp
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento

High performance magento - approaches for high performance webapplications: - profiling - caching - varnish - cloud - magento tipps

varnishmm13deperformance
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

Googles Page Experience Update steht vor der Tür. Im kommenden Jahr wird die Ladezeit zum Rankingfaktor und damit zum Optimierungsgegenstand für Suchmaschinenoptimierer. Kai Spriestersbach zeigt in seinem Vortrag einige fortgeschrittene Methoden, mit denen er, über die bekannten Basics hinaus, die Ladezeit moderner Webseiten effektiv verbessert.

17.05.201025Performance. Webmontag.Apache-Module: modconcat, modjsmin, moddims
Apache modconcat zum Aggregieren von CSS oder JavaScript<script type="text/javascript"src="http://yourdomain.com/??script-1.js,script-2.js"></script>Verwendet den Cache Header derjüngstenDatei17.05.2010Performance. Webmontag.26http://artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/
Apache modjsmin$ apxs -c mod_jsmin.cLoadmodulejsmin_modulemodules/mod_jsmin.so17.05.2010Performance. Webmontag.27http://code.google.com/p/modjsmin/
Apache moddims<imgsrc="http://yourdims.com/dims/resize/320x240/quality/70/		http://yourdomain.com/ 			lorem.jpg"width="320" height="240"	alt="Loremipsum" />17.05.2010Performance. Webmontag.28http://code.google.com/p/moddims/

Empfohlen für Sie

Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme

Meine Session auf der Campixx 2012 in Berlin

pagespeedladezeitgoogle
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung

Folien zu einem Vortrag, der auf dem Summercamp Alfeld 2012 gehalten wurde. Mehr Informationen unter: http://www.kawumba.de/front-end-performance-summercamp-alfeld-2012/

Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk

Slides for my talk about web performance optimization at JAX 2011

wpoperformance
17.05.201029Performance. Webmontag.Lazy-loadimages
Lazy-Loading von BildernVerschiedene JavaScript-Libraries:17.05.2010Performance. Webmontag.30LazyLoad (jQuery)
ImageLoader (YUI)
Sonar (AOL, standalone)17.05.201031Performance. Webmontag.@font-face für Icons

Empfohlen für Sie

Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web

Lange Wartezeiten und mangelnde Responsivität unserer Webapplikation führen zu unzufriedenen Benutzern, was sich in hohen Absprungraten und Abwanderung zur Konkurrenz oder einfach der Weigerung, die Applikation zu verwenden, niederschlägt. Das Problem einer langsamen Applikation lässt sich jedoch leider nicht ganz so einfach lösen. Wichtig für eine nachhaltige Lösung ist das Verständnis der Abläufe im Browser. Aus diesem Grund beschäftigen wir uns hier mit Konzepten wie dem Critical Rendering Path und einigen Charakteristiken der JavaScript-Engines. Im Zuge dieses Vortrags werden einige der häufigsten Problemstellungen von Webapplikationen analysiert und Lösungsansätze und Best Practices zur Behebung der Performanceprobleme vorgestellt.

performanceweb
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks

Deutschsprachige Version eines Vortrags bei der SAE Alumni Convention 2011 über moderne Webentwicklung im Fokus von HTML5 und CSS3

saehtml5css3
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017

Meine Präsentation der SMX 2017 in München (Tag 2) rund um das Thema "HTTPs Site Migration" inkl. ausführlicher Checkliste, diversen Tools für Monitoring, Testing, etc. sowie vielem mehr!

technical seositemapseo
@font-face für IconsIcons in Illustrator erstellenIn FontForge importierenVerschiedene Font-Formate mitFontSquirrel generieren (TTF, WOFF, EOT, SVG)@font-faceim CSS einbauenVorteile: skalierbar, Farbe frei wählbar, an Grundlinie ausgerichtet; Nachteil: einfarbig (Gradient mit CSS3?)17.05.2010Performance. Webmontag.32

Weitere ähnliche Inhalte

Was ist angesagt?

Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
Kai Donato
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
Kai Donato
 
Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?
Belsoft
 
FMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael ValentinFMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael Valentin
Verein FM Konferenz
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
Kai Donato
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
Belsoft
 
Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual
Belsoft
 

Was ist angesagt? (7)

Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?Was bedeutet BlackBerry 10 für Unternehmen?
Was bedeutet BlackBerry 10 für Unternehmen?
 
FMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael ValentinFMK2015: FileMaker 14 Webdirect by Michael Valentin
FMK2015: FileMaker 14 Webdirect by Michael Valentin
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
 
Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual
 

Ähnlich wie Performance. Webmontag. Frankfurt.

Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
 
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
Fabian Lange
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
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-Optimierungen
Jakob
 
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
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
Nico Steiner
 
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
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
Bastian Grimm
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
AOE
 
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
SEARCH ONE
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
Alexander Merkel
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
Nikolas Schmidt-Voigt
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
Fabian Lange
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
Bastian Grimm
 

Ähnlich wie Performance. Webmontag. Frankfurt. (20)

Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
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
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
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
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
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)
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
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
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 

Mehr von Martin Kliehm

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture Data
Martin Kliehm
 
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtKommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Martin Kliehm
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
Martin Kliehm
 
P2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationP2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting Motivation
Martin Kliehm
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Martin Kliehm
 
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Martin Kliehm
 
ARIA und HTML 5
ARIA und HTML 5ARIA und HTML 5
ARIA und HTML 5
Martin Kliehm
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
Martin Kliehm
 
ARIA
ARIAARIA
Das Canvas-Element in HTML5
Das Canvas-Element in HTML5Das Canvas-Element in HTML5
Das Canvas-Element in HTML5
Martin Kliehm
 

Mehr von Martin Kliehm (10)

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture Data
 
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtKommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
 
P2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationP2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting Motivation
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
 
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
 
ARIA und HTML 5
ARIA und HTML 5ARIA und HTML 5
ARIA und HTML 5
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
ARIA
ARIAARIA
ARIA
 
Das Canvas-Element in HTML5
Das Canvas-Element in HTML5Das Canvas-Element in HTML5
Das Canvas-Element in HTML5
 

Performance. Webmontag. Frankfurt.

Hinweis der Redaktion

  1. „WPO“ ist das Akronym für Web Performance Optimierung, analog zu „SEO“ wird es in den nächsten Jahren eine eigene Industrie werden.
  2. TenniTheurer und Steve Souders begannen 2006 bei Yahoo!, die Performanz von Webseiten eingehender zu untersuchen. Entsprechend der Prämisse, dass man am Ende mehr profitiert, wenn man seine Erkenntnisse mit anderen teilt, publizierte Yahoo! diese Ergebnisse auf Konferenzen und Blogs noch im selben Jahr. Souders veröffentlichte in der Zwischenzeit zwei Bücher zum Thema und arbeitet heute bei Google. Bei Namics befassen wir uns mit WPO seit Sommer 2006.
  3. Studien von Yahoo! und Google haben ergeben, dass nur 10-20% der Ladezeit vom Server abhängig ist. Bis vor wenigen Jahren dachte man bei Geschwindigkeit ausschließlich an den Server. Tatsächlich werden aber 80-90% der Ladezeit im Frontend fällig. Darum ist Web Performance Optimierung (WPO) im Frontend effizienter.Zwei wichtige Schwachstellen sind JavaScript-Dateien und die schiere Anzahl von Dateien:JavaScript lädt sequentiell und blockiert sämtliche nachfolgenden Inhalte. Darum sollte es nicht im Kopf, sondern im Fuß einer Seite stehen.Zweitens können ältere Browser, vor allem der Internet Explorer, nur 2-4 Dateien parallel laden. Dateien bilden darum eine Schlange, die nur langsam abgearbeitet wird. Ziel ist es darum, durch Zusammenfassung von Dateien die Anzahl der HTTP-Requests zu reduzieren.
  4. Zusätzlich zur Seitenverzögerung hat man festgestellt, dass die Nutzer abgelenkter werden. 400 ms. mehr Ladezeit führten zu fast 800 ms. Verzögerung bis zur Interaktion mit der Seite!
  5. AOL hat die Anzahl der Page Views in Abhängigkeit von der Ladegeschwindigkeit untersucht. Wenig überraschend war die Anzahl der besuchten Seiten höher, wenn sie schnell luden. Interessanterweise ist der Kurvenverlauf bei den untersuchten Sites unterschiedlich. Offenbar spielt der Kontext bzw. Surf-Modus eine Rolle, wieviele Seiten ein User durchklickt.
  6. Es gibt verschiedene JavaScript-Libraries, die Bilder erst dann nachladen, wenn man sie braucht.