web performance optimization (wpo)
DESCRIPTION
A presentation from SEO Campixx Barcamp 2011 in Berlin. Web Performance Optimization is about making websites faster. Here i discussed different measures and show the impact on competitive advantage and possibly rankings on Google. Undeniably you can say that better performance leads to more sales and better usability in terms of bouncing rates. View image slides here: http://b0i.de/wpopresentationTRANSCRIPT
![Page 1: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/1.jpg)
Website Performance OptimizationMariusz Kaczmarek
![Page 2: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/2.jpg)
2
“If it is fast and ugly, they will use it and curse you;
if it is slow, they will not use it.”
David Cheriton
Source: http://blogs.msdn.com/b/edglas/archive/2009/01/02/make-your-performance-work-count-the-20-rule.aspxhttps://secure.wikimedia.org/wikipedia/en/wiki/David_Cheriton
![Page 3: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/3.jpg)
3
SEO
Onp
age User EXperience
Conv
ersi
on R
ate
Opti
miza
tion
Web Performance Optimization [WPO]
Frontend Backend
Categorization
![Page 4: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/4.jpg)
4
Optimize performance? More sales Less bandwidth & server peaks Customer satisfaction Might influence rankings
Competitive advantage
Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
![Page 5: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/5.jpg)
5
“…optimize front-end performance first, that's where 80% or more of the
end-user response time is spent”
Prof. Steve Souders
Source: http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/http://www.flickr.com/photos/seanosh/2782339349/
![Page 6: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/6.jpg)
6
Effective measures?Website performance optimization should be aligned with
the service / website / target audience you work with.
Focus areas could be: Image optimization & compression JS performance (asynchronous, cached) Reduction of DOM elements Teaching customers and employees!
![Page 7: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/7.jpg)
7
Combined Scripts
Server-sided combination Avoid @import for
combining JS tool: HEADjs http://headjs.com/
![Page 8: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/8.jpg)
8
CSS Performance
Reuse of round corners and shadow classes font-faces instead of
pictures CSS-SpritesUniversal > tags > classes >
IDs
Source: http://www.alsacreations.com/xmedia/doc/full/sprites-big-sites.pnghttps://developer.mozilla.org/en/Writing_Efficient_CSS
![Page 9: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/9.jpg)
9
Postponed Loading
Use of GET with AJAXGoogle Instant takes snapshots 5-
10s after onLoad event? http://b0i.de/seomofo
Tools: ContolJS http://stevesouders.com/controljs/ImageLoader
http://developer.yahoo.com/yui/imageloader/Lazy Load http://plugins.jquery.com/project/lazyload/
Source: http://developer.yahoo.com/performance/rules.html
![Page 10: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/10.jpg)
10
request HTML sent onload
Site loaded
Google Instant Snapshot
5-10s
User interaction, XHRs
Event handlers, components,
XHRs
request
backend components
Modified image from High Performance Web Pages | Stoyan Stefanov | Yahoo! Exceptional Performance | PHP Quebec, March 13, 2008Source: http://b0i.de/seomofo
![Page 11: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/11.jpg)
11
DNS Lookups & Redirections
Avoid 301 redirections (e.g. in HTML)http://www.bonoseo.com/ != http://www.bonoseo.com
usage of not more than 2-5 different domains on average
better: domain-aliases for parallel downloadshttp://images.bonoseo.com || http://www.bonoseo.com
cookieless domains for static content
Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 12: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/12.jpg)
12
Content Delivery Network
Geographical distributionMinimizes DNS-LookupsOptimized caching und
uptime (by dynamic DNS resolving)
Source: http://www.flickr.com/photos/andybeatty/5247263940/
![Page 13: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/13.jpg)
13
Image CompressionUse Smush.itProgressive JPEG
baseline
progressive
Source: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/
![Page 14: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/14.jpg)
14
Vector Graphics
Canvas Elemente with HTML5Ai->Canvas http://visitmix.com/labs/ai2canvas/
Progressive JPEG 13,3 kB -> HTML5 2,38 kB
Saved: 82%
![Page 15: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/15.jpg)
15
Shape the DOM Tree<h1><em>Heading</em></h1> - use CSS‘s italics instead Tool: DOM-Monster http://mir.aculo.us/dom-monster/
Avoid iFrames
![Page 16: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/16.jpg)
16
Chunking
flush function
Source: http://www.phpied.com/progressive-rendering-via-multiple-flushes/http://stevesouders.com/docs/velocity-20090622.ppt
![Page 17: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/17.jpg)
17
Performance Test ToolsLoads.in www.loads.in
Slow Cop www.slowcop.com
Show Slow www.showslow.com
Webpagetest www.webpagetest.org
Browser basedSpeedtracer
http://b0i.de/speedtracer
Yslow FireBug http://b0i.de/yslowMore tools: http://code.google.com/speed/tools.html
![Page 18: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/18.jpg)
18
Competition Analysis
Possible performance profiles (by Souders & students) http://b0i.de/profile
Simple linear regression analysis Wolfram Alpha: linear fit {1, 87},{2, 77},{3, 95},{4, 68} http://b0i.de/wolfreg
![Page 19: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/19.jpg)
19
Pareto Rule 80/20
Optimization needs time!
Lessons learned: Concentrate on biggest chunks
150 60 230 45
2. 3. 1. 4.Optimization order
Load time in ms
Source: JavaScript: The Good Parts - Part Six: Ajax Performance | Douglas Crockford
![Page 20: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/20.jpg)
20
Questions? Discuss!
Let’s be friends Twitter: BONOSEO
Facebook: kaczmarek.mariusz
Ssssshh… Souder Slides from Stanford: http://b0i.de/souderslides
![Page 21: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/21.jpg)
21
Statistics 2010Average website size: 320 kBCompression is possible for 2/3 of overall data80% of content is loaded from one host
Source: Statistic numbers from 4.2 billion sites http://code.google.com/speed/articles/web-metrics.html
ADDITIONAL
![Page 22: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/22.jpg)
22
Inline ImagesBase 64 encodingGreat for small static images
Works until IE7 Browser switch!
ADDITIONAL
Source: http://9gag.com/gag/76585
![Page 23: Web performance optimization (WPO)](https://reader035.vdocument.in/reader035/viewer/2022081515/554f0088b4c90577698b4e49/html5/thumbnails/23.jpg)
23
JavaScript PerformanceTools: http://dean.edwards.name/packer/http://developer.yahoo.com/yui/compressor/
DRY and OO approach
Source: Besser PHP Programmieren – Professionelle PHP-Techniken | Carsten Möhrke
ADDITIONAL
Seconds per 10 million operations