SlideShare ist ein Scribd-Unternehmen logo
Developer Convention 2011




Web Performance
 Optimization
   Jakob Schröter




    http://www.jakob-schroeter.de/
      http://www.seitenbau.com/
PERFORMANCE
WEB PERFORMANCE
LADEZEIT?
          Spalte2

                    1000 ms


          500 ms


 100 ms


50 ms
Einfluss der Ladezeit

             Glückliche User
               Mehr User
              Mehr Umsatz




   Kurze
  Ladezeit
Einfluss der Ladezeit
    Amazon                                  +100 ms                                                   1 % weniger Verkäufe1
    Yahoo                                   +400 ms                                                   5-9 % weniger Zugriffe1
    Google                                  +500 ms                                                   20 % weniger Zugriffe1
    Bing                                    +2000 ms                                                  4,3 % weniger Umsatz/Nutzer2

    Shopzilla                               -5000 ms                                                  25 % mehr Zugriffe
                                                                                                      7-12 % mehr Umsatz
                                                                                                      50 % weniger Hardware3
    Mozilla                                 -2200 ms                                                  15,4 % mehr Downloads4


1 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
2 http://www.slideshare.net/dyninc/the-user-and-business-impact-of-server-delays-additional-bytes-and-http-chunking-in-web-search-presentation
3 http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
4 http://blog.mozilla.com/metrics/category/website-optimization/
User Experience
 Empfohlene Ladezeit:
           – vor 2006: unter 8 Sekunden Jupiter research
           – 2006: unter 4 Sekunden Jupiter research
           – 2009: unter 2 Sekunden Forrester Research


 „Jede Website, deren Ladezeit eine Sekunde
 überschreitet, tut dem Benutzer weh.“ Jakob Nielsen

http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
10 Golden Principles of
                                    Successful Web Apps

                                                                 Speed
                                                            Instant Utility
                                                          Software is Media
                                                             Less is More
                                                         Make it Programmable
                                                           Make it Personal
                                                                RESTful
                                                            Discoverabilty
                                                                 Clean
                                                                 Playful
http://thinkvitamin.com/web-apps/fred-wilsons-10-golden-principles-of-successful-web-apps/
SEO -> WPO
• Search Engine Optimization ist ein
  Thema von gestern Steve Souders

• Performance beeinflusst Google Ranking
  seit April 2010
„Das Internet ist nicht
                                      schneller geworden“




http://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
PERFORMANCE OPTIMIEREN
Messen: z.B. JMeter
Bottlenecks finden: Profiling des Backends
Code optimieren / mehr Server-Hardware / bessere Server-Anbindung
Aber: Was wollen wir messen?


Wahrgenommene Wartezeit!
   = Inhalt ist für den Nutzer sichtbar
   = Nutzer denkt, er kann interagieren
Performance messen #1
• HTML-Seite generiert und          • Definiertes DOM-Element
  geladen                             sichtbar

• DOM-Ready-Event                   • „Above the Fold“ (AFT)
  DOM ist aufgebaut, Inhalt evtl.     keine Änderungen mehr am
  sichtbar                            sichtbaren Inhalt


• OnLoad-Event
  alle Ressourcen wurden geladen,
  Inhalt evtl. sichtbar
Performance messen #2
• verschiedene Clients
• verschiedene Locations
• verschiedenen Anbindungen

• Performance kontinuierlich messen
20%



      80%
Wahrgenommene Ladezeit
      einer Webseite


20%



                   80%
Wahrgenommene Ladezeit
         einer Webseite


20%
Server




                      80%
                      Client
Wahrgenommene Ladezeit
         einer Webseite


20%
Server




                      80%
                      Client
WAS PASSIERT IM BROWSER?
Your best friends
•   „F12“-Tools
•   Firebug
•   Yahoo YSlow
•   Google PageSpeed

• Speed limiter: Webscarab
• WebPageTest.com
• ShowSlow.com
HTML (Server)   Ressources (Client)
HTTP Requests are expensive!

ANZAHL DER REQUESTS REDUZIEREN
HTTP Requests reduzieren
• Redirects vermeiden

• Dateien sinnvoll kombinieren
  – base.js, dragndrop.js, upload.js, …
  – base.css, dashboard.css, lightbox.css

• Auch Grafiken – CSS Sprites
  – button.png, button_hover.png,
    button_active.png, …
CSS Sprites
sprites.png

                                        40px

                              110px




