Yottaa State of Web Performance Optimization Group Webinar

Post on 08-May-2015

316 views 1 download

Transcript of Yottaa State of Web Performance Optimization Group Webinar

© 2013 Yottaa, Inc. All Rights Reserved.www.yottaa.com

Yottaa, Inc. 160 Federal StreetBoston, MA 02110

April 11, 2023

Yottaa: Accelerate Mobile and Web Businesses

Ensure A Great Online Experience for Any Business, On Any Device, Any Browser, Anywhere

2

Introduction to Yottaa

Yottaa - Mobile and Web Experience Acceleration: Ensure A Great Online Experience for Any Business, Any Device, Anywhere

Yottaa powers $1.4B/year online business for PCMall (NASDAQ: PCM), an E-commerce leader that selected Yottaa after an extensive evaluation

A global giant in chemical and healthcare, uses Yottaa to power many of its global brands

UK government uses Yottaa to optimize and protect its website and mobile experiences

Business Impact of Performance

Source:

4.3%in REVENUE

2secondsslower

Pages that were…

DROP

Source:

2.2 secondsimprovement in

landing page speedINCREASED

DOWNLOADS

15.4%by 60% faster

INCREASEDDONATION CONVERSION

MakingBarackObama’swebsite

14%Source: Barack Obama website

Source:

1seconddelaycauses an

11%in PAGE VIEWS

1seconddelaycauses a

7%in CONVERSIONS

1seconddelaycauses a

16%in CUSTOMERSATISFACTION

DROP DROP DROP

5

Growth of Webpage Footprint and Numberof Requests (1995 to 2012)

(Sources: Demenech 2007, Gomez 2008, Charzinski 2010, Souders 2012)

The Paradigm Has Shifted…

Ajax/HTML5 becomes

mainstream

Explosive Growth of Browsers and Devices

Now (2010+)

Then (2000-2007)

Yottaa Intelligently Sequences App Delivery

Sources: Yahoo Exceptional Performance, Google 2012, Yottaa/HubSpot Study

Geo latency:2-3 sec

TCP latency:1 sec

Back-end latency

Page content:1-2sec

Page request chattiness

Geo latency:1-2 sec

TCP latency:1 sec

Back-end latency

Page content:1-2sec

Page request chattiness

Back-end latency

Geo latency:3-5 sec

TCP latency:1-2 sec

Page content:4-6 sec

Page request chattiness

2-3 sec

Mid

mile

La

st m

ileB

row

ser

Then (1998-2010) Now (2012 and Beyond)

Optimize: transform web

content for browsers, devices

and CDNs

Back-end latency

Geographic latency:3-6 sec

TCP latency:1-2 sec

Page content:1-2sec

Page request chattiness

Mid

mile

La

st m

ileB

row

ser

Back-endlatency

Geo latency:2-3 sec

TCP latency:1-2 sec

Page content:1-2sec

Page request chattiness

DSA: Tune TCP/IP

to accelerate dynamic

content

Delivery: CDNs such as Akamai Transformation: Yottaa

CDN: Cache static

content to reduce

delivery latency

Avg page size: 90KB

Request/page: 20

Domains/page: 1

Page load time: 7.5 sec

Avg page size: 1MB+

Request/page: 100+

Domains/page: 14

Page load time: 6.8 sec, 10.2sec (m)

Rewrite

content

Reduce

requests

Federate

CDN

InstantON

8

Reduce Web Application Payload

• Larger sites take longer to load• Modern web components add weight

– Fonts– Images– Audio– Video

< 300 KB 300-600 KB 600-900 KB 900-1200 KB 1200-1500 KB 1500-1800 KB0

1000

2000

3000

4000

5000

6000

7000

8000

9000

Load Time by Page Weight

Series 1

9

Base resolution(300 x 200 px)

Retina/HD resolution(600 x 400 px)

Jpg compression 80 / 21 kb Jpg compression 31 / 16 kb (75% of base)

Page Weight vs. User Experience

Image Resolution: Can you spot the difference?

10

What is Minification?

Popular sites gain 10% - 30%

performance by minifying

code

Standard Code<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>

Minified, Optimized Code

11

Case Study

Challenge: 1.4 MB page, heaviest 20%

Goal: Increase traffic & conversions, incl. mobile

