Web Performance 101 presentation from Feb 2011 meetup, presented by Steve Thair from Seriti Consulting.
Covers the basics of why web performance is important for your business, the key "rules" and the tools that are available in the market today.
2. Agenda
Defining “Web Performance”?
Why performance matters (to your business)
The “Building Blocks” of #WebPerf
The “Rules” of Web Performance
The #WebPerf Toolkit
Q&A
(c) Seriti Consulting, 2011 2 15/02/2011
3. My Definition of Web Performance
“The delay perceived by the
website visitor between an
action (e.g click) and a
meaningful response”
(c) Seriti Consulting, 2011 3 15/02/2011
5. Subtle perceptions…
Perception of
“Progress Bar”
delay depends on:
How the bar “fills in”
Delay before Bar
appears
http://chrisharrison.net/projects/progres
sbars/ProgBarHarrison.pdf
http://survey.jsfiddle.net/files/download
/PerceivingAjaxPerformance.pdf
(c) Seriti Consulting, 2011 5 15/02/2011
6. Web Stress!!!
“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
(c) Seriti Consulting, 2011 6 15/02/2011
7. When do we “stop the clock?”
(c) Seriti Consulting, 2011 7 15/02/2011
8. So what is “Good Performance”?
0.1 seconds gives the feeling of instantaneous
response
1 second keeps the user's flow of thought
seamless.
10 seconds keeps the user's attention
Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
(c) Seriti Consulting, 2011 8 15/02/2011
9. 3 Second Rule
10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
(c) Seriti Consulting, 2011 9 15/02/2011
14. In Summary…
You are losing Visitors
You are losing Sales
You are losing Ad-revenue
You are wasting SEO/SEM effort
Spending £££ on bandwidth and servers
(c) Seriti Consulting, 2011
Still not convinced?
14 15/02/2011
15. 3rd Party Research
“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
(c) Seriti Consulting, 2011 15 15/02/2011
17. And who gets the blame?
“more than three quarters (77%) of European
consumers blame either website owner or the
website host (which is in any case chosen by the
website owner) when an online application fails. It
also revealed that if consumers encounter problems
online, 40% will go to a rival website and 37% will
abandon the transaction entirely. Only 18% said they
would report a problem to a company…”
http://www.ca.com/Files/SupportingPieces/ca_apm_2009_web_stress_i
ndex_212073.pdf
(c) Seriti Consulting, 2011 17 15/02/2011
18. “Old School”
Traditional “performance optimisation”
Web Server Tuning
Application Server Tuning
Database Query Tuning
Code re-factoring
The focus was INSIDE the data centre…
Trying to optimise something that normally takes less
that 200Ms (“data start time”)
(c) Seriti Consulting, 2011 18 15/02/2011
19. But…
80% of the page load time
is spent outside the data
centre!!!
Steve Souders “High-Performance Websites”
(c) Seriti Consulting, 2011 19 15/02/2011
20. “Front End Engineering”
Focus on the “front end”
Optimise the interaction
between the browser and
the data-centre
And how the browser
processes the client-side
objects
(c) Seriti Consulting, 2011 20 15/02/2011
21. The Building Blocks of #WebPerf
HTML CSS Javascript IMG
Browser
HTTP
TCP/IP
(c) Seriti Consulting, 2011 21 15/02/2011
22. Yahoo’s Rules
Minimize HTTP Requests Configure ETags
Use a Content Delivery Network Make AJAX Cacheable
Add an Expires or a Cache-
Control Header Use GET for AJAX Requests
Gzip Components Reduce the Number of DOM
Put StyleSheets at the Top Elements
Put Scripts at the Bottom No 404s
Avoid CSS Expressions Reduce Cookie Size
Make JavaScript and CSS
External Use Cookie-Free Domains for
Reduce DNS Lookups Components
Minify JavaScript and CSS Avoid Filters
Avoid Redirects Do Not Scale Images in HTML
Remove Duplicate Scripts Make favicon.ico Small & Cacheable
(c) Seriti Consulting, 2011 22 15/02/2011
http://developer.yahoo.com/yslow/help/#guidelines
23. Google’s Rules
Avoid bad requests Minimize redirects
Avoid CSS expressions Optimize images
Combine external CSS Optimize the order of styles and
Combine external JavaScript scripts
Defer loading of JavaScript Parallelize downloads across
Enable compression hostnames
Leverage browser caching Put CSS in the document head
Leverage proxy caching Remove unused CSS
Minify CSS Serve resources from a consistent
URL
Minify HTML Serve scaled images
Minify JavaScript Serve static content from a
Minimize request size cookieless domain
Minimize DNS lookups Specify a character set early
Minimize redirects Specify image dimensions
(c) Seriti Consulting, 2011 23
http://code.google.com/speed/page-speed/docs/rules_intro.html
Use efficient CSS selectors 15/02/2011
24. 5 Important Ones
Reduce Page Size (<500Kb)
Enable (Gzip) Compression
Reduce the number of roundtrips (<40 per page…)
Structure the page (to improve render & download)
CSS First
Javascript last
Cache, Cache, Cache
(c) Seriti Consulting, 2011 24 15/02/2011
25. Low hanging fruit…
Even if you apply just those
5 rules…
Your page download times
will drop by ~50%
(c) Seriti Consulting, 2011 25 15/02/2011
30. Analyse your site
500 pages for www.hitthetheatre.co.uk
(c) Seriti Consulting, 2011 30 15/02/2011
31. Drill down to the waterfall…
Analysis the waterfall graph
Look for render start time
Script blocking
Object blocking (#
connections)
# objects
Page too large!
(c) Seriti Consulting, 2011 31 15/02/2011
32. And keep going to the HTTP Headers
Not Gzip’d
No Expires or Cache Control
Headers
2 seconds Keep-Alive??
eTag format?
(c) Seriti Consulting, 2011 32 15/02/2011
34. Web Site Monitoring
Site Confidence
Axzona
Watchmouse
Pingdom
Gomez
Keynote
And many many many more…
(c) Seriti Consulting, 2011 34 15/02/2011
39. Don’t Forget…
Please review the Meetup on Meetup.com
Our next Meetup in WED March 15th –
Web Performance Automation!
(c) Seriti Consulting, 2011 39 15/02/2011
40. About Me
21yrs IT experience.
Started with www in 1998 (IIS3! Site Server 3!).
Web Architect @ BNP Paribas, CSFB etc
Web Operations Manager for www.totaljobs.com, www.tes.co.uk
Professional Services Manager @ www.siteconfidence.com
Seriti Consulting – specialising in web operations, management and Performance
e:stephen.thair@seriticonsulting.com
m:+44 7971 815 940
Twitter: http://twitter.com/TheOpsMgr
Blog: http://theopsmgr.seriticonsulting.com/
LinkedIn: http://uk.linkedin.com/in/stephenthair
Skype: seriti-steve
(c) Seriti Consulting, 2011 40 15/02/2011