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.

1. Web Performance 101
Steve Thair
Seriti Consulting
@TheOpsMgr

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

4. Perception
http://velocityconf.com/velocity2010/public/schedule/detail/13019
(c) Seriti Consulting, 2011 4 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

10. Why Performance Matters
(c) Seriti Consulting, 2011 10 15/02/2011

11. Bounce Rate goes up
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
(c) Seriti Consulting, 2011 11 15/02/2011
by-default-before-our-eyes/

12. Page Views goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
(c) Seriti Consulting, 2011 12 15/02/2011
by-default-before-our-eyes/

13. Conversion Rate goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
(c) Seriti Consulting, 2011 13 15/02/2011
by-default-before-our-eyes/

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

16. Empirical Testing
 Artificial 1s delay =
2.8% reduction in
revenue/user (Bing)
 http://assets.en.oreilly.com/1/event/29/The%20User
%20and%20Business%20Impact%20of%20Server%20
Delays%2C%20Additional%20Bytes%2C%20and%20HT
TP%20Chunking%20in%20Web%20Search%20Present
ation.pptx
(c) Seriti Consulting, 2011 16 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

26. Seatwave did it…
(c) Seriti Consulting, 2011 26 15/02/2011
http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf

27. The #WebPerf Toolkit
 Client-side analysis tools
 External Website & Page analysers
 Website Monitoring
 Web Performance Analytics
(c) Seriti Consulting, 2011 27 15/02/2011

28. Client-side
 ySlow (Firefox)
 PageSpeed (Firefox)
 Firebug (Firefox)
 HTTPWatch (Firefox & IE)
 Dynatrace Ajax Edition (IE only, Firefox beta)
(c) Seriti Consulting, 2011 28 15/02/2011

29. Demo - Pagespeed
(c) Seriti Consulting, 2011 29 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

33. External Analysis Tools
 WebPageTest.org- http://www.webpagetest.org/
 SC Performance Analyser
http://www.siteconfidence.com/services/site-wide-performance-
analysis.aspx
 GTMetrix - http://gtmetrix.com/
 Yottaa - http://www.yottaa.com/
 Smush It (image analysis) -
http://www.smushit.com/ysmush.it/
 RedBot (cache analysis)
 Home (Aus) - http://redbot.org/
 UK Node - http://redbot.jaoudestudios.com/
(c) Seriti Consulting, 2011 33 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

35. Website Performance Analytics
AKA Real-User monitoring
 Atomic Labs Pion - www.atomiclabs.com
 WebTuna – www.webtuna.com
 Avicode (now Microsoft) –
www.microsoft.com/systemcenter/en/us/avicode.aspx
 Gomez “Actual Experience XF” – www.gomez.com
 Tealeaf – www.tealeaf.com
 Oracle RUEI -
http://www.oracle.com/technetwork/oem/uxinsight/index.
html
 HP Real-user Monitor (RUM) -
https://h10078.www1.hp.com/cda/hpms/display/main/hpms_content.jsp?zn=bto&
cp=1-11-15-25^1438_4000_100__
(c) Seriti Consulting, 2011 35 15/02/2011

36. Acceleration Solutions
 Google Mod_pagespeed -
http://code.google.com/speed/page-
speed/docs/module.html
 Aptimize – www.aptimize.com
 Webo - http://www.webogroup.com/home/site-speedup/
 Strangeloop - http://www.strangeloopnetworks.com/
 Blaze IO - http://www.blaze.io/
 DSA “Dynamic Site Acceleration” – Cotendo, Akamai,
Limelight, CDNetworks etc
(c) Seriti Consulting, 2011 36 15/02/2011

37. Other Resources
 Performance Planet (WebPerf Blogs) - http://www.perfplanet.com/
 WebPerformanceToday - http://www.webperformancetoday.com/
 Steve Souder’s blog - http://www.stevesouders.com/blog/
 TheOpsMgr Blog - http://theopsmgr.seriticonsulting.com/
 UK Broadband stats -
http://www.broadbandspeedchecker.co.uk/speed_ratings.aspx
 Browser Usage Stats - http://www.w3counter.com/globalstats.php
(c) Seriti Consulting, 2011 37 15/02/2011

38. Questions?
(c) Seriti Consulting, 2011 38 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