Yottaa State of Web Performance Optimization Group Webinar

21
© 2013 Yottaa, Inc. All Rights Reserved. www.yottaa.com Yottaa, Inc. 160 Federal Street Boston, MA 02110 6/26/22 Yottaa: Accelerate Mobile and Web Businesses Ensure A Great Online Experience for Any Business, On Any Device, Any Browser, Anywhere

Transcript of Yottaa State of Web Performance Optimization Group Webinar

Page 1: 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

Page 2: Yottaa State of Web Performance Optimization Group Webinar

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

Page 3: Yottaa State of Web Performance Optimization Group Webinar

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

Page 4: Yottaa State of Web Performance Optimization Group Webinar

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)

Page 5: Yottaa State of Web Performance Optimization Group Webinar

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

Page 6: Yottaa State of Web Performance Optimization Group Webinar

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

Page 7: Yottaa State of Web Performance Optimization Group Webinar

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?

Page 8: Yottaa State of Web Performance Optimization Group Webinar

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

Page 9: Yottaa State of Web Performance Optimization Group Webinar

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

Page 10: Yottaa State of Web Performance Optimization Group Webinar

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

Page 11: Yottaa State of Web Performance Optimization Group Webinar

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

Page 12: Yottaa State of Web Performance Optimization Group Webinar

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

Page 13: Yottaa State of Web Performance Optimization Group Webinar

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

Page 14: Yottaa State of Web Performance Optimization Group Webinar

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

Page 15: Yottaa State of Web Performance Optimization Group Webinar

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%

Page 16: Yottaa State of Web Performance Optimization Group Webinar

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

Page 17: Yottaa State of Web Performance Optimization Group Webinar

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

Page 18: Yottaa State of Web Performance Optimization Group Webinar

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

Page 19: Yottaa State of Web Performance Optimization Group Webinar

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

Page 20: Yottaa State of Web Performance Optimization Group Webinar

24

In Summary

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

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

Page 21: Yottaa State of Web Performance Optimization Group Webinar

25

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