Web Performance Optimisation 101

And how to measure it!

Steve ThairSeriti Consulting

@TheOpsMgr

11/04/2023(c) Seriti Consulting, 2011 2

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://www.seriticonsulting.com/blog/ LinkedIn: http://uk.linkedin.com/in/stephenthair Skype: seriti-steve

About Me

11/04/2023(c) Seriti Consulting, 2011 3

Defining “Web Performance”? Why performance matters (to your

business) The “Rules” of Web Performance Measuring Web Performance The #WebPerf toolkit Q&A

Agenda

11/04/2023(c) Seriti Consulting, 2011 4

“The delay perceived by the website visitor between an

action (e.g click) and a meaningful response”

My Definition of Web Performance

11/04/2023(c) Seriti Consulting, 2011 5

Perception

http://velocityconf.com/velocity2010/public/schedule/detail/13019

11/04/2023(c) Seriti Consulting, 2011 6

“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!!!

11/04/2023(c) Seriti Consulting, 2011 7

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

So what is “Good Performance”?

11/04/2023(c) Seriti Consulting, 2011 8

10 Seconds is too slow… (IMHO)

“Initial render” < 750ms and be

“Page Complete” < 3 seconds

3 Second Rule

11/04/2023(c) Seriti Consulting, 2011 9

Why Performance Matters

11/04/2023(c) Seriti Consulting, 2011 10

Bounce Rate goes up

http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes

/

11/04/2023(c) Seriti Consulting, 2011 11

Page Views goes down

http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes

/

11/04/2023(c) Seriti Consulting, 2011 12

Conversion Rate goes down

http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes

/

11/04/2023(c) Seriti Consulting, 2011 13

“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

11/04/2023(c) Seriti Consulting, 2011 14

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%20Delays%2C%20Additional%20Bytes%2C%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx

Empirical Testing

11/04/2023(c) Seriti Consulting, 2011 15

So why does this matter to UK

CMG?

11/04/2023(c) Seriti Consulting, 2011 16

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”)

“Old School”

11/04/2023(c) Seriti Consulting, 2011 17

80% of the page load time is spent outside

the data centre!!!Steve Souders “High-Performance Websites”

But…

11/04/2023(c) Seriti Consulting, 2011 18

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”

11/04/2023(c) Seriti Consulting, 2011 19

TCP/IP

HTTP

Browser

HTML CSS Javascript IMG

The Building Blocks of #WebPerf

11/04/2023(c) Seriti Consulting, 2011 20

Minimize HTTP Requests Use a Content Delivery N

etwork 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

Yahoo’s Rules - ySlow

Configure ETags Make AJAX Cacheable Use GET for AJAX Requests Reduce the Number of DOM El

ements No 404s Reduce Cookie Size Use Cookie-Free Domains for

Components Avoid Filters Do Not Scale Images in HTML Make favicon.ico Small & Cac

heablehttp://developer.yahoo.com/yslow/help/#guidelines

11/04/2023(c) Seriti Consulting, 2011 21

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

Google’s Rules - PageSpeed

Minimize redirects Optimize images Optimize the order of styles

and scripts Parallelize downloads across

hostnames Put CSS in the document he

ad Remove unused CSS Serve resources from a cons

istent 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

11/04/2023(c) Seriti Consulting, 2011 22

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

5 Important Ones

11/04/2023(c) Seriti Consulting, 2011 23

Even if you apply just those 5 rules…

Your page download times will drop by ~50%

Low hanging fruit…

11/04/2023(c) Seriti Consulting, 2011 24

Seatwave did it…

http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf

11/04/2023(c) Seriti Consulting, 2011 25

Measuring what, exactly? How to measure web performance? When & where to measure?

“Active” vs “Passive” Web Performance Measurement

Automation

Measuring Web Performance

11/04/2023(c) Seriti Consulting, 2011 26

Many different yardsticks to use Data-start time (TTFB) DOM load (Document Object Model) Render Start (When does the page start to display) Browser “OnLoad” event “HTTP Load” – when network activity stops

