Yottaa Inc. 2 Canal Park 5th FloorCambridge MA 02141http://www.yottaa.com

Hide yo slowBoston Web Performance Meetup 11-18-2010

Jared Rosoff (@forjared)VP Products

jrosoff@yottaa.com

Is your site slow?

2

Is your website slow?

It impacts your business

3

Time on Site

Pages / Visit

Bounce Rate

Revenue

SEO

Conversion Rate

It makes your users unhappy

4

Makes users unhappy

http://hmu.com/blog/wp-content/uploads/2009/04/computer_guy_grumpy.jpg

It’s a bad idea

5

BAD IDEAREALLY

So what should we measure?

6

And how should we

measure it?

7

Things to measure

• Reachability• Page Load• Optimization• Business Intelligence

8

9

Reachability

• Connection measurement• DNS measurement• Topology analysis

Connection Measurement

10

1Connect

2 Request

3ServerGeneration

4First Byte

5Last Byte

Connection Measurement

• Tells you – How fast can you process a single

request

• Actions to take– Upgrade your hardware– Optimize your software – Change ISP / Hosting Provider

11

DNS Measurement

12

ISP

Verisign

GoDaddy

Your DNS

1

2

3

4

5

1 Browser requests www.domain.com

2 ISP Resolver looks up .com

3 ISP Resolver looks up domain.com

4 ISP Resolver looks up www.domain.com

5 ISP Resolver responds to browser

DNS Measurement

• Tells you– How long does it take for a client to

resolve my web site

• Actions to take – Use a larger TTL– Change DNS Hosting provider– Reduce DNS hops (CNAME’s, Delegation)

13

Topology Analysis

14

DataCenter

BackboneISP

ISP

ISP

Topology Analysis

• Tells you– What is network distance to my visitors

• Actions to take – Use a CDN – Change your data center / ISP– Deploy multiple data centers

15

Page Load Performance

• Time to Title• Time to First Paint• Time to Display• Time to Interaction• Cache efficiency• Concurrency• 3rd Party Impact

16

17

1

1 Fetch initial asset

2

2Fetch secondary assets

3

3 Fetch from CDN

4

4 Beacon

5

5 Widgets / APIs

18

Web TimingModel

19

WTF?

!!

Page Load Waterfall

• Tells you– The timing and sequence of resource

loading from the browser for a page

• Actions to take – Numerous (YSlow, Page Speed)

20

Cache Efficiency

21

Cache Efficiency

• Tells you– How well your pages leverage browser

cache

• Actions to take – Set cache headers– Use shared versions of assets (e.g.

jquery) – Separate dynamic / static content

22

Concurrency

Initial PageAsset

AssetAsset

1s 2s 3s 4s

Initial Page

1s 2s 3s 4s

Worst CaseC = 1.4/3 = 0.46

Best CaseC = 1.4/1.4 = 1

Asset

AssetAsset

3s 1.4s

Initial PageAsset

AssetAsset

1s 2s 3s 4s

ACTUALC = 1.4/2 = 0.7

2s

Concurrency

• Tells you– How well you take advantage of browser

concurrency

• Actions to take – Domain sharding– Asynchronous loading– Deferred execution

24

3rd Party Tags

25

Full PageTotal Time: 12.3s

Ad 1 ExcludedTotal Time: 10.1sAd 1 Impact: 2.2s

Ad 2 ExcludedTotal Time: 11.2sAd 2 Impact: 1.1s

Original Page without Ad 1

Ad 1 Impact

Page without ad 2

Ad 2 Impact

3rd Party Tags

• Tells you– How are 3rd party assets impacting my

page?

• Actions to take – Remove assets– Blame someone else

26

Optimization

• YSlow• Page Speed

27

Yslow Page Speed

Minimize HTTP Requests Minify request size

Use a CDN

Add an expires or cache control headerConfigure Etags

Leverage browser cachingLeverage proxy caching

Gzip components Enable compression

Puts CSS at the topPut JS at the bottom

Put CSS in the headOptimize order or styles & scripts

Remove unused CSS

Avoid CSS expressions Avoid CSS expressions

Use efficient CSS selectors

Make JS & CSS external

Combine external CSS

Combine external Javascript

Reduce DNS lookups Minimize DNS lookups

Minify JS & CSS Minify CSSMinify JS

Minify HTML

Avoid redirects Minimize redirects

Remove duplicate scripts

Use GET for AJAX requests

Reduce number of DOM elements28

Yslow Page Speed

No 404s Avoid bad requests

Reduce Cookie Size

Use Cookie Free Domains Serve static content from a cookieless domain

Avoid Filters

Do Not Scale images in HTML Serve scaled images

Optimize images

Specify image dimensions

Make favicon small and cacehable

Defer loading of Javascript

Parallelize downloads across hostnames

Serve resources from a consistent URL

Specify a character set early

29

Optimization scores

• Tells you– How well you have optimized your

content

• Actions to take – Follow instructions– Profit

30

Impact of YSlow is real!

31

Business Intelligence

• Benchmarking• Web analytics integration

32

33

Benchmarking

• Tells you– How you perform against industry

segments / competitors

• Actions to take – Change investment in performance– Demonstrate competitive advantage

34

Performance segmentation

35

Segmentation

• Tells you– How performance impacts business

metrics

• Actions to take – Demonstrate business case for

performance– Improve conversions / revenue

36

Techniques

• Continuous Synthetic monitors• On-Demand Synthetic monitors• Network taps • Server Instrumentation• Browser Instrumentation• In-Browser Tools

37

Continuous Synthetic Monitors

Region 3

Region 1

Region 2

HistoricalData

Scheduling

Reporting

Continuous Synthetic Monitors

• Examples– Yottaa, Keynote, Gomez

• Advantages– Benchmarking– 3rd Party Measurement– Macro-Level Page measurement– Reachability

• Disadvantages– Not real users– Can’t easily integrate with analytics

On-Demand Synthetic Monitors

Region 3

Region 1

Region 2

Reporting

On-Demand Synthetic Monitors

• Examples– Yottaa, Keynote, Gomez, Web Page Test

• Advantages– Easy to use– Instant results

• Disadvantages– Sample error– No / Limited historical reporting

Network Tap

Region 3

Region 1

Region 2Historical

Data

Reporting

Network Tap

• Examples– Coradiant

• Advantages– Real user measurement– Low/No impact on system

• Disadvantages– Do not see end user times, just server side

times– Do not see 3rd party requests– Difficult to integrate with analytics

Server Instrumentation

Region 3

Region 1

Region 2Historical

Data

Reporting

Server instrumentation

• Examples– New Relic, Tracelytics, DTrace

• Advantages– Real user measurement– Low/No impact on system

• Disadvantages– Do not see end user times, just server side

times– Do not see 3rd party requests– Difficult to integrate with analytics

Browser Instrumentation

Region 3

Region 1

Region 2Historical

Data

Reporting

Browser instrumentation

• Examples– Boomerang, Yottaa, Gomez

• Advantages– Real user measurement– Integrates well with analytics– Includes 3rd party

• Disadvantages– Can impact browser performance– High load on collection

In-Browser Tool

Region 1

Reporting

In-Browser Tools

• Examples– Firebug, Chrome Developer tools

• Advantages– Easy to use– Interactive

• Disadvantages– Not continuous– Only from a single browser / location

50

Q & AThank you for viewing