71
Web Performance Optimierung Walter Ebert

Web Performance Optimierung - DWX13

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Web Performance Optimierung - DWX13

Web Performance Optimierung

Walter Ebert

Page 2: Web Performance Optimierung - DWX13

Walter Ebert

@wltrdwalterebert.de

Page 3: Web Performance Optimierung - DWX13

http://www.webpagetest.org/result/121212_RW_ED4/

Page 4: Web Performance Optimierung - DWX13

http://www.akamai.com/html/about/press/releases/2010/press_061410.html

57% der Online-Käufer

warten 3 Sekunden oder weniger

bevor sie eine Webseite verlassen

Page 5: Web Performance Optimierung - DWX13

Amazon

100 Millisekunden schneller

1% mehr Umsatz

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/amazon-100ms-faster-1-revenue-increase/

Page 6: Web Performance Optimierung - DWX13

Mozilla

2,2 Sekunden schneller

15,4% mehr Downloads

https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/

Page 7: Web Performance Optimierung - DWX13

http://googlewebmastercentral.blogspot.de/2010/04/using-site-speed-in-web-search-ranking.html

SEO

Page 8: Web Performance Optimierung - DWX13

http://www.nccgroup.com/en/blog/2013/06/will-faster-user-bandwidth-fix-your-site-performance-woes/

DSL (1.5Mbps) > Cable (5Mbps)333% mehr Bandbreite

Performance-Gewinn12%

Page 9: Web Performance Optimierung - DWX13

http://commons.wikimedia.org/wiki/File:MobileBitRate-logScale.svg

Page 10: Web Performance Optimierung - DWX13

http://www.telekom.com/medien/produkte-fuer-privatkunden/184370

Page 11: Web Performance Optimierung - DWX13

http://www.flickr.com/photos/patrik_karlsson/6851386144/

Page 12: Web Performance Optimierung - DWX13

http://www.flickr.com/photos/usnavy/6083504722/

Page 14: Web Performance Optimierung - DWX13

Skalierbarkeitvs.

Performance

Page 15: Web Performance Optimierung - DWX13

Content Delivery Network(CDN)

Page 16: Web Performance Optimierung - DWX13

https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.htmlhttp://caniuse.com/nav-timing

W3C Navigation Timing

Page 17: Web Performance Optimierung - DWX13

http://kaaes.github.io/timing/

Page 18: Web Performance Optimierung - DWX13

https://www.webpagetest.org/result/130610_D0_PDZ/

Page 19: Web Performance Optimierung - DWX13

https://www.webpagetest.org/result/130610_D0_PDZ/

Page 20: Web Performance Optimierung - DWX13

http://www.webpagetest.org/result/130607_YF_TAK/

Page 21: Web Performance Optimierung - DWX13

http://yslow.org/

Page 22: Web Performance Optimierung - DWX13

https://developers.google.com/speed/pagespeed/insights_extensionshttps://developers.google.com/speed/pagespeed/insights

Page 23: Web Performance Optimierung - DWX13

http://mobitest.akamai.com/m/results.cgi?testid=130413_GA_T

Page 24: Web Performance Optimierung - DWX13

http://httparchive.org/trends.php

Page 25: Web Performance Optimierung - DWX13

http://www.flickr.com/photos/dominicspics/5829559819/

Page 26: Web Performance Optimierung - DWX13

61% Bilder

http://httparchive.org/interesting.php

Page 28: Web Performance Optimierung - DWX13

Jpegtran

783K -copy all

750K -copy none

742K -copy none -optimize

740K -copy all -optimize -progressive

708K -copy none -optimize -progressive

853K graffiti.jpg

https://bitbucket.org/walterebert/image-conversion-comparison

ImageMagick5.6M graffiti.png774K -quality 85661K -quality 75368K -quality 50288K graffiti.webp95K -resize 600x337

Page 29: Web Performance Optimierung - DWX13

http://adaptive-images.com/ https://github.com/davemcdermid/AdaptiveImages

Page 30: Web Performance Optimierung - DWX13

http://responsiveimages.org/

Page 31: Web Performance Optimierung - DWX13

https://github.com/scottjehl/picturefill

Page 32: Web Performance Optimierung - DWX13

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;}

Page 33: Web Performance Optimierung - DWX13

DATA URIsKommando$ base64 -w 0 fb.png > fb.png.txt$ php -r "echo base64_encode(file_get_contents('fb.png'));" > fb.png.txt

CSSa.facebook {background-image: url('data:image/png;base64,iVBORw…g==');}

< Internet Explorer 8

HTML<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/

Page 34: Web Performance Optimierung - DWX13

https://github.com/nzakas/cssembed