Solution: Reduce Payload & Requests 41%

Results: 53% faster loads, increased traffic 100%

“With Yottaa turned on, the Big Train site just flies on mobile devices.” Jim Wendt, eCommerce Marketing Manager

Read more: http://bit.ly/18rHt1N

12

Reduce Asset Requests

• Combine files and control sprawl• Modern web applications rely upon 3rd parties

– Tracking Tags– Fonts– Images– Audio– Video

< 10 10-20 21-30 31-40 41-50 > 500

2000

4000

6000

8000

10000

12000

14000

Load Time by JavaScript Request Count

Series 1

13

How Can You Reduce Requests?

• Minimize DNS lookups• Minimize redirects• Combine external JavaScript• Combine external CSS• Combine images using CSS sprites• Optimize the order of styles and scripts• Avoid document.write• Avoid CSS @import• Prefer asynchronous resources• Parallelize downloads across hostnames

14

CSS Sprites and Calling Images

Include multiple images in a page using only a single HTTP request with no JavaScript

Example Sprite w/Reference Grid Mobile Benchmark: DataURI vs. Sprite

Making Due: CDN, ADN and FEO

ClientWeb

Server

Server pageProcessing

World Wide Web

1. Client requests a dynamic page

2. Server returnsthe Dynamic page

Page Rendering and

Processing

InstantON™: A Breakthrough InnovationYottaa InstantON™ accelerates dynamic applications

in ways never possible before:

ClientWeb

Server

Network2b. Yottaa requests

the page from the web server

2a. Yottaa immediately returns a partial page from its cache

1. Client requests a dynamic page

3a. Server returnsa new page3b. Returns page delta and

client processing instructions

Page Rendering and

ProcessingServer pageProcessing

PageProcessing

Partial PageDelivery

Page Delta

17

E-Commerce Case Study

$1.4B e-commerce company (NASDAQ: PCM), selected Yottaa after an extensive evaluation of many vendors

OnSale.com (with Akamai) OnSale.com (with Yottaa)

35%

LoadsFaster by:

62%

Accelerates Start Render by:

Reduces Requests by:

80%

OffloadsServer Load by:With Yottaa:

WWW.ONSALE.COM 68%

18

Real-world Example

Challenge: Slow 3rd party content loading

Goal: Improve user experience, site speed

Solution: Sequence social content rendering

Results: 53% faster loadResults: 53% faster load

19

Real-world Example

Challenge: Slow page rendering impacts conversions

Goal: Improve page load time, engage more users

Solution: Optimize images, sequence content

Results: 4x faster load!Results: 4X faster load

21

Yottaa’s Unique Application Sequencing

Intelligent application optimization & delivery takes your site further than simple CDN acceleration

• Server Side Optimizations– InstantONTM technology accelerates page rendering– Dynamically sequences static and dynamic content delivery

• Middle Mile Optimizations– Hybrid, federated CDN– Integrate with existing CDN solution or migrate fully to Yottaa

• Last Mile Optimizations– Reduce payload and requests, parallelize processing for all content– Dynamic compression and responsive image support

• Browser & Device Optimizations– RapidTagTM display sequencer renders above-the-fold content instantly– Transformer technology modifies page content for optimal rendering

Presence Intelligence™ Technology

End-to-EndOptimization

InfrastructureAwareness

GeographicPresence

Last MileNetwork Presence

Device & BrowserPresence

Data Center Middle Mile Last Mile Front End

In-pageVisibility

User Interactivity

Application Streaming

InstantON™

Transformer

Responsive Image

RapidTag

Display Sequencer

CDN Federation

IP AnycastDNS & Edge

Federated Delivery(Real-time CDN Balancing)

Autoprovisioning& Management

Cloud Firewall

Traffic Analytics

DDOS Protection

Origin Shield

Front End Optimization

Reduce Requests

Reduce Payload

Increase Parallel Processing

Deep Insight

Real Browser Monitoring

MobileMonitoring

Key Pages & Transactions

CMS PlatformIntegration

eCommercePlatform

Integration

24

In Summary

• Rule of thumb: Less is more• Take a measured approach

– Plan– Develop– Test– Prioritize– Optimize– Iterate

25

yottaa.com/sign-up-for-a-11-discussion-of-yottaa