Practical web performance - Site Confidence Web Performance Seminar

Practical Web performance
Stephen Thair, Seriti Consulting, @TheOpsMgr
stephen.thair@seriticonsulting.com
26/09/2011
© Seriti Consulting
1

Defining “Web Performance”?
Why performance matters (to your business)
The “Rules” of Web Performance
Practical Web Performance (“where to start!”)
Agenda
26/09/2011
(c) Seriti Consulting, 2011
2

My Definition of Web Performance
26/09/2011
3
“The delay perceived by the website visitor between an action (e.g click) and a meaningful response”

Perception
http://velocityconf.com/velocity2010/public/schedule/detail/13019
26/09/2011
4

26/09/2011
5
Just because your DevMgr, QA Mgr, Ops Mgr tells you “performance is good” doesn’t means that it is PERCEIVED that way by your CUSTOMERS…

“Brain wave analysis from the experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods.
http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf
Poor Performance = Web Stress!!!
26/09/2011
6

0.1 secondsgives the feeling of instantaneous response
1 secondkeeps the user's flow of thought seamless.
10 secondskeeps the user's attention
JakobNeilsen. http://www.useit.com/alertbox/response-times.html
So what is “Good Performance”?
26/09/2011
7

10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
“3 Second Rule”
26/09/2011
8

Why Performance Matters
26/09/2011
9

Bounce Rate goes up
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
26/09/2011
10

Page Views goes down
26/09/2011
11

Conversion Rate goes down
26/09/2011
12

“A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions”
Aberdeen Group
http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx
3rd Party Research
26/09/2011
13

Artificial 1s delay = 2.8% reduction in revenue per user
Empirical Testing
26/09/2011
14
http://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays%2C%20Additional%20Bytes%2C%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx

You are losing Visitors
You are losing Sales
You are losing Ad-revenue
You are wasting SEO/SEM/PPC budget
Spending £££ on bandwidth and servers
In Summary…
26/09/2011
15

26/09/2011
16
So how are we doing?

26/09/2011
17
Largest Page…
4,909,588 bytes

26/09/2011
18
Slowest Page…
12.436 secs

26/09/2011
19
Most objects…
227

26/09/2011
20
1 was down for maintenance
1 didn’t re-direct from http to https
~28% had some type of error

26/09/2011
21
So what can you do about it?
Answer = Optimise!

26/09/2011
22
80% “Front End”
20% “Back-end”

Focus on the “front end”
Optimise the interaction between the browser and the data-centre
And how the browser processes the client-side objects
“Front End Engineering”
26/09/2011
23

Yahoo’s Rules
Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small & Cacheable
http://developer.yahoo.com/yslow/help/#guidelines
26/09/2011
24

Google’s Rules
Avoid bad requests
Avoid CSS expressions
Combine external CSS
Combine external JavaScript
Defer loading of JavaScript
Enable compression
Leverage browser caching
Leverage proxy caching
Minify CSS
Minify HTML
Minify JavaScript
Minimize request size
Minimize DNS lookups
Minimize redirects
Optimize images
Optimize the order of styles and scripts
Parallelize downloads across hostnames
Put CSS in the document head
Remove unused CSS
Serve resources from a consistent URL
Serve scaled images
Serve static content from a cookieless domain
Specify a character set early
Specify image dimensions
Use efficient CSS selectors
http://code.google.com/speed/page-speed/docs/rules_intro.html
26/09/2011
25

26/09/2011
26
Informationoverload!

26/09/2011
27
Where should you start?

26/09/2011
28
Which optimisations are most common?
Which optimisations are most important?
And the survey says…

HTTP Archive - Load Time Correlation
26/09/2011
29
http://httparchive.org/interesting.php

HTTP Archive - Render Time Correlation
26/09/2011
30
http://httparchive.org/interesting.php

Lessons learnt from consulting…
26/09/2011
31

26/09/2011
32

5 Important Ones
Reduce Page Size (<500Kb)
Enable (Gzip) Compression
Reduce the number of roundtrips (<40 per page…)
HTTP Cache Headers (cache long & prosper!)
Structure the page (to improve render & download)
CSS First
Javascript last
26/09/2011
33

Even if you apply just those 5 rules…Your page download times will drop by ~50%
Low hanging fruit…
26/09/2011
34

What about the other rules?
Generally you are now measuring gains in milliseconds
26/09/2011
35
But even milliseconds can make a difference…

Optimising JavaScript & async loading
26/09/2011
36
Loading jqueryAsync
Improving JS Execution time
Delayed ad-loading
Faster does not always equal more revenue!!!
http://velocityconf.com/velocity2011/public/schedule/detail/18039

“Reduce the number of DOM elements”
26/09/2011
37
24,000 calls to a selector takes time…

“Use a content delivery network”
26/09/2011
38
You can’t beat the speed of light…
And if your customers are not in the UK, invest in a CDN…

26/09/2011
39
4.5 seconds in London
becomes
12.5 seconds in Singapore