Page 35: Web Performance Optimierung - DWX13

http://www.spritebaker.com/

Page 36: Web Performance Optimierung - DWX13

DATA URIs

<img src='data:image/png;base64,iVBORw…g==' alt=''>

Page 37: Web Performance Optimierung - DWX13

SVG

https://en.wikipedia.org/wiki/File:Firefox-logo.svg

Page 38: Web Performance Optimierung - DWX13

http://www.codedread.com/scour/

Page 39: Web Performance Optimierung - DWX13

https://github.com/filamentgroup/grunticon http://www.grumpicon.com/

Page 40: Web Performance Optimierung - DWX13

http://icomoon.io/

Page 41: Web Performance Optimierung - DWX13

Abmessungen festlegen

<img src="logo.png"

width="182"

height="60"

alt="Logo" />

Page 42: Web Performance Optimierung - DWX13

http://www.flickr.com/photos/soulsystem2010/4502340253/

Page 43: Web Performance Optimierung - DWX13

ServerkonfigurationGZIPText (HTML, CSS, JS, JSON, XML, SVG, ...)

Expires headerBrowser cache

Keep aliveTCP/IP-Verbindung

Page 44: Web Performance Optimierung - DWX13

https://github.com/h5bp/server-configs

Page 45: Web Performance Optimierung - DWX13

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" />

Page 46: Web Performance Optimierung - DWX13

Minifiziere CSS / Javascript

• Yahoo! YUI Compressor (Java)• Google Closure Compiler (Java)• Uglify.js (Node.js)• Microsoft Ajax Minifier (Windows)

Page 47: Web Performance Optimierung - DWX13

https://github.com/h5bp/ant-build-script https://github.com/h5bp/node-build-script

Page 48: Web Performance Optimierung - DWX13

https://developers.google.com/speed/pagespeed/mod

http://www.youtube.com/watch?v=uR5urTx8S4E

Page 49: Web Performance Optimierung - DWX13

http://www.webpagetest.org/result/130616_3E_A0H/1/details/

SSL

Page 50: Web Performance Optimierung - DWX13

HTTP(S)

<script src="//connect.facebook.net/de_DE/all.js"></script>

Page 51: Web Performance Optimierung - DWX13

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/

Page 52: Web Performance Optimierung - DWX13

http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1

Page 53: Web Performance Optimierung - DWX13

http://www.webpagetest.org/video/view.php?id=130622_547adbeec08ac5728ade73cc274453758a4ef2f8&data=1

Page 54: Web Performance Optimierung - DWX13

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>

Page 55: Web Performance Optimierung - DWX13

WebfontsAus:<link rel='stylesheet' id='fontdeck-css'

href='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

Page 56: Web Performance Optimierung - DWX13

Vergleich

http://www.webpagetest.org/video/compare.php?tests=130208_6K_PNS,130208_CZ_PNT

Page 57: Web Performance Optimierung - DWX13

Redirects

<?php

header('Location: /de/startseite');

Page 58: Web Performance Optimierung - DWX13

Clientseitigvs.

Serverseitig

http://www.brucelawson.co.uk/2013/the-amazing-all-new-performant-holy-grail-app-development-method/http://www.netmagazine.com/news/twitter-hashbang-walloped-121992

Page 59: Web Performance Optimierung - DWX13

HTML5

http://www.w3.org/html/logo/

Page 60: Web Performance Optimierung - DWX13

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/">

Page 61: Web Performance Optimierung - DWX13

<input type="email" required>

http://walterebert.com/playground/html5/input-types/

Form Input Types

Page 62: Web Performance Optimierung - DWX13

Touch

Page 63: Web Performance Optimierung - DWX13

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!

Page 64: Web Performance Optimierung - DWX13

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/

Page 65: Web Performance Optimierung - DWX13

MP4 moov atom

ffmpeg -i alt.mp4 -c:v copy -c:a copy -movflags faststart neu.mp4

http://ffmpeg.org/http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html

Page 66: Web Performance Optimierung - DWX13

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Page 67: Web Performance Optimierung - DWX13

http://wurfl.sourceforge.net/

Page 68: Web Performance Optimierung - DWX13

Responsive Design + Server Side Components(RESS)

http://www.lukew.com/ff/entry.asp?1392

Page 69: Web Performance Optimierung - DWX13

http://de.slideshare.net/buddybrewer/tying-web-performance-data-to-human-behavior

Page 70: Web Performance Optimierung - DWX13

Fazit• Weniger Requests• Kleinere Datenmengen• Parallele Downloads• Optische Täuschung

Page 71: Web Performance Optimierung - DWX13

Walter Ebert

@wltrdwalterebert.de

slideshare.net/walterebert