performance in business terms

8/6/2019 Performance in Business Terms

1/122

Performance in business terms


2/122

2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2

Agenda

Introduction

Basic terminology and concepts

Case study Performance stats and examples

5 minute performance benchmark

Business case

Q&A


3/122



4/122



5/122

Web Performance


6/122


7/122


8/122

2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88www.strangeloopnetworks.com


9/122



10/122


Waterfall chart

10


11/122


Waterfall chart

11

HTML


12/122


Waterfall chart

12

Resources

HTML


13/122


Waterfall chart

13

Start

Render

Document

Complete

Fully

Loaded


14/122


Waterfall component breakdown

14

DNS lookup

DNS Lookup

Takes one packet in eachdirection

Time is limited to the latency

of the connection

(DSL/Cable/etc) for the

single round trip


15/122



15

TCP

Connection

TCP Connection

3 packets

- ClientServer (SYN)

- ServerClient (SYN/ACK)

- ClientServer (ACK)

Time is limited to the latency

of the connection

(DSL/Cable/etc) for the

single round trip


16/122


17/122


Content

Download

Download

Time it takes for the entirecontent of the response to

get to the browser

Mostly limited by the

bandwidth limit of the

connection (DSL/Cable/etc)



18/122


First view vs Repeat View


19/122


Concurrency

Blocking

Concurrent

Concurrency

Blocking script don't let the

browser use available resources(network, connections, etc) to

fetch more content from the

server

The overall page load time and

render time are both affected

negatively)


20/122


Case Study: Automation in action


21/122


Methodology


22/122


Lets Automate


23/122



24/122


A Few Points of Clarification

Well use it to describe where performance painpoints are, but that doesnt mean the page

actually has these problems

What were going to do:

Not so

good

(slow)

Awesome

(fast)

Improve performance incrementally

* The real Velocity site is somewhere in the middle!


25/122


Performance Summary

http://bit.ly/au01VY /


26/122


Waterfall

First View Repeat View


27/122


28/122


29/122


Content Analysis by Domain


30/122


31/122


Performance Problems

Too many connections (too much orange)


32/122


Too Many Connections

97 Connections

(almost one per request)


33/122


Too Many Connections


34/122



Too many connections (too much orange) Too many bytes (too much blue)


35/122


Too Many Bytes

By Type By Domain


36/122




Concurrency


37/122


Concurrency

Browsers can only open and use so manyconnections at once

www.browserscope.org


38/122




Concurrency

Bad Caching for repeat views


39/122


Bad Repeat View

Full Fetches

Validation


40/122


Bad Repeat ViewConnections Bytes


41/122




Concurrency

Bad Caching for repeat views No CDN (the greens are too big)


42/122


The Green Problem #1: No CDNTTFB


43/122




Concurrency


Too Many Roundtrips (too many greens)


44/122


The Green Problem #2: Roundtrips

First View Repeat View

80

Requests

27 Requests

78

Requests

14 Requests


45/122


The Green Problem #2: Roundtrips

Every fetch still pays the HTTP overhead penalty TTFB is still a problem

Exacerbated by concurrency issues

Getting worse as number of objects per page

grows

Generally, the hardest problem to solve


46/122



Too many connections Too many bytes (too much blue)

Concurrency


Too Many Roundtrips (too many greens)

Others


47/122


Examples of Other Problems

Blocking Javascript

