Your SlideShare is downloading. ×
0
Web PerformanceOptimierungWalter Ebert
http://www.webpagetest.org/result/121212_RW_ED4/
http://www.akamai.com/html/about/press/releases/2010/press_061410.html57% der Online-Käuferwarten 3 Sekunden oder wenigerb...
Amazon100 Millisekunden schneller1% mehr Umsatzhttp://www.strangeloopnetworks.com/resources/infographics/web-performance-a...
Mozilla2,2 Sekunden schneller15,4% mehr Downloadshttps://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%8...
http://googlewebmastercentral.blogspot.de/2010/04/using-site-speed-in-web-search-ranking.htmlSEO
http://www.nccgroup.com/en/blog/2013/06/will-faster-user-bandwidth-fix-your-site-performance-woes/DSL (1.5Mbps) > Cable (5...
http://www.telekom.com/medien/produkte-fuer-privatkunden/184370
http://www.flickr.com/photos/patrik_karlsson/6851386144/
http://www.flickr.com/photos/usnavy/6083504722/
Last-Tests• Apache Bench• Siege• jMeter• WebLoadUI
Skalierbarkeitvs.Performance
Content Delivery Network(CDN)
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.htmlhttp://caniuse.com/nav-timingW3C Navigatio...
http://kaaes.github.io/timing/
https://www.webpagetest.org/result/130610_D0_PDZ/
https://www.webpagetest.org/result/130610_D0_PDZ/
http://www.webpagetest.org/result/130607_YF_TAK/
http://yslow.org/
http://mobitest.akamai.com/m/results.cgi?testid=130413_GA_T
http://httparchive.org/trends.php
http://www.flickr.com/photos/dominicspics/5829559819/
Bilder optimieren• ImageOptim (Mac)• Trimage (Linux)• kraken.io / smush.it (Web)• Google Pagespeed (Chrome / Firefox)• Kom...
Jpegtran783K -copy all750K -copy none742K -copy none -optimize740K -copy all -optimize -progressive708K -copy none -optimi...
http://adaptive-images.com/ https://github.com/davemcdermid/AdaptiveImages
http://responsiveimages.org/
https://github.com/scottjehl/picturefill
CSS Sprites.flag {display: inline-block;width: 16px;height: 11px;overflow: hidden;background: transparent url(flags.png) s...
DATA URIsKommando$ base64 -w 0 fb.png > fb.png.txt$ php -r "echo base64_encode(file_get_contents(fb.png));" > fb.png.txtCS...
https://github.com/nzakas/cssembed
http://www.spritebaker.com/
DATA URIs<img src=data:image/png;base64,iVBORw…g== alt=>
https://github.com/filamentgroup/grunticon http://www.grumpicon.com/
http://icomoon.io/
Abmessungen festlegen<img src="logo.png"width="182"height="60"alt="Logo" />
http://www.flickr.com/photos/soulsystem2010/4502340253/
ServerkonfigurationGZIPText (HTML, CSS, JS, JSON, XML, SVG, ...)Expires headerBrowser cacheKeep aliveTCP/IP-Verbindung
https://github.com/h5bp/server-configs
Kombiniere CSS / Javascript<link rel="stylesheet" type="text/css" href="style.css" /><link rel="stylesheet" type="text/css...
Minifiziere CSS / Javascript• Yahoo! YUI Compressor (Java)• Google Closure Compiler (Java)• Uglify.js (Node.js)• Microsoft...
https://github.com/h5bp/ant-build-script https://github.com/h5bp/node-build-script
https://developers.google.com/speed/pagespeed/modhttp://www.youtube.com/watch?v=uR5urTx8S4E
http://www.webpagetest.org/result/130616_3E_A0H/1/details/SSL
HTTP(S)<script src="//connect.facebook.net/de_DE/all.js"></script>
Javascript am EndeAlso:</div><script src=scripts.js></script></body></html>Anstatt:<head><script src=scripts.js></script><...
http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1
http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1
Nicht-blockierend ladenAus:<script src=//connect.facebook.net/de_DE/all.js></script>Wird:<script>(function(d, s, id) {var ...
WebfontsAus:<link rel=stylesheet id=fontdeck-csshref=http://f.fontdeck.com/s/css/qjAxanDb3GzL8rviVV7PWUySExw/*.smashingmag...
Vergleichhttp://www.webpagetest.org/video/compare.php?tests=130208_6K_PNS,130208_CZ_PNT
Redirects<?phpheader(Location: /de/startseite);
Clientseitigvs.Serverseitighttp://www.brucelawson.co.uk/2013/the-amazing-all-new-performant-holy-grail-app-development-met...
Prefetching<link rel="dns-prefetch" href="//ajax.googleapis.com"><link rel="prefetch" href="http://tastywhe.at/yes/"><link...
<input type="email" required>http://walterebert.com/playground/html5/input-types/Form Input Types
Touch
Video Media Queries<video controls><source src="small.mp4" type="video/mp4"media="all and (max-width:480px)"><source src="...
MP4 Support<script>function supports_mp4() {return !!document.createElement(video).canPlayType(video/mp4;codecs="avc1.42E0...
MP4 moov atomffmpeg -i alt.mp4 -c:v copy -c:a copy -movflags faststart neu.mp4http://ffmpeg.org/http://www.adobe.com/devne...
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://wurfl.sourceforge.net/
Responsive Design + Server Side Components(RESS)http://www.lukew.com/ff/entry.asp?1392
http://de.slideshare.net/buddybrewer/tying-web-performance-data-to-human-behavior
Fazit• Weniger Requests• Kleinere Datenmengen• Parallele Downloads• Optische Täuschung
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Upcoming SlideShare
Loading in...5
×

Web Performance Optimierung - DWX13

6,897

Published on

Session für die Developer Week 2013 in Nürnberg

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,897
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web Performance Optimierung - DWX13"

  1. 1. Web PerformanceOptimierungWalter Ebert
  2. 2. http://www.webpagetest.org/result/121212_RW_ED4/
  3. 3. http://www.akamai.com/html/about/press/releases/2010/press_061410.html57% der Online-Käuferwarten 3 Sekunden oder wenigerbevor sie eine Webseite verlassen
  4. 4. Amazon100 Millisekunden schneller1% mehr Umsatzhttp://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/amazon-100ms-faster-1-revenue-increase/
  5. 5. Mozilla2,2 Sekunden schneller15,4% mehr Downloadshttps://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
  6. 6. http://googlewebmastercentral.blogspot.de/2010/04/using-site-speed-in-web-search-ranking.htmlSEO
  7. 7. http://www.nccgroup.com/en/blog/2013/06/will-faster-user-bandwidth-fix-your-site-performance-woes/DSL (1.5Mbps) > Cable (5Mbps)333% mehr BandbreitePerformance-Gewinn12%
  8. 8. http://www.telekom.com/medien/produkte-fuer-privatkunden/184370
  9. 9. http://www.flickr.com/photos/patrik_karlsson/6851386144/
  10. 10. http://www.flickr.com/photos/usnavy/6083504722/
  11. 11. Last-Tests• Apache Bench• Siege• jMeter• WebLoadUI
  12. 12. Skalierbarkeitvs.Performance
  13. 13. Content Delivery Network(CDN)
  14. 14. https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.htmlhttp://caniuse.com/nav-timingW3C Navigation Timing
  15. 15. http://kaaes.github.io/timing/
  16. 16. https://www.webpagetest.org/result/130610_D0_PDZ/
  17. 17. https://www.webpagetest.org/result/130610_D0_PDZ/
  18. 18. http://www.webpagetest.org/result/130607_YF_TAK/
  19. 19. http://yslow.org/
  20. 20. http://mobitest.akamai.com/m/results.cgi?testid=130413_GA_T
  21. 21. http://httparchive.org/trends.php
  22. 22. http://www.flickr.com/photos/dominicspics/5829559819/
  23. 23. Bilder optimieren• ImageOptim (Mac)• Trimage (Linux)• kraken.io / smush.it (Web)• Google Pagespeed (Chrome / Firefox)• Kommadozeile:• jpegtran, jpegoptim, jpegrescan, optipng,pngcrush, advpng, pngquant, gifsicle
  24. 24. Jpegtran783K -copy all750K -copy none742K -copy none -optimize740K -copy all -optimize -progressive708K -copy none -optimize -progressive853K graffiti.jpghttps://bitbucket.org/walterebert/image-conversion-comparisonImageMagick5.6M graffiti.png774K -quality 85661K -quality 75368K -quality 50288K graffiti.webp95K -resize 600x337
  25. 25. http://adaptive-images.com/ https://github.com/davemcdermid/AdaptiveImages
  26. 26. http://responsiveimages.org/
  27. 27. https://github.com/scottjehl/picturefill
  28. 28. CSS Sprites.flag {display: inline-block;width: 16px;height: 11px;overflow: hidden;background: transparent url(flags.png) scroll -1px -1px no-repeat;}.europeanunion{background-position: -1px -1px;}.AUD{background-position: -1px -287px;}.BRL{background-position: -1px -40px;}.BGN{background-position: -1px -27px;}.CAD{background-position: -1px -52px;}
  29. 29. DATA URIsKommando$ base64 -w 0 fb.png > fb.png.txt$ php -r "echo base64_encode(file_get_contents(fb.png));" > fb.png.txtCSSa.facebook {background-image: url(data:image/png;base64,iVBORw…g==);}< Internet Explorer 8HTML<link rel="stylesheet" type="text/css" href="style.css" /><!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="lt-ie-8.css" /><![endif]-->CSSa.facebook {background-image: url(fb.png);}http://www.invifire.net/2013/01/17/data-uris-explained/
  30. 30. https://github.com/nzakas/cssembed
  31. 31. http://www.spritebaker.com/
  32. 32. DATA URIs<img src=data:image/png;base64,iVBORw…g== alt=>
  33. 33. https://github.com/filamentgroup/grunticon http://www.grumpicon.com/
  34. 34. http://icomoon.io/
  35. 35. Abmessungen festlegen<img src="logo.png"width="182"height="60"alt="Logo" />
  36. 36. http://www.flickr.com/photos/soulsystem2010/4502340253/
  37. 37. ServerkonfigurationGZIPText (HTML, CSS, JS, JSON, XML, SVG, ...)Expires headerBrowser cacheKeep aliveTCP/IP-Verbindung
  38. 38. https://github.com/h5bp/server-configs
  39. 39. Kombiniere CSS / Javascript<link rel="stylesheet" type="text/css" href="style.css" /><link rel="stylesheet" type="text/css" href="forms.css" /><link rel="stylesheet" type="text/css" href="layer.css" /><link rel="stylesheet" type="text/css" href="jcarousel.css" /><link rel="stylesheet" type="text/css" href="lightbox.css" />Wird<link rel="stylesheet" type="text/css" href="combined.css?v=20130625" />Oder<link rel="stylesheet" type="text/css" href="combined-20130625.css" />
  40. 40. Minifiziere CSS / Javascript• Yahoo! YUI Compressor (Java)• Google Closure Compiler (Java)• Uglify.js (Node.js)• Microsoft Ajax Minifier (Windows)
  41. 41. https://github.com/h5bp/ant-build-script https://github.com/h5bp/node-build-script
  42. 42. https://developers.google.com/speed/pagespeed/modhttp://www.youtube.com/watch?v=uR5urTx8S4E
  43. 43. http://www.webpagetest.org/result/130616_3E_A0H/1/details/SSL
  44. 44. HTTP(S)<script src="//connect.facebook.net/de_DE/all.js"></script>
  45. 45. Javascript am EndeAlso:</div><script src=scripts.js></script></body></html>Anstatt:<head><script src=scripts.js></script></head><body>Alternativ:<script src=scripts.js defer></script>http://walterebert.com/playground/wpo/js-footer/
  46. 46. http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1
  47. 47. http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1
  48. 48. Nicht-blockierend ladenAus:<script src=//connect.facebook.net/de_DE/all.js></script>Wird:<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/de_DE/all.js";fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));</script>Oder:<script src=//connect.facebook.net/de_DE/all.js async></script>
  49. 49. WebfontsAus:<link rel=stylesheet id=fontdeck-csshref=http://f.fontdeck.com/s/css/qjAxanDb3GzL8rviVV7PWUySExw/*.smashingmagazine.com/12777.css?ver=1363158490 type=text/css media=screen, print />Wird:<script>WebFontConfig ={fontdeck: {id: 12777}};(function() {var wf = document.createElement(script);wf.src = (https: == document.location.protocol ? https : http) +://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js;wf.type = text/javascript;wf.async = true;var s = document.getElementsByTagName(script)[0];s.parentNode.insertBefore(wf, s);})();</script>https://developers.google.com/webfonts/docs/webfont_loader
  50. 50. Vergleichhttp://www.webpagetest.org/video/compare.php?tests=130208_6K_PNS,130208_CZ_PNT
  51. 51. Redirects<?phpheader(Location: /de/startseite);
  52. 52. Clientseitigvs.Serverseitighttp://www.brucelawson.co.uk/2013/the-amazing-all-new-performant-holy-grail-app-development-method/http://www.netmagazine.com/news/twitter-hashbang-walloped-121992
  53. 53. Prefetching<link rel="dns-prefetch" href="//ajax.googleapis.com"><link rel="prefetch" href="http://tastywhe.at/yes/"><link rel="prerender" href="http://tastywhe.at/no/">
  54. 54. <input type="email" required>http://walterebert.com/playground/html5/input-types/Form Input Types
  55. 55. Touch
  56. 56. Video Media Queries<video controls><source src="small.mp4" type="video/mp4"media="all and (max-width:480px)"><source src="small.webm" type="video/webm"media="all and (max-width:480px)"><source src="big.mp4" type="video/mp4"><source src="big.webm" type="video/webm"></video>Könnte aus der HTML5 Spezifikation entfernt werden!
  57. 57. MP4 Support<script>function supports_mp4() {return !!document.createElement(video).canPlayType(video/mp4;codecs="avc1.42E01E").replace(/^no$/,);}function supports_flash() {var hasFlash = false;try {var fo = new ActiveXObject(ShockwaveFlash.ShockwaveFlash);if(fo) hasFlash = true;}catch(e){var fm = navigator.mimeTypes["application/x-shockwave-flash"];if( fm && fm.enabledPlugin ) hasFlash = true;}return hasFlash;}</script>http://walterebert.com/playground/video/mp4/
  58. 58. MP4 moov atomffmpeg -i alt.mp4 -c:v copy -c:a copy -movflags faststart neu.mp4http://ffmpeg.org/http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
  59. 59. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  60. 60. http://wurfl.sourceforge.net/
  61. 61. Responsive Design + Server Side Components(RESS)http://www.lukew.com/ff/entry.asp?1392
  62. 62. http://de.slideshare.net/buddybrewer/tying-web-performance-data-to-human-behavior
  63. 63. Fazit• Weniger Requests• Kleinere Datenmengen• Parallele Downloads• Optische Täuschung
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×