.button {
  width: 10px; height: 10px;
  background-image: url(sprites.png);
  background-position: 100px 40px;
}
.button:hover {
  background-position: 110px 40px;
}
Intelligentes Browser-Caching
          Use HTTPs potential!
• Achtung, ETag!
                   GET File
     Server                                Client
                              File



                   GET File, if modified
     Server                                Client
                   304 not modified
                                                File
Intelligentes Browser-Caching
• Besser: Expires-Header
                      GET File
     Server                                   Client
                                 File
                             Expires 01.01.2012 00:00




     Server                                   Client
                                                   File
Supercache: Gemeinsames CDN
• Google CDN
  – //ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js



• Aber: Single Point Of Failure
  – Asynchron laden
  – Lokales Fallback
Cache busters
•   base-12.js
•   styles-67.css
•   background-890.png
•   890/background.png
•   background.png?890
HTTP Requests are expensive!

REQUESTS VERKLEINERN
Compression & Minifying
• alles was geht: HTML, CSS, JS, JSON, XML,
  …aber keine Bilder, PDFs, SWFs, …

• Komprimieren
  – mod_deflate


• Minimieren
  – YUICompressor, UglifyJS, ...
Compression & Minifying
hdm-stuttgart.de




                                       Komprimiert
         Original Minified Komprimiert + Minified
 HTML 101 KB       97 KB    17 KB      16 KB
   CSS 90 KB       68 KB    19 KB      14 KB
     JS 243 KB     195 KB   73 KB      63 KB
         434 KB    360 KB   109 KB     93 KB




-341 KB ≈ -79%!
Compression & Minifying
laut.fm
Compression & Minifying
                         netflix.com




 “Adopting a single optimization,
 gzip compression, resulted in a 13-25% speedup
 and cut their outbound network traffic by 50%.”




http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
IMAGE
OPTIMIZATION
Image Optimization
          JPG         PNG     GIF




         Farbanzahl


• Richtige Abmessungen + „Für Web speichern“
• CSS-Sprites
smushit.com
hdm-stuttgart.de




              130 x 86 px
smushit.com
spiegel.de
smushit.com
koeln.de
smushit.com
laut.de
smushit.com
laut.fm
HDM-STUTTGART.DE


       -325 KB     Compression & Minifying



        -97 KB     Image Optimization



       -422 KB     -49%
HTTP Requests are expensive!

REIHENFOLGE DER REQUESTS
Order of loading ressources




<script> blockiert weitere Downloads
<script> blockiert Rendering

-> Reihenfolge beachten
-> defer/async-Attribute bzw. Loading-Tools nutzen
Order of loading ressources
                                  DOM-ready         onLoad




                 Zwingend            Sichtbare      Ergänzende
   CSS       notwendige Scripts                                     Pre-/Lazy-Loading
                                     Grafiken         Scripts




base.css      modernizr.min.js     background.jpg   dragndrop.js
                                   button.png       lightbox.js



           <head>                          <body>            Dynamisch per JS
PRELOADING
Preloading
• Z.B. Loginseite
LAZY-LOADING
Post-loading
Domain sharding / CDN
• Schnellere Antwortzeiten/Übertragungsraten
  – Schlanker Webserver
  – Cookie-freie Domain


• Parallele Downloads (für ältere Browser)
  – nur 2 Requests per Host


      s-static.ak.facebook.com
Advanced WPO

NOCH NICHT SCHNELL GENUG?
Advanced WPO
• Rendering optimieren
  – Progressive Rendering / Early Flushing
  – Anzahl der DOM-Element reduzieren
  – Reflow optimieren


• JS & CSS Optimizations
  –…
Chrome Speed Tracer
Strangeloop Site Optimizer




                   Fokus auf der vom Nutzer wahrgenommenen Ladezeit.
                   Analysiert Nutzerverhalten und lädt Ressourcen bereits vor.



http://www.strangeloopnetworks.com/
Web Performance Optimization

„IST JA GANZ SCHÖN
AUFWÄNDIG…“
Sehr gute Tools verfügbar
• Yahoo YSlow

• Google PageSpeed

• Dynatrace AJAX Edition

• WebPageTest.com
Vieles lässt sich automatisieren
Integration in den Deployment/Build-Prozess

  – JS/CSS-Dateien kombinieren
  – Compression & Minifying
  – Caching und Cache busters
  – Bildoptimierung
  – Verteilung auf CDN
