Web Performance Optimierung - DWX13

  • 6,522 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
6,522
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
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