3rd party calls (http://stevesouders.com/p3pc/)


48/122

Before and after: Keep-alives & compression

http://www.youtube.com/watch?v=KPYBF41yiFw


49/122


Summary


50/122


Lets Fix It!!


51/122


52/122


53/122


Acceleration Methodology


54/122


Stepwise Acceleration

Start from the beginning and fix the easy stuff

Step by step acceleration of the page

Apply techniques/methods/etc and see the result

Try to make it as fast as possible


55/122


Step 1:

Low Hanging Fruit


56/122


Keep-Alive

Solves the too-many connection problem (LessOrange!)

Will help alleviate the TCP connection setup

overhead

97

Connections


57/122


Compression

Addresses the too-many-bytes problem (LessBlue!)

Well compress textual content (html/css/etc)

Not the only solution to less blue, but the easiest


58/122


WebPageTest

http://bit.ly/cKkjGz


59/122


Before and After

~17.8sec ~10.5sec


60/122


What We Helped: Keep-Alive

97Connections 19Connections


61/122


62/122


63/122


64/122


Pros and Cons

Pros Really easy to do

Single configuration switches in servers, proxies, or

load balancers

Good benefit seen right away

Cons

Compression has processing overhead

On their own theyre just not enough


65/122


66/122


Poor Client Side Caching

Original

KA+Comp


67/122


Problem Still Exists

~6.2sec


68/122


How Do We Get Better Caching

RFC 2616, Section 13 Caching headers should be used on static (non-

changing) objects, so they can be cached

browser-side

And by intermediate caching proxies

Validators are not enough


69/122


70/122


Before and After

~6.2sec

~2.0sec


71/122


How Did We Do?

KA+Comp

With GoodCaching

Repeat View 70% 42%67%

Improvement


72/122


Pros and Cons

Pros Good caching can have a major performance impact

on repeat visits to a page

Sometimes its easy to do

Browsers generally pay attention (althoughinterpretation may vary slightly)

Cons

The spec appears scary

Invalidation and stale content


73/122


Step 3:

CDN


74/122


What Does a CDN do?

Global network ofproxy caches

Get cacheable

content close tousers

Reduce TTFB(smaller greens)


75/122


TTFB Problem


76/122


WebPageTest

http://bit.ly/a9ZJcF


77/122


Before and After

~10.5sec ~8.3sec


78/122


TTFB Savings

Per object TTFB savings of

~50%


79/122


How Did We Do?

KA+Comp

+CDN

First View 21% 17%22%

Improvement

0.7 sec 2.3 sec 2.7 secSeconds Gained


80/122

Before and after: Adding a CDN

http://www.youtube.com/watch?v=BR5hO5rL8lE


81/122


82/122


Step 4:

Steroids- the Hard Stuff

W C G t B tt !


83/122


We Can Get Better!

Still too many roundtrips

Still too many bytes

Not Fast Enough!!


84/122


85/122

B f d Aft


86/122


Before and After

~8.3sec

~3.8sec


87/122


88/122

Before and after: The final, fastest version

http://www.youtube.com/watch?v=IPn0T1UacIA

P d C


89/122


Pros and Cons

Pros Most significant benefit for the hardest part of the

acceleration lifecycle

Address multiple performance points (somtimes

multiple ones with the same technique) Cons

Its not easy

Regression

Diff t B


90/122


Different Browsers

0

0.5

1

1.52

2.5

3

3.5

4 Performance differences across browsers

Fl


91/122


Flow

3.8 Seconds11 Roundtrips

Conversion

? ? ?


92/122



93/122



94/122



95/122



96/122



97/122



98/122


These stats dont apply to me.


99/122


9%

11%

13%

Conversion Cart size Sales


100/122


8%

6%

Revenue Per visit Overall revenue


101/122


These stats dont apply to me

either.


102/122


How to perform a 5-minutespeed/revenue benefit

analysis of your site

Step 1


103/122


Step 1

Perform WebPagetests in IE7 and IE8.

Calculate the load time difference as a

percentage.

Step 2


104/122


Step 2

Use Google Analytics to calculate your

current order value per visit for IE7 and IE8.


105/122

Step 3 cont


106/122


Step 3 con t

Determine your order value per visit, by

connection speed (cable, DSL, T1, dialup).

Step 4


107/122


Step 4

Correlate the results of steps 1 to 3 in simple

graphs.

Step 5


108/122


Step 5

Test your site to get a sense of how much

faster it could be.

strangeloopnetworks.com/test-your-website

Step 6


109/122


Step 6

Compare these gains to your graphs from

step 4.

What lift can you anticipate in value pervisit?

Caveats


110/122


Caveats

Correlation does not imply causation.

Browser and connection speed might imply

something about the buyer (i.e. s/he is more

affluent) that is unrelated to the effects of speed.


111/122


But this trend seems to hold

true in the real world.

Case study


112/122


Case study


113/122


How to be your companys in-

house performance evangelist


114/122


The average exec wants to know 3 things

Whats in it for the company?

Whats in it for me?

How do we compare to our competitors?

When talking to an exec


115/122


When talking to an exec

Tell the time, not how the watch works.

Most important, urgent point first.

Keep it short. Keep it simple.

Make it visual.

Be ready to give context.

What to say: #1


116/122


What to say: #1

Our site is slower than our competitors.

Were losing money.


117/122



118/122


What to say: #2


119/122

2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically.119

What to say: #2

Weve proven that, when our site is faster forusers, they spend more.

What to say: #3


120/122


What to say: #3

This is where we should be aiming.

What to say: #4


121/122


What to say: #4

Consumers expectEVERY website to

load fast.


122/122

performance in business terms

Documents