Web Performance Optimierung - DWX13
0 likes7,948 views
The document discusses various techniques for optimizing web performance, including: - Minifying assets like CSS, JavaScript, and images to reduce file sizes - Leveraging caching, compression, and browser parallelization to speed up page loads - Implementing responsive design patterns and techniques like image sprites and media queries - Optimizing assets further with techniques like image optimization, lazy loading, and prefetching
![DATA URIs
Kommando
$ base64 -w 0 fb.png > fb.png.txt
$ php -r "echo base64_encode(file_get_contents('fb.png'));" > fb.png.txt
CSS
a.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]-->
CSS
a.facebook {background-image: url('fb.png');}
http://www.invifire.net/2013/01/17/data-uris-explained/](https://image.slidesharecdn.com/web-performance-optimierung-developer-week-2013-130625082350-phpapp02/85/Web-Performance-Optimierung-DWX13-33-320.jpg)
![Nicht-blockierend laden
Aus:
<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>](https://image.slidesharecdn.com/web-performance-optimierung-developer-week-2013-130625082350-phpapp02/85/Web-Performance-Optimierung-DWX13-54-320.jpg)
![Webfonts
Aus:
<link rel='stylesheet' id='fontdeck-css'
href='http://f.fontdeck.com/s/css/qjAxanDb3GzL8rviVV7PWUySExw/*.smashingmagazine.c
om/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](https://image.slidesharecdn.com/web-performance-optimierung-developer-week-2013-130625082350-phpapp02/85/Web-Performance-Optimierung-DWX13-55-320.jpg)
![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/](https://image.slidesharecdn.com/web-performance-optimierung-developer-week-2013-130625082350-phpapp02/85/Web-Performance-Optimierung-DWX13-64-320.jpg)
Web Performance Optimierung - DWX13
- 4. 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
- 5. Amazon 100 Millisekunden schneller 1% mehr Umsatz http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/amazon-100ms-faster-1-revenue-increase/
- 6. 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/
- 8. 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-Gewinn 12%
- 13. Last-Tests • Apache Bench • Siege • jMeter • WebLoadUI
- 27. Bilder optimieren • ImageOptim (Mac) • Trimage (Linux) • kraken.io / smush.it (Web) • Google Pagespeed (Chrome / Firefox) • Kommadozeile: • jpegtran, jpegoptim, jpegrescan, optipng, pngcrush, advpng, pngquant, gifsicle
- 28. 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 ImageMagick 5.6M graffiti.png 774K -quality 85 661K -quality 75 368K -quality 50 288K graffiti.webp 95K -resize 600x337
- 32. 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;}
- 33. DATA URIs Kommando $ base64 -w 0 fb.png > fb.png.txt $ php -r "echo base64_encode(file_get_contents('fb.png'));" > fb.png.txt CSS a.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]--> CSS a.facebook {background-image: url('fb.png');} http://www.invifire.net/2013/01/17/data-uris-explained/
- 39. https://github.com/filamentgroup/grunticon http://www.grumpicon.com/
- 43. Serverkonfiguration GZIP Text (HTML, CSS, JS, JSON, XML, SVG, ...) Expires header Browser cache Keep alive TCP/IP-Verbindung
- 45. 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" />
- 46. Minifiziere CSS / Javascript • Yahoo! YUI Compressor (Java) • Google Closure Compiler (Java) • Uglify.js (Node.js) • Microsoft Ajax Minifier (Windows)
- 51. Javascript am Ende Also: </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/
- 54. Nicht-blockierend laden Aus: <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>
- 55. Webfonts Aus: <link rel='stylesheet' id='fontdeck-css' href='http://f.fontdeck.com/s/css/qjAxanDb3GzL8rviVV7PWUySExw/*.smashingmagazine.c om/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
- 60. 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/">
- 61. <input type="email" required> http://walterebert.com/playground/html5/input-types/ Form Input Types
- 62. Touch
- 63. 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!
- 64. 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/
- 65. 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
- 68. Responsive Design + Server Side Components (RESS) http://www.lukew.com/ff/entry.asp?1392
- 69. http://de.slideshare.net/buddybrewer/tying-web-performance-data-to-human-behavior
- 70. Fazit • Weniger Requests • Kleinere Datenmengen • Parallele Downloads • Optische Täuschung