Your SlideShare is downloading. ×
Web Performance Optimierung - DWX13
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web Performance Optimierung - DWX13

6,804
views

Published on

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

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,804
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web PerformanceOptimierungWalter Ebert
  • 2. http://www.webpagetest.org/result/121212_RW_ED4/
  • 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. Amazon100 Millisekunden schneller1% mehr Umsatzhttp://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/amazon-100ms-faster-1-revenue-increase/
  • 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. http://googlewebmastercentral.blogspot.de/2010/04/using-site-speed-in-web-search-ranking.htmlSEO
  • 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. http://www.telekom.com/medien/produkte-fuer-privatkunden/184370
  • 9. http://www.flickr.com/photos/patrik_karlsson/6851386144/
  • 10. http://www.flickr.com/photos/usnavy/6083504722/
  • 11. Last-Tests• Apache Bench• Siege• jMeter• WebLoadUI
  • 12. Skalierbarkeitvs.Performance
  • 13. Content Delivery Network(CDN)
  • 14. https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.htmlhttp://caniuse.com/nav-timingW3C Navigation Timing
  • 15. http://kaaes.github.io/timing/
  • 16. https://www.webpagetest.org/result/130610_D0_PDZ/
  • 17. https://www.webpagetest.org/result/130610_D0_PDZ/
  • 18. http://www.webpagetest.org/result/130607_YF_TAK/
  • 19. http://yslow.org/
  • 20. http://mobitest.akamai.com/m/results.cgi?testid=130413_GA_T
  • 21. http://httparchive.org/trends.php
  • 22. http://www.flickr.com/photos/dominicspics/5829559819/
  • 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. 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. http://adaptive-images.com/ https://github.com/davemcdermid/AdaptiveImages
  • 26. http://responsiveimages.org/
  • 27. https://github.com/scottjehl/picturefill
  • 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. 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. https://github.com/nzakas/cssembed
  • 31. http://www.spritebaker.com/
  • 32. DATA URIs<img src=data:image/png;base64,iVBORw…g== alt=>
  • 33. https://github.com/filamentgroup/grunticon http://www.grumpicon.com/
  • 34. http://icomoon.io/
  • 35. Abmessungen festlegen<img src="logo.png"width="182"height="60"alt="Logo" />
  • 36. http://www.flickr.com/photos/soulsystem2010/4502340253/
  • 37. ServerkonfigurationGZIPText (HTML, CSS, JS, JSON, XML, SVG, ...)Expires headerBrowser cacheKeep aliveTCP/IP-Verbindung
  • 38. https://github.com/h5bp/server-configs
  • 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. Minifiziere CSS / Javascript• Yahoo! YUI Compressor (Java)• Google Closure Compiler (Java)• Uglify.js (Node.js)• Microsoft Ajax Minifier (Windows)
  • 41. https://github.com/h5bp/ant-build-script https://github.com/h5bp/node-build-script
  • 42. https://developers.google.com/speed/pagespeed/modhttp://www.youtube.com/watch?v=uR5urTx8S4E
  • 43. http://www.webpagetest.org/result/130616_3E_A0H/1/details/SSL
  • 44. HTTP(S)<script src="//connect.facebook.net/de_DE/all.js"></script>
  • 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. http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1
  • 47. http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1
  • 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. 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. Vergleichhttp://www.webpagetest.org/video/compare.php?tests=130208_6K_PNS,130208_CZ_PNT
  • 51. Redirects<?phpheader(Location: /de/startseite);
  • 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. 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. <input type="email" required>http://walterebert.com/playground/html5/input-types/Form Input Types
  • 55. Touch
  • 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. 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. 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. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 60. http://wurfl.sourceforge.net/
  • 61. Responsive Design + Server Side Components(RESS)http://www.lukew.com/ff/entry.asp?1392
  • 62. http://de.slideshare.net/buddybrewer/tying-web-performance-data-to-human-behavior
  • 63. Fazit• Weniger Requests• Kleinere Datenmengen• Parallele Downloads• Optische Täuschung