Stephen Thair, Seriti Consulting, @TheOpsMgr

stephen.thair@seriticonsulting.com

PRACTICAL WEB PERFORMANCE

• Defining “Web Performance”?

• Why performance matters (to your business)

• The “Rules” of Web Performance

• Practical Web Performance (“where to start!”)

AGENDA

MY DEFINITION OF WEB PERFORMANCE

“The delay perceived by the website visitor between an action (e.g click)

and a meaningful response”

“The delay perceived by the website visitor between an action (e.g click)

and a meaningful response”

“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

Just because your Dev Mgr, 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!!!

• 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”?

10 Seconds is too slow… (IMHO)

“Initial render” < 750ms and be

“Page Complete” < 3 seconds

“3 SECOND RULE”

WHY PERFORMANCE MATTERS

BOUNCE RATE GOES UP

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

PAGE VIEWS GOES DOWN

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

CONVERSION RATE GOES DOWN

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

/

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

Artificial 1s delay = 2.8% reduction in revenue per user

EMPIRICAL TESTING

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…

So how are we doing?

Largest Page…4,909,588 bytes

Slowest Page…12.436 secs

Most objects…227

1 was down for maintenance

1 didn’t re-direct from http to https

~28% had some type of error

So what can you do about it?

Answer = Optimise!

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”

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

YAHOO’S RULES

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

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

GOOGLE’S RULES 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

Informationoverload!

Where should you start?

Which optimisations are most common?

Which optimisations are most important?

And the survey says…

HTTP ARCHIVE - LOAD TIME CORRELATION

http://httparchive.org/interesting.php

HTTP ARCHIVE - RENDER TIME CORRELATION

http://httparchive.org/interesting.php

LESSONS LEARNT FROM CONSULTING…Generic Description

Reduce Page Size

Reduce Number of Requests

Implement GZIP

Compression

Optimise Loading of

external files

Defer JavaScript

loading

Optimise images

Optimize HTTP Caching

Domain Sharding

Cookie-free

Domains

Back-end performance

tuning

Remove Unnecessary

CSSHigh Street Retailer Yes Yes No No No No Yes No Yes No YesBudget Hotel Chain No Yes No No No Yes Yes Yes Yes Yes NoProfessional Body No Yes Yes Yes Yes Yes Yes Yes No Yes No

High Street Retailer No Yes No Yes Yes Yes Yes Yes Yes Yes NoVOD provider No Yes No No Yes Yes Yes Yes Yes Yes Yes

Consumer Electronics Brand Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes YesFashion Retailer No Yes No No Yes Yes Yes No Yes Yes Yes

Travel Sector No Yes Yes Yes Yes no Yes Yes Yes Yes NoFashion Retailer Yes Yes Yes Yes Yes No Yes Yes No Yes NoFashion Retailer Yes Yes No No Yes No Yes Yes Yes Yes No

Home Improvement Retail No Yes No No Yes No Yes Yes Yes Yes YesElectrical Retailer Yes Yes no Yes Yes No Yes No Yes Yes NoElectrical Retailer Yes Yes No No Yes Yes Yes Yes No Yes NoOnline Gambling Yes Yes Yes Yes No Yes Yes No Yes Yes Yes

Mobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes Yes No YesInsurance Provider No Yes No No Yes No Yes Yes No Yes Yes

Emergency Repair Service No Yes No Yes No Yes Yes Yes No Yes YesMobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes No Yes Yes

Car Manufacturer No Yes No No No Yes Yes Yes Yes Yes YesFinancial Services No Yes Yes No Yes No Yes Yes No Yes Yes

Travel Sector Yes Yes No No Yes No Yes Yes No No NoPublisher No Yes Yes No Yes Yes Yes Yes No No YesPublisher No Yes No No Yes No Yes Yes Yes No Yes

High Street Retailer Yes Yes No Yes Yes Yes Yes Yes No No YesNewspaper Yes Yes No Yes Yes Yes Yes No Yes Yes Yes

48% 100% 28% 48% 80% 60% 100% 80% 60% 76% 64%

Performance Rule Frequency Recommended

Reduce Number of Requests 100%

Optimize HTTP Caching 100%Defer JavaScript loading 80%

Domain Sharding 80%Back-end performance tuning 76%Remove Unnecessary CSS 64%

