Web performance optimization (WPO)
23
Website Performance Optimization Mariusz Kaczmarek
-
Upload
mariusz -
Category
Technology
-
view
13.223 -
download
2
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/wpopresentation
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