Auf dem Server
• On-the-fly
  – Mod_deflate
  – Mod_pagespeed
  – WEBO Site SpeedUp (PHP)
Externe (kommerzielle) Services
• On-the-fly in der Cloud
  – blaze.io
  – strangeloopnetworks.com
  – Google Page Speed Service


• Monitoring
  – Gomez
Multiplexed streams
          Request prioritization      Server push & hint

                            HTTP header compression



Was Google hat, was wir nicht haben…

GOOGLE + CHROME                         use   SPDY
                                              An experimental protocol
                                              for a faster web


                 ~50% reduction in page load time
Entlastet auch
           Enorme                 die Server
         Auswirkungen                               Basics sind einfach


Von Anfang an Best
                     Performance
Practices beachten
   & ggf. weiter
    optimieren
                       matters!
                 Direkte Verbesserung       Kosten/Nutzen abwägen
                     für die Nutzer
                                        don‘t fiddle – analyse first
         Mobiles Internet
                               RIA
Weiterführend
• Bücher:
   – Steve Souders: High Performance Websites
   – Steve Souders: Even Faster Websites
• Test-Webseite: http://stevesouders.com/cuzillion

• http://developer.yahoo.com/performance/
• http://code.google.com/intl/de-DE/speed/
Developer Convention 2011




Web Performance
 Optimization
   Jakob Schröter




    http://www.jakob-schroeter.de/
      http://www.seitenbau.com/

Weitere ähnliche Inhalte

Was ist angesagt?

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenDavid Maciejewski
 
SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011
formaremedia
 
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
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
Nikolas Schmidt-Voigt
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
Danny Linden
 
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
 
Redaktionelle Hochlastwebseiten am Beispiel von stern.de
Redaktionelle Hochlastwebseiten am Beispiel von stern.deRedaktionelle Hochlastwebseiten am Beispiel von stern.de
Redaktionelle Hochlastwebseiten am Beispiel von stern.de
Nils Langner
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
Sinan Akalın
 

Was ist angesagt? (9)

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
 
SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011
 
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 2014
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
VDI-in-a-Box
VDI-in-a-BoxVDI-in-a-Box
VDI-in-a-Box
 
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
 
Redaktionelle Hochlastwebseiten am Beispiel von stern.de
Redaktionelle Hochlastwebseiten am Beispiel von stern.deRedaktionelle Hochlastwebseiten am Beispiel von stern.de
Redaktionelle Hochlastwebseiten am Beispiel von stern.de
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
 

Ähnlich wie SDC2011: Web Performance Optimization

PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014
Franz Hernschier
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
AOE
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
skyfyre
 
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceCrawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
André Goldmann
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
Jan Berens
 
Kritische app performance erfolgreich optimieren mit Bison
Kritische app performance erfolgreich optimieren mit BisonKritische app performance erfolgreich optimieren mit Bison
Kritische app performance erfolgreich optimieren mit Bison
Dynatrace
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
Nico Steiner
 
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Stefan Seifarth
 
Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015
Daniel Gerlach
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
David Schneider
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
Patric Boscolo
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.David Schneider
 
Der Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingDer Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen Marketing
Thom. Poole
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
Peter Hecker
 

Ähnlich wie SDC2011: Web Performance Optimization (20)

PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceCrawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
Kritische app performance erfolgreich optimieren mit Bison
Kritische app performance erfolgreich optimieren mit BisonKritische app performance erfolgreich optimieren mit Bison
Kritische app performance erfolgreich optimieren mit Bison
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
 
Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.
 
Der Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingDer Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen Marketing
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 

Mehr von Jakob

Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
Jakob
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]
Jakob
 
Flash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätFlash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen Endgerät
Jakob
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
Jakob
 
Ruby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby IntroductionRuby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby Introduction
Jakob
 
Ruby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails IntroductionRuby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails Introduction
Jakob
 
Ruby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails AddonsRuby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails Addons
Jakob
 

Mehr von Jakob (7)

Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]
 
Flash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätFlash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen Endgerät
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
 
Ruby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby IntroductionRuby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby Introduction
 
Ruby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails IntroductionRuby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails Introduction
 
Ruby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails AddonsRuby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails Addons
 

