High Performance Websites
Prezi on High Performance Websites and Performance Optimization by Tobias Baldauf
»
High Performance Websites Tobias Baldauf Web-Developer seit 1999 Performance-Optimization seit 2009 tobias-baldauf.de kontakt@tobias-baldauf.de twitter.com/tbaldauf + 100ms = - 1% Sales + 400ms = - 9% FullPageLoad + 500ms = - 20% Queries - 3500ms = + 12% Sales Performance-Optimization = - 50% Outbound Traffic Performance-Optimization = + 10.000.000 Downloads HTML JS CSS XML 0.5t FullPageLoad Event Website ca. 60 HTTP-Requests 256 Minify EXPIRE HEADER STATIC image23.png?v=42 Cache 2/6 2/6 4 6 8 HTTP-Object Browser-Limits HTTP-Requests Load Sharing Domains / Servers - Static Content, HTTP 1.0 - Images, HTTP 1.0 - AJAX, HTTP 1.1 think BIG CDN Google AJAX Libraries API ! E T A G S ! HTML Grid-Patterns KISS, !table hot hot hot hot <!DOCTYPE html> HTML5 + 5% Performance CSS # / . * / > / + / . classes. ftw. OOCSS @import Javascript "defer" / JS eval() string img PunyPNG, YSlow moddims optiPNG via cron CSS-Sprites Repaints / Reflows wikipedia.jp google.jp Repaint: Visibility-Check !inline-JS Animations: position:fixed / absolute !tables outline, visibility, background-color Reflow: Position-Check display, padding, margin, font, position, top, left, etc. https /server/folder/css/styles.css 1.4 id & class vs. advanced selectors 3rd Party Content !document.write !iFrames ? ! Steve Souders http://stevesouders.com/ http://twitter.com/souders Stoyan Stefanov http://www.phpied.com/ http://twitter.com/stoyanstefanov Nicole Sullivan http://www.stubbornella.org/ http://twitter.com/stubbornella Browserscope, P3PC, SpriteMe etc. High Performance Javascript etc. CSS-Performance, Repaints & Reflows etc. YSlow http://developer.yahoo.com/yslow/ webpagetest.org http://pagetest.sourceforge.net/ http://blog.patrickmeenan.com/ Tobias Baldauf http://www.tobias-baldauf.de http://twitter.com/tbaldauf http://developer.yahoo.com/performance/rules.html, http://t3n.de/magazin/praxistipps-steigerung-website-performance-224077/ DANKE!