Web performance optimization (WPO)
-
Upload
mariusz -
Category
Technology
-
view
13.202 -
download
2
description
Transcript of Web performance optimization (WPO)
Website Performance OptimizationMariusz Kaczmarek
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
3
SEO
Onp
age User EXperience
Conv
ersi
on R
ate
Opti
miza
tion
Web Performance Optimization [WPO]
Frontend Backend
Categorization
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
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/
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!
7
Combined Scripts
Server-sided combination Avoid @import for
combining JS tool: HEADjs http://headjs.com/
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
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
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
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/
12
Content Delivery Network
Geographical distributionMinimizes DNS-LookupsOptimized caching und
uptime (by dynamic DNS resolving)
Source: http://www.flickr.com/photos/andybeatty/5247263940/
13
Image CompressionUse Smush.itProgressive JPEG
baseline
progressive
Source: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/
14
Vector Graphics
Canvas Elemente with HTML5Ai->Canvas http://visitmix.com/labs/ai2canvas/
Progressive JPEG 13,3 kB -> HTML5 2,38 kB
Saved: 82%
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
16
Chunking
flush function
Source: http://www.phpied.com/progressive-rendering-via-multiple-flushes/http://stevesouders.com/docs/velocity-20090622.ppt
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
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
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
20
Questions? Discuss!
Let’s be friends Twitter: BONOSEO
Facebook: kaczmarek.mariusz
Ssssshh… Souder Slides from Stanford: http://b0i.de/souderslides
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
22
Inline ImagesBase 64 encodingGreat for small static images
Works until IE7 Browser switch!
ADDITIONAL
Source: http://9gag.com/gag/76585
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