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