Optimise images 60%Cookie-free Domains 60%

Reduce Page Size 48%

Optimise Loading of external files 48%

Implement GZIP Compression 28%

1. Reduce Page Size (<500Kb)

2. Enable (Gzip) Compression

3. Reduce the number of roundtrips (<40 per page…)

4. HTTP Cache Headers (cache long & prosper!)

5. Structure the page (to improve render & download)

a) CSS First

b) Javascript last

5 IMPORTANT ONES

Even if you apply just those 5 rules…

Your page download times will drop by ~50%

LOW HANGING FRUIT…

Generally you are now measuring gains in milliseconds

WHAT ABOUT THE OTHER RULES?

But even milliseconds can make a difference…

OPTIMISING JAVASCRIPT & ASYNC LOADING

• Loading jquery Async

• Improving JS Execution time

• Delayed ad-loading

http://velocityconf.com/velocity2011/public/schedule/detail/18039

Faster does not always equal more

revenue!!!

“REDUCE THE NUMBER OF DOM ELEMENTS”

24,000 calls to a selector takes

time…

“USE A CONTENT DELIVERY NETWORK”

You can’t beat the speed of light…

And if your customers are not in the UK, invest in a CDN…

4.5 seconds in Londonbecomes

12.5 seconds in Singapore

“USE HTTP KEEP-ALIVES”

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)

“The Bigger Picture”

WPO is not just for Christmas…

Performance is a PROCESS

NOT aPROJECT

http://www.seriticonsulting.com/blog/2011/5/28/web-performance-is-not-just-for-christmashellip.html

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

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

Performance Lead / Evangelist

Front-end Developer

Back-end Developer

Performance QA

Database Administrator

Systems Administrator

Network Administrator

Web Analytics Analyst

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?

What Else?

“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

Make sure you can measure your website performance…

(and that the numbers are getting better, not worse!)

BETFAIR’S CUSTOMER PERFORMANCE CHARTER

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

1. JavaScript timing e.g. WebTuna, GA SiteSpeed

2. Browser plug-in e.g. HTTPwatch

3. Custom browser e.g. Site Confidence Active

4. Proxy timing e.g. Fiddler proxy

5. Web Server Module e.g. APM solutions

6. Network-level e.g. SC Organic, Atomic Labs Pion

6 WAYS OF MEASURING WEBPERF

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…

• 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…

• 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…

ACTIVE VS “REAL-USER”

What about client-side?

THE BROWSER PERFORMANCE WARS…

http://sixrevisions.com/infographics/performance-comparison-of-major-web-browsers/ (2009)

AUTOMATE CROSS-BROWSER PERF TESTING!

What about Mobile?

DIFFERENT OPERATING SYSTEMS

EVEN MORE BROWSERS?

http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php

slideshare.net/CMSummit/ms-internet-trends060710final

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

MOBILE PERFORMANCE IS LOCATION-DEPENDENT

http://mytests.3pmobile.com/context/?WyIyUFVDZHlWV2ErZHFISmxCSWFXRENnPT0iLCJEYnFYVVp3SEN4MD0iXQ%3D%3D

10/04/2023© SERITI CONSULTING 66

MOBILE LATENCY (OVER HSDPA)

http://blog.davidsingleton.org/mobiletcp

Max RTT = 20 seconds!

1. Latency kills…

a) DNS Lookups take far longer

b) Avoid re-directs (to http://m.yourdomain.com)

c) Reduce the number of roundtrips (<15 per page?)

MOBILE PERFORMANCE RULES???

10/04/2023(C) SERITI CONSULTING, 2011 68

2. “Intelligent Adaptation”

a) Be device & network aware!

b) Send only what you need

c) Send the right sized images

d) With the minimum of script/CSS/etc

MOBILE PERFORMANCE RULES???

10/04/2023(C) SERITI CONSULTING, 2011 69

3. Cache

a) Brower cache (small cache, with a different eviction algorithm…)

b) AppCache,

c) LocalStorage,

MOBILE PERFORMANCE RULES???

And that’s all I’ve got…

(but before I go…)

Velocity EU

Web Performance Conference

Berlin 8th/9th November

(see me for a discount code!)

http://velocityconf.com/velocityeu/