“Use http keep-alives”
26/09/2011
40
Tune your HTTP Keep-Alives!
KeepAliveTimeout Value (sec)
MaxKeepAlive Requests (# requests/connection)
Stop forcing your customers to re-negotiate connections (even partway through a page!)
Even more important for SSL! (~4x slower)

26/09/2011
41
“The Bigger Picture”

26/09/2011
42
WPO is not just for Christmas…

26/09/2011
43
Performance is a
PROCESS
NOT a
PROJECT
http://www.seriticonsulting.com/blog/2011/5/28/web-performance-is-not-just-for-christmashellip.html

26/09/2011
44
Who should you have on your
WPO project
team?
http://www.seriticonsulting.com/blog/2011/5/29/who-should-be-on-your-wpo-team.html

26/09/2011
45
Who should you have on your
WPO Process!
team?
http://www.seriticonsulting.com/blog/2011/5/29/who-should-be-on-your-wpo-team.html

26/09/2011
46
Performance Lead / Evangelist
Front-end Developer
Back-end Developer
Performance QA
Database Administrator
Systems Administrator
Network Administrator
Web Analytics Analyst

26/09/2011
47
Economics of WPO… is automation the answer?
http://www.seriticonsulting.com/blog/2011/8/11/why-i-think-automation-is-the-future-of-webperf.html
Answer: Maybe?

26/09/2011
48
What Else?

26/09/2011
49
“I often say that when you can measure what you are speaking about, and express it in numbers, you know something about it; but when you cannot express it in numbers, your knowledge is of a meagre and unsatisfactory kind; it may be the beginning of knowledge, but you have scarcely, in your thoughts, advanced to the stage of Science, whatever the matter may be.”
-- William Thomson,1st Baron Kelvin

26/09/2011
50
Make sure you can measure your website performance…
(and that the numbers are getting better, not worse!)

Betfair’s customer performance charter
26/09/2011
51
”We aim for 99.9% of bets placed in less than a second and our aspirational website SLA is as follows. Under peak loads, with performance measured at the 95th percentile, for typical user bandwidths and a 0% error rate, our users shall experience Visual Progress (header loaded) in less than 1 second, Time to Interact with useful content within 1.5 seconds and full page loads within 3 seconds. (There is room for improvement on this front as our current sports home page loads in approx. 18 seconds at the 95th percentile). We will publish our aggregate stats here monthly.”
http://www.seriticonsulting.com/blog/2011/7/20/creating-an-performance-sla-with-your-customers-betfairrsquo.html

10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
“3 Second Rule”
26/09/2011
52

JavaScript timing e.g. WebTuna, GA SiteSpeed
Browser plug-in e.g. HTTPwatch
Custom browser e.g. Site Confidence Active
Proxy timing e.g. Fiddler proxy
Web Server Module e.g. APM solutions
Network-level e.g. SC Organic, Atomic Labs Pion
26/09/2011
53
6 ways of measuring WebPerf

26/09/2011
54
Which is better?
It Depends…

Do you want to measure every visit to your website?
Use a jscript tag, web server or network level solution
Are you measuring as part of Dev or QA?
Use a browser plug-in or proxy
Do you want detailed browser metrics like render start time?
Use a browser plug-in
Are you a 3rd party monitoring provider?
Use a custom browser variant!
26/09/2011
55
It depends on…

Active Monitoring
Agent “pings” the web page
“Real-User” Monitoring (RUM)
“listening in” to real user traffic
Complementary methods!
Best solution is Active & Real-User
Not Active or Real-User…
26/09/2011
56
Active vs “Real-User”

26/09/2011
57
What about client-side?

The Browser performance wars…
26/09/2011
58
http://sixrevisions.com/infographics/performance-comparison-of-major-web-browsers/ (2009)

Automate cross-Browser perf testing!
26/09/2011
59

26/09/2011
60
What about Mobile?

Different operating systems
26/09/2011
61

Even more browsers?
26/09/2011
62
http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php

slideshare.net/CMSummit/ms-internet-trends060710final

26/09/2011
64
http://www.nytimes.com/2011/04/18/technology/18mobile.html

Mobile Performance is location-dependent
26/09/2011
65
http://mytests.3pmobile.com/context/?WyIyUFVDZHlWV2ErZHFISmxCSWFXRENnPT0iLCJEYnFYVVp3SEN4MD0iXQ%3D%3D

Mobile latency (over HSDPA)
26/09/2011
66
Max RTT = 20 seconds!
http://blog.davidsingleton.org/mobiletcp

Mobile performance rules???
Latency kills…
DNS Lookups take far longer
Avoid re-directs (to http://m.yourdomain.com)
Reduce the number of roundtrips (<15 per page?)
26/09/2011
67

“Intelligent Adaptation”
Be device & network aware!
Send only what you need
Send the right sized images
With the minimum of script/CSS/etc
26/09/2011
68

Cache
Brower cache (small cache, with a different eviction algorithm…)
AppCache,
LocalStorage,
26/09/2011
69

26/09/2011
70
And that’s all I’ve got…(but before I go…)

26/09/2011
71
Velocity EU
Web Performance Conference
Berlin 8th/9th November
(see me for a discount code!)
http://velocityconf.com/velocityeu/

http://www.websiteperformance.org.uk	52165
http://www.seriticonsulting.com	1474
http://www.londonwebperformance.org.uk	172
http://www.freeperformancesoftware.com	54
http://www.londonwebperf.org.uk	51
http://abtasty.com	8
http://test.websiteperformance.org.uk	5
http://seriti.squarespace.com	4
http://demo.seriticonsulting.com:8888	4
http://www.seriticonsulting.com.	1
http://a0.twimg.com	1
http://translate.googleusercontent.com	1

Practical web performance - Site Confidence Web Performance Seminar

by Stephen Thair

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 53,940

Statistics

Practical web performance - Site Confidence Web Performance Seminar Presentation Transcript