What about AJAX events? “Above the Fold” time (subjective user

experience) http://assets.en.oreilly.com/1/event/62/Above%20the%20Fold%20Time_%20Measuring%20Web

%20Page%20Performance%20Visually%20Presentation.pdf

What are we measuring?

11/04/2023(c) Seriti Consulting, 2011 27

When do we “stop the clock?”

11/04/2023(c) Seriti Consulting, 2011 28

11/04/2023(c) Seriti Consulting, 2011 29

1. JavaScript timing e.g. WebTuna2. Browser plug-in e.g. HTTPwatch3. Custom browser e.g. Webkit build4. Proxy timing e.g. Fiddler proxy5. Web Server Module e.g. APM

solutions6. Network-level e.g. Atomic Labs Pion

6 ways of measuring WebPerf

11/04/2023(c) Seriti Consulting, 2011 30

Which is better?

Metric JavaScript Browser Plug-in Custom Browser Proxy Debugger Web Server-level Network-level

Example Product WebTuna HTTPWatch Webkit-variant Fiddler Proxy AppDynamics Pion

"Blocked/Wait" No Yes Yes Yes No No

DNS No Yes Yes Yes No No

Connect No Yes Yes Yes No Yes

Time to First Byte Partially Yes Yes Yes Partially Yes

Initial Render No Yes No No No No

DOMReady Partially Yes Yes No No No

"Page/HTTP Complete" Partially Yes Yes Yes Partially Yes

OnLoad Event Yes Yes Yes No No No

JS Execution Time Partially Yes No No No No

Affects Measurement Yes Yes Yes Yes Yes No

It

Depends…

11/04/2023(c) Seriti Consulting, 2011 31

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!

It depends on…

11/04/2023(c) Seriti Consulting, 2011 32

Active (aka “Synthetic”) Monitoring Agent “pings” the web page

Passive (aka “Real User”) “listening in” to real user traffic

Complementary methods! Best solution is Active & Passive Not Active or Passive…

Active vs Passive

11/04/2023(c) Seriti Consulting, 2011 33

Active – Site Confidence Performance Analyser

11/04/2023(c) Seriti Consulting, 2011 34

Active – Site Confidence Performance Analyser

Cross Browser(Problem in IE?)

Compare CompetitionUK E-Commerce Top 20

11/04/2023(c) Seriti Consulting, 2011 35

Passive – Webtuna

Performance around the World SLA Compliance for all visitors

11/04/2023(c) Seriti Consulting, 2011 36

Automated Regression testing with Selenium

+ Dynatrace Ajax

Edition

+ www.slowslow.com

Web Performance Analysis as part of the SDLC

11/04/2023(c) Seriti Consulting, 2011 37

Client-side analysis tools External Website & Page

analysers Web Performance Analytics Website Acceleration

The #WebPerf Toolkit

11/04/2023(c) Seriti Consulting, 2011 38

ySlow (Firefox) PageSpeed (Firefox & Chrome) Firebug (Firefox) HTTPWatch (Firefox & IE) Dynatrace Ajax Edition (IE & Firefox)

Client-side Performance Tools

11/04/2023(c) Seriti Consulting, 2011 39

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/

External Analysis Tools

11/04/2023(c) Seriti Consulting, 2011 40

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__

Website Performance AnalyticsAKA Real-User monitoring

11/04/2023(c) Seriti Consulting, 2011 41

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

Acceleration Solutions

11/04/2023(c) Seriti Consulting, 2011 42

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://www.seriticonsulting.com/blog/

Other Resources

11/04/2023(c) Seriti Consulting, 2011 43

Join our London Web Performance Meetup http://www.meetup.com/London-Web-Performa

nce-Group/

THIS THURSDAY 19th May – 7pm – Leadenhall Mkts

Win a free pass to Velocity 2011 Conference (worth USD$2,000)

Follow us on Twitter @LDNWebPerf #LDNWebPerf & #WebPerf

@LDNWebPerf User Group!

11/04/2023(c) Seriti Consulting, 2011 44

Questions?