Web Performance Automation - NY Web Performance Meetup

Download
Share  Add to  Flag Embed
Views:
 
Category: Science & Tech..
     
 
License:   All Rights Reserved

Presentation Description

Strangeloop provides the only front-end website performance optimization (WPO) solutions that operate at the scale demanded by global ecommerce sites and enterprise applications. Learn how companies like Petco, Travelocity and O'Reilly Media use Strangeloop to make their websites faster, and increase their revenues, conversion rates, and Google search rankings. http://www.strangeloopnetworks.com

Comments

Presentation Transcript

Performance Automation:

Performance Automation Making pages faster automatically

Agenda:

Agenda Introduction What is performance automation Basic terminology and concepts Case Study History of performance automation Market overview and challenges Q&A

Slide 4:

Web Performance

Slide 5:

Making sites faster without changing code

Slide 7:

Basic terminology and concepts

Waterfall chart:

Waterfall chart 11

Waterfall chart:

Waterfall chart 12 HTML

Waterfall chart:

Waterfall chart 13 Resources HTML

Waterfall chart:

Waterfall chart 14 Start Render Document Complete Fully Loaded

Waterfall component breakdown:

Waterfall component breakdown 15 DNS lookup DNS Lookup Takes one packet in each direction Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip

Waterfall component breakdown:

Waterfall component breakdown 16 TCP Connection TCP Connection 3 packets - Client Server (SYN) - ServerClient (SYN/ACK) - ClientServer (ACK) Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip

Slide 17:

17 Time To First Byte Time to First Byte Time from the request packet (usually 1) to the first packet of the response Includes the latency of the connect ion (DSL/Cable/etc) for a single round trip Also includes whatever server think time was involved in generating the response Waterfall component breakdown

Waterfall component breakdown:

18 Content Download Download Time it takes for the entire content of the response to get to the browser Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc) Waterfall component breakdown

First view vs Repeat View:

19 First view vs Repeat View

Concurrency:

20 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

Slide 21:

Case Study: Automation in action

Methodology:

Methodology

Slide 23:

Let’s Automate

A Few Points of Clarification:

A Few Points of Clarification We’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problems What we’re going to do: Not so good (slow) Awesome (fast) Improve performance incrementally * The real Velocity site is somewhere in the middle!

Performance Summary:

Performance Summary http://bit.ly/au01VY /

Waterfall:

Waterfall First View Repeat View

Per Object:

Per Object

Content Analysis by Type:

Content Analysis by Type

Content Analysis by Domain:

Content Analysis by Domain

Slide 31:

Show Me Where It Hurts Problem Analysis

Performance Problems:

Performance Problems Too many connections (too much orange)

Too Many Connections:

Too Many Connections 97 Connections (almost one per request)

Too Many Connections:

Too Many Connections

Performance Problems:

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

Too Many Bytes:

Too Many Bytes By Type By Domain

Performance Problems:

Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency

Concurrency:

Concurrency Browsers can only open and use so many connections at once www.browserscope.org

Performance Problems:

Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views

Bad Repeat View:

Bad Repeat View Full Fetches Validation

Bad Repeat View:

Bad Repeat View Connections Bytes

Performance Problems:

Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views No CDN (the greens are too big)

The Green Problem #1: No CDN:

The Green Problem #1: No CDN TTFB

Performance Problems:

Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views No CDN (the greens are too big) Too Many Roundtrips (too many greens)

The Green Problem #2: Roundtrips:

The Green Problem #2: Roundtrips First View Repeat View 80 Requests 27 Requests 78 Requests 14 Requests

The Green Problem #2: Roundtrips:

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

Performance Problems:

Performance Problems Too many connections Too many bytes (too much blue) Concurrency Bad Caching for repeat views No CDN (the greens are too big) Too Many Roundtrips (too many greens) Others

Examples of Other Problems:

