Your SlideShare is downloading. ×
0
Web-Performance               Walter Ebert            Drupal Meetup      Frankfurt/Rhein-Main              14. März 2013
Backend-PerformanceLast-Tests• Apache Bench• Siege• JMeter
Server-OutputOutput Cache• Boost-Modul• VarnishBessere Hardware• Schnellere CPU / Mehr Kerne• Schnelleres / mehr RAM• Schn...
AnwendungPHP-Opcode-Cache• APC• XCache• Zend Optimizer (standard in PHP5.5)Datenbank           my.cnf:• Query-Cache       ...
http://www.webpagetest.org/result/120806_9M_N15/
http://www.webpagetest.org/result/130312_ZJ_1BAA/
http://gtmetrix.com/reports/www.deutschland.de/nW3wR8kD
https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.berliner.de_2F&mobile=false
http://yslow.org/
http://sitespeed.io/
Safari Web Inspector                           Internet Explorer                           Developer ToolsFirefox Firebug ...
Komprimiere Output<IfModule mod_deflate.c>  <IfModule mod_setenvif.c>    <IfModule mod_headers.c>      SetEnvIfNoCase ^(Ac...
Browser Cache<IfModule mod_expires.c>  ExpiresActive on  ExpiresDefault "access plus 1 month"  ExpiresByType text/html "ac...
https://github.com/h5bp/server-configs
App Cacheoffline.appcacheCACHE MANIFEST# v1assets/6/script/mainmin.jsassets/6/style/mainmin.cssassets/6/style/fonts/pro.tt...
Kombiniere CSS / Javascript<link   rel="stylesheet"   type="text/css"   href="style.css" /><link   rel="stylesheet"   type...
Minifiziere CSS / JavascriptTools• Yahoo! YUI Compressor (Java)• Google Closure Compiler (Java)• Uglify.js (Node)• Microso...
Optimiere BilderTools• ImageOptim (Mac)• Trimage (Linux)• RIOT (Windows)• Kommadozeile:  • jpegtran, jpegoptim, optipng, p...
https://github.com/h5bp/ant-build-script
https://developers.google.com/speed/pagespeed/mod
CSS Sprites .flag {   display: inline-block;   width: 16px;   height: 11px;   overflow: hidden;   background: transparent ...
DATA URIsKommando$ base64 -w 0 fb.png > fb.png.txt$ php -r "echo base64_encode(file_get_contents(fb.png));" > fb.png.txtCS...
DATA URIsHTML<img src=data:image/png;base64,iVBORw…g== alt= />
http://adaptive-images.com/
Javascript am EndeAlso:</div><script src=scripts.js></script></body></html>Anstatt:<head><script src=scripts.js></script><...
Drittanbieter               >Single Point of Failure (SPOF)
Parallele bzw. nicht-blockierendeDownloadsAus:<script src=//connect.facebook.net/de_DE/all.js></script>Wird:<script>(funct...
WebfontsAus:<link rel=stylesheet id=fontdeck-css  href=http://f.fontdeck.com/s/css/qjAxanDb3GzL8rviVV7PWUySExw/*.smashingm...
Vergleichhttp://www.webpagetest.org/video/compare.php?tests=130208_6K_PNS,130208_CZ_PNT
Abmessungen festlegen<img src="Header_Logo.png"     width="182"     height="60"     alt="Logo" />
MP4 moov atom qt-faststart input.mp4 output.mp4 Oder: ffmpeg -i input.mp4 -c:a copy -c:v copy   -movflags faststart output...
Mehr Infoshttp://stevesouders.com/hpws/rules.phphttp://browserdiet.com/http://www.bookofspeed.com/http://calendar.perfplan...
Fazit• Caching auf mehreren Ebenen• Weniger Requests• Kleinere Datenmengen• Parallele Downloads• Optische Täuschung
Walter Ebert          @wltrd      walterebert.deslideshare.net/walterebert  drupal.org/user/699574
Upcoming SlideShare
Loading in...5
×

Web-Performance

591

Published on

Drupal Meetup Frankfurt 14.03.2013

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Web-Performance"

  1. 1. Web-Performance Walter Ebert Drupal Meetup Frankfurt/Rhein-Main 14. März 2013
  2. 2. Backend-PerformanceLast-Tests• Apache Bench• Siege• JMeter
  3. 3. Server-OutputOutput Cache• Boost-Modul• VarnishBessere Hardware• Schnellere CPU / Mehr Kerne• Schnelleres / mehr RAM• Schnellere Festplatten, z.B. SSD
  4. 4. AnwendungPHP-Opcode-Cache• APC• XCache• Zend Optimizer (standard in PHP5.5)Datenbank my.cnf:• Query-Cache query_cache_type = 1 query_cache_size = 26214400PHP-Profiling• XDebug• XHProf
  5. 5. http://www.webpagetest.org/result/120806_9M_N15/
  6. 6. http://www.webpagetest.org/result/130312_ZJ_1BAA/
  7. 7. http://gtmetrix.com/reports/www.deutschland.de/nW3wR8kD
  8. 8. https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.berliner.de_2F&mobile=false
  9. 9. http://yslow.org/
  10. 10. http://sitespeed.io/
  11. 11. Safari Web Inspector Internet Explorer Developer ToolsFirefox Firebug Chrome Developer Tools Opera Dragonfly
  12. 12. Komprimiere Output<IfModule mod_deflate.c> <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept- Encoding </IfModule> </IfModule> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml application/javascript ... text/css text/html text/plain text/x-component text/xml </IfModule></IfModule> https://github.com/h5bp/server-configs/blob/master/apache/.htaccess
  13. 13. Browser Cache<IfModule mod_expires.c>  ExpiresActive on  ExpiresDefault "access plus 1 month"  ExpiresByType text/html "access plus 0 seconds"  ExpiresByType text/xml "access plus 0 seconds" . . .  ExpiresByType application/rss+xml "access plus 1 hour"  ExpiresByType image/gif "access plus 1 month" . . .  ExpiresByType text/css "access plus 1 week"  ExpiresByType application/javascript "access plus 1 week"</IfModule><IfModule mod_headers.c> Header unset ETag</IfModule>FileETag None https://github.com/h5bp/server-configs/blob/master/apache/.htaccess
  14. 14. https://github.com/h5bp/server-configs
  15. 15. App Cacheoffline.appcacheCACHE MANIFEST# v1assets/6/script/mainmin.jsassets/6/style/mainmin.cssassets/6/style/fonts/pro.ttfassets/6/style/imgs/sprites1.pngHTML<html manifest="offline.appcache"> http://www.alistapart.com/articles/application-cache-is-a-douchebag/
  16. 16. 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=20120818" />Oder<link rel="stylesheet" type="text/css" href="combined-20120818.css" />
  17. 17. Minifiziere CSS / JavascriptTools• Yahoo! YUI Compressor (Java)• Google Closure Compiler (Java)• Uglify.js (Node)• Microsoft Ajax Minifier (Windows)• Assetic (PHP + externe Bibliotheken)
  18. 18. Optimiere BilderTools• ImageOptim (Mac)• Trimage (Linux)• RIOT (Windows)• Kommadozeile: • jpegtran, jpegoptim, optipng, pngcrush, advpng, pngquant, gifsicle• kraken.io / smush.it (Web)• Google Pagespeed (Chrome / Firefox)
  19. 19. https://github.com/h5bp/ant-build-script
  20. 20. https://developers.google.com/speed/pagespeed/mod
  21. 21. 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;}
  22. 22. 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(facebook.png);}
  23. 23. DATA URIsHTML<img src=data:image/png;base64,iVBORw…g== alt= />
  24. 24. http://adaptive-images.com/
  25. 25. 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>
  26. 26. Drittanbieter >Single Point of Failure (SPOF)
  27. 27. Parallele bzw. nicht-blockierendeDownloadsAus:<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>
  28. 28. WebfontsAus:<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
  29. 29. Vergleichhttp://www.webpagetest.org/video/compare.php?tests=130208_6K_PNS,130208_CZ_PNT
  30. 30. Abmessungen festlegen<img src="Header_Logo.png" width="182" height="60" alt="Logo" />
  31. 31. MP4 moov atom qt-faststart input.mp4 output.mp4 Oder: ffmpeg -i input.mp4 -c:a copy -c:v copy -movflags faststart output.mp4http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
  32. 32. Mehr Infoshttp://stevesouders.com/hpws/rules.phphttp://browserdiet.com/http://www.bookofspeed.com/http://calendar.perfplanet.com/
  33. 33. Fazit• Caching auf mehreren Ebenen• Weniger Requests• Kleinere Datenmengen• Parallele Downloads• Optische Täuschung
  34. 34. Walter Ebert @wltrd walterebert.deslideshare.net/walterebert drupal.org/user/699574
  1. A particular slide catching your eye?

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

×