SDC2011: Web Performance Optimization

  • 1. Developer Convention 2011 Web Performance Optimization Jakob Schröter http://www.jakob-schroeter.de/ http://www.seitenbau.com/
  • 2.
  • 4.
  • 6.
  • 7. LADEZEIT? Spalte2 1000 ms 500 ms 100 ms 50 ms
  • 8.
  • 9. Einfluss der Ladezeit Glückliche User Mehr User Mehr Umsatz Kurze Ladezeit
  • 10. Einfluss der Ladezeit Amazon +100 ms 1 % weniger Verkäufe1 Yahoo +400 ms 5-9 % weniger Zugriffe1 Google +500 ms 20 % weniger Zugriffe1 Bing +2000 ms 4,3 % weniger Umsatz/Nutzer2 Shopzilla -5000 ms 25 % mehr Zugriffe 7-12 % mehr Umsatz 50 % weniger Hardware3 Mozilla -2200 ms 15,4 % mehr Downloads4 1 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 2 http://www.slideshare.net/dyninc/the-user-and-business-impact-of-server-delays-additional-bytes-and-http-chunking-in-web-search-presentation 3 http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html 4 http://blog.mozilla.com/metrics/category/website-optimization/
  • 11. User Experience Empfohlene Ladezeit: – vor 2006: unter 8 Sekunden Jupiter research – 2006: unter 4 Sekunden Jupiter research – 2009: unter 2 Sekunden Forrester Research „Jede Website, deren Ladezeit eine Sekunde überschreitet, tut dem Benutzer weh.“ Jakob Nielsen http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
  • 12. 10 Golden Principles of Successful Web Apps Speed Instant Utility Software is Media Less is More Make it Programmable Make it Personal RESTful Discoverabilty Clean Playful http://thinkvitamin.com/web-apps/fred-wilsons-10-golden-principles-of-successful-web-apps/
  • 13. SEO -> WPO • Search Engine Optimization ist ein Thema von gestern Steve Souders • Performance beeinflusst Google Ranking seit April 2010
  • 14. „Das Internet ist nicht schneller geworden“ http://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  • 15. PERFORMANCE OPTIMIEREN Messen: z.B. JMeter Bottlenecks finden: Profiling des Backends Code optimieren / mehr Server-Hardware / bessere Server-Anbindung
  • 16. Aber: Was wollen wir messen? Wahrgenommene Wartezeit! = Inhalt ist für den Nutzer sichtbar = Nutzer denkt, er kann interagieren
  • 17. Performance messen #1 • HTML-Seite generiert und • Definiertes DOM-Element geladen sichtbar • DOM-Ready-Event • „Above the Fold“ (AFT) DOM ist aufgebaut, Inhalt evtl. keine Änderungen mehr am sichtbar sichtbaren Inhalt • OnLoad-Event alle Ressourcen wurden geladen, Inhalt evtl. sichtbar
  • 18. Performance messen #2 • verschiedene Clients • verschiedene Locations • verschiedenen Anbindungen • Performance kontinuierlich messen
  • 19. 20% 80%
  • 20. Wahrgenommene Ladezeit einer Webseite 20% 80%
  • 21. Wahrgenommene Ladezeit einer Webseite 20% Server 80% Client
  • 22. Wahrgenommene Ladezeit einer Webseite 20% Server 80% Client
  • 23. WAS PASSIERT IM BROWSER?
  • 24. Your best friends • „F12“-Tools • Firebug • Yahoo YSlow • Google PageSpeed • Speed limiter: Webscarab • WebPageTest.com • ShowSlow.com
  • 25. HTML (Server) Ressources (Client)
  • 26. HTTP Requests are expensive! ANZAHL DER REQUESTS REDUZIEREN
  • 27. HTTP Requests reduzieren • Redirects vermeiden • Dateien sinnvoll kombinieren – base.js, dragndrop.js, upload.js, … – base.css, dashboard.css, lightbox.css • Auch Grafiken – CSS Sprites – button.png, button_hover.png, button_active.png, …
  • 28. CSS Sprites sprites.png 40px 110px .button { width: 10px; height: 10px; background-image: url(sprites.png); background-position: 100px 40px; } .button:hover { background-position: 110px 40px; }
  • 29. Intelligentes Browser-Caching Use HTTPs potential! • Achtung, ETag! GET File Server Client File GET File, if modified Server Client 304 not modified File
  • 30. Intelligentes Browser-Caching • Besser: Expires-Header GET File Server Client File Expires 01.01.2012 00:00 Server Client File
  • 31. Supercache: Gemeinsames CDN • Google CDN – //ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js • Aber: Single Point Of Failure – Asynchron laden – Lokales Fallback
  • 32. Cache busters • base-12.js • styles-67.css • background-890.png • 890/background.png • background.png?890
  • 33. HTTP Requests are expensive! REQUESTS VERKLEINERN
  • 34. Compression & Minifying • alles was geht: HTML, CSS, JS, JSON, XML, …aber keine Bilder, PDFs, SWFs, … • Komprimieren – mod_deflate • Minimieren – YUICompressor, UglifyJS, ...
  • 35.
  • 36. Compression & Minifying hdm-stuttgart.de Komprimiert Original Minified Komprimiert + Minified HTML 101 KB 97 KB 17 KB 16 KB CSS 90 KB 68 KB 19 KB 14 KB JS 243 KB 195 KB 73 KB 63 KB 434 KB 360 KB 109 KB 93 KB -341 KB ≈ -79%!
  • 38. Compression & Minifying netflix.com “Adopting a single optimization, gzip compression, resulted in a 13-25% speedup and cut their outbound network traffic by 50%.” http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
  • 40. Image Optimization JPG PNG GIF Farbanzahl • Richtige Abmessungen + „Für Web speichern“ • CSS-Sprites
  • 46. HDM-STUTTGART.DE -325 KB Compression & Minifying -97 KB Image Optimization -422 KB -49%
  • 47. HTTP Requests are expensive! REIHENFOLGE DER REQUESTS
  • 48. Order of loading ressources <script> blockiert weitere Downloads <script> blockiert Rendering -> Reihenfolge beachten -> defer/async-Attribute bzw. Loading-Tools nutzen
  • 49. Order of loading ressources DOM-ready onLoad Zwingend Sichtbare Ergänzende CSS notwendige Scripts Pre-/Lazy-Loading Grafiken Scripts base.css modernizr.min.js background.jpg dragndrop.js button.png lightbox.js <head> <body> Dynamisch per JS
  • 54. Domain sharding / CDN • Schnellere Antwortzeiten/Übertragungsraten – Schlanker Webserver – Cookie-freie Domain • Parallele Downloads (für ältere Browser) – nur 2 Requests per Host s-static.ak.facebook.com
  • 55. Advanced WPO NOCH NICHT SCHNELL GENUG?
  • 56. Advanced WPO • Rendering optimieren – Progressive Rendering / Early Flushing – Anzahl der DOM-Element reduzieren – Reflow optimieren • JS & CSS Optimizations –…
  • 58. Strangeloop Site Optimizer Fokus auf der vom Nutzer wahrgenommenen Ladezeit. Analysiert Nutzerverhalten und lädt Ressourcen bereits vor. http://www.strangeloopnetworks.com/
  • 59. Web Performance Optimization „IST JA GANZ SCHÖN AUFWÄNDIG…“
  • 60. Sehr gute Tools verfügbar • Yahoo YSlow • Google PageSpeed • Dynatrace AJAX Edition • WebPageTest.com
  • 61. Vieles lässt sich automatisieren Integration in den Deployment/Build-Prozess – JS/CSS-Dateien kombinieren – Compression & Minifying – Caching und Cache busters – Bildoptimierung – Verteilung auf CDN
  • 62. Auf dem Server • On-the-fly – Mod_deflate – Mod_pagespeed – WEBO Site SpeedUp (PHP)
  • 63. Externe (kommerzielle) Services • On-the-fly in der Cloud – blaze.io – strangeloopnetworks.com – Google Page Speed Service • Monitoring – Gomez
  • 64. Multiplexed streams Request prioritization Server push & hint HTTP header compression Was Google hat, was wir nicht haben… GOOGLE + CHROME use SPDY An experimental protocol for a faster web ~50% reduction in page load time
  • 65.
  • 66. Entlastet auch Enorme die Server Auswirkungen Basics sind einfach Von Anfang an Best Performance Practices beachten & ggf. weiter optimieren matters! Direkte Verbesserung Kosten/Nutzen abwägen für die Nutzer don‘t fiddle – analyse first Mobiles Internet RIA
  • 67. Weiterführend • Bücher: – Steve Souders: High Performance Websites – Steve Souders: Even Faster Websites • Test-Webseite: http://stevesouders.com/cuzillion • http://developer.yahoo.com/performance/ • http://code.google.com/intl/de-DE/speed/
  • 68. Developer Convention 2011 Web Performance Optimization Jakob Schröter http://www.jakob-schroeter.de/ http://www.seitenbau.com/