Examples of Other Problems Blocking Javascript 3 rd party calls ( http://stevesouders.com/p3pc/ )

What it looks like:

What it looks like http://bit.ly/velocity-original

Summary:

Summary

Slide 51:

Let’s Fix It!!

Slide 52:

S et-U p

Testing Environment:

Testing Environment SERVICE (CLOUD) WebPageTest Client (East Coast) O’Reilly Datacenter (West Coast)

Slide 54:

Acceleration Methodology

Stepwise Acceleration:

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

Slide 56:

Step 1: Low Hanging Fruit

Keep-Alive:

Keep-Alive Solves the too-many connection problem (Less Orange!) Will help alleviate the TCP connection setup overhead 97 Connections

Compression:

Compression Addresses the too-many-bytes problem (Less Blue!) We’ll compress textual content (html/css/etc) Not the only solution to less blue, but the easiest

WebPageTest:

WebPageTest http://bit.ly/cKkjGz

Before and After:

Before and After ~17.8sec ~10.5sec

What We Helped: Keep-Alive:

What We Helped: Keep-Alive 97 Connections  19 Connections

What We Helped: Compression:

What We Helped: Compression

How Did We Do?:

How Did We Do? Original KA+Comp First View Repeat View 52% 71% 34% 94% 31% 51% 23% 75% 40% 62% Improvement

What it looks like:

What it looks like http://bit.ly/velocity-keep-alives

Pros and Cons:

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 they’re just not enough

Slide 66:

Step 2: Repeat View Problem

Poor Client Side Caching:

Poor Client Side Caching Original KA+Comp

Problem Still Exists:

Problem Still Exists ~6.2sec

How Do We Get Better Caching:

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

WebPageTest:

WebPageTest http://bit.ly/aCP3iX

Before and After:

Before and After ~6.2sec ~ 2.0sec

How Did We Do?:

How Did We Do? KA+Comp With Good Caching Repeat View 70% 42% 67% Improvement

Pros and Cons:

Pros and Cons Pros Good caching can have a major performance impact on repeat visits to a page Sometimes it’s easy to do Browsers generally pay attention (although interpretation may vary slightly) Cons The spec appears scary Invalidation and stale content

Slide 74:

Step 3: CDN

What Does a CDN do?:

What Does a CDN do? Global network of proxy caches Get cacheable content close to users Reduce TTFB (smaller greens)

TTFB Problem:

TTFB Problem

WebPageTest:

WebPageTest http://bit.ly/a9ZJcF

Before and After:

Before and After ~10.5sec ~8.3sec

TTFB Savings:

TTFB Savings Per object TTFB savings of ~50%

How Did We Do?:

How Did We Do? KA+Comp +CDN First View 21% 17% 22% Improvement 0.7 sec 2.3 sec 2.7 sec Seconds Gained

What it looks like:

What it looks like http://bit.ly/velocity-CDN

Pros and Cons:

Pros and Cons Pro Good mitigation of the TTFB problem Established industry: lots of vendors to choose from Cons Sometimes costly May require code change (CDN’ed objects should be written to the CDN domain)

Slide 83:

Step 4: Steroids - the Hard Stuff

We Can Get Better!:

We Can Get Better! Still too many roundtrips Still too many bytes Not Fast Enough!!

What to do Next?:

What to do Next? Reduce Roundtrips Combine images Combine JavaScript Combine CSS Reduce Payload even more Minify CSS and JavaScript Add Image Compression Increase Concurrency Add a couple of domains to the mix

WebPageTest:

WebPageTest http://bit.ly/bbT3v4

Before and After:

Before and After ~8.3sec ~3.8sec

How Did We Do?:

How Did We Do? +CDN +Strangeloop First View 19% 30% 54% Improvement 0.5 sec 4.6 sec 4.1 sec 45% 31% Seconds Gained 81 107 11 37

What it looks like:

What it looks like http://bit.ly/velocity-awesomest

Pros and Cons:

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 It’s not easy Regression

Slide 91:

Other performance opportunities

Slide 92:

3 rd Party content & Javascript

Slide 93:

Additional TCP based optimizations* *Image credit: FastSoft [ http://www.fastsoft.com/how-it-works/ ]

Slide 94:

DNS based optimizations

Different Browsers:

Different Browsers Chrome 4 Chrome 5 FireFox 2 FireFox 3 IE 6 IE 7 IE 8 Safari 4 Safari Mobile

Flow:

Flow 3.8 Seconds 11 Roundtrips Conversion ? ? ?

Slide 97:

Performance automation market

Slide 98:

1993 2002 1999 2006 2000 2007 1996 1995 1998 2004 2003 2009 2008 2010

Slide 99:

“I will deliver what the server gives me as efficiently as possible to the browser.” “I will transform what the server gives me to optimize it for the user’s browser” History of performance automation Delivery Transformation

Slide 100:

Original Delivery Transformation 9.5 seconds 63 roundtrips 5.7 seconds 63 roundtrips 2.1 seconds 9 roundtrips Delivery vs Transformation

Slide 101:

Delivery market

Slide 102:

Delivery market

Slide 103:

Players delivery market

Slide 104:

Transformation market

Slide 105:

Transformation market

Slide 106:

Transformation market

Slide 107:

Performance automation challenges

Challenges:

Javascript Ajax Flash Mobile Third Party Content Browsers Bad code- no standardization Measurment - How and What Challenges

Slide 109:

Opportunity

Slide 110:

“Speed is the next competitive advantage.” - Steve Souders , Google

Q&A:

Q&A