Optimizing mobile and cross device experiences - CDN Summit 2014

Post on 17-Nov-2014

239 views 3 download

Tags:

description

This presentation covers a new content delivery optimization called Application Sequencing that goes beyond simply accelerating page content and front end optimization, to prioritize and control the load order and timing of any page element to maximize visitor engagement. The result is a consistently superior experience without the high cost of ownership inherent in traditional CDN and FEO solutions. Learn how the technology works, which content owners are already using it and how it can help improve your way of doing business on the web.

transcript

@aweil #appsequencing

Optimizing Mobile EngagementAnd Cross-Device Experiences

w w w . y o t t a a . c o m 1

w w w . y o t t a a . c o m 2@aweil #appsequencing

Mobile Moments are Increasing

w w w . y o t t a a . c o m 3@aweil #appsequencing

But Desktop Still Dominates

Based on a random sample of > 7bn shopping sessions via Monetate

w w w . y o t t a a . c o m 4@aweil #appsequencing

All the Fuss? Omni-device Consumption Patterns

w w w . y o t t a a . c o m 5@aweil #appsequencing

Site Delivery Trends: The troublesome “up and to the right”

Images

Javascript

Via HTTPArchive, May ‘13-’14

w w w . y o t t a a . c o m 6@aweil #appsequencing

Cannot impact 3rd party dynamic content like social media or ads

CONTENT DELIVERY NETWORKS

Growing Engagement Challenges

PAG

E L

OA

D T

IME IT

EFFO

RT &

TIM

E

SITE LAUNCH ONGOING MAINTENANCE AND USER ENGAGEMENT EFFORTS

UPDATE CONTENT & IMAGES

ADD SOCIAL MEDIA WIDGETS

ADD REAL TIME PERSONALIZATION

A/B TEST PAGE CONTENT

Existing technology cannot keep pacewith ongoingMarketing needs Cannot control page load

behavior, content priority

FRONTEND OPTIMIZATION

Manual effort for every content change

DO IT YOURSELF

DesktopMobile

Worldwide sharing Q114

@aweil #appsequencing

Existing Optimization Technology Simply Doesn’t Work

DSA

CDN

FEO

ESI

ADN

w w w . y o t t a a . c o m 7

w w w . y o t t a a . c o m 8@aweil #appsequencing

The Challenge? Sites and their routes are more complex…

Treats Middle mile geographic latency

Good for Individual assets, streaming media

Challenges

Visitor context

Related assets

VersioningCDN

Treats Content weight, round trips

Good for Efficient asset delivery, rendering

Challenges

Visitor context

Device capabilities

Ongoing care & feedingFEO

w w w . y o t t a a . c o m 9@aweil #appsequencing

Visualizing the delivery and rendering challenge

Trust Icons

High-Res Images

Long-scrolling pages

Social Media

Dynamic Content

In Addition:• A/B Tests• Analytic tracking• Beacons• Chat• Personalization• Pixels• RWD w/out RESS

w w w . y o t t a a . c o m 10@aweil #appsequencing

Separate page into fragmentsInject JavaScript– RESS– Dynamic Serving

Apply priority, order to fragments– Visitor Context– On-page Interaction

AppSequencing adds context, priority and ordering

Ad 1

Top Nav

Lt Nav CTA 1Primary Content

Related 1

Related 2

Social 1

Ratings & Reviews

Footer

CTA 2

Social 2

Trust Icons

Ad 2

Soci

al 3

w w w . y o t t a a . c o m 11@aweil #appsequencing

Case Study: Gearhead.com

w w w . y o t t a a . c o m 12@aweil #appsequencing

Facebook timelineJira feedbackZopim messageTrust icons

Case Study: Gearhead.com Engagement Components

w w w . y o t t a a . c o m 13@aweil #appsequencing

3rd party P1: Facebook timeline widget

Case Study: Gearhead.com AppSequencing

ID Facebook-script

Priority 1

Sequencing Defer

Action Delay 5000 ms

w w w . y o t t a a . c o m 14@aweil #appsequencing

3rd Party P2: Facebook callback

Case Study: Gearhead.com AppSequencing

ID All.js

Priority 2

Sequencing Defer

Action Delay 5000 ms

w w w . y o t t a a . c o m 15@aweil #appsequencing

3rd Party P3: Jira feedback

Case Study: Gearhead.com AppSequencing

ID Jira-issue-plugin

Priority 3

Sequencing Lazy load

Action Div, 5000 ms

w w w . y o t t a a . c o m 16@aweil #appsequencing

Delay load Zopim messages by 5 seconds

Case Study: Gearhead.com AppSequencing

ID zopim.js

Priority 4

Sequencing Lazy load

Action 5000 ms

17@aweil #appsequencing

3rd Party P4: Lazy load trust icons

w w w . y o t t a a . c o m

Case Study: Gearhead.com AppSequencing

ID SiteSealPanel

Priority 4

Delay Type Lazy load

w w w . y o t t a a . c o m 18@aweil #appsequencing

Rapid engagement– First Paint: 1.5s– Start Render: 2.4s– Visually Complete: 3.1s

Start Render includes 75%No origin code changeAll assets executed

Case Study: Gearhead Waterfall

w w w . y o t t a a . c o m 19@aweil #appsequencing

Case Study: Gearhead connection efficiency

w w w . y o t t a a . c o m 20@aweil #appsequencing

Origin(al) Sequenced Difference

Fully Displayed 6.8 seconds 3.1 seconds 3.7 seconds faster

Page Weight 2.5 MB 900 KB 1.6 MB

Requests 193 103 90 fewer requests

Domains Accessed

19 11 8 fewer domains

Case Study: Gearhead Results

27%Conversion

Rate

7.5%Bounce Rate

12.6%Avg.

Pageviews

20%Time on Site

w w w . y o t t a a . c o m 21@aweil #appsequencing

Dynamic Serving

3rd Party (e.g. Ad, Social) Enablement

Analytic Insight

Global Caching

Traffic Management

Monitoring, Notifications and Triage

A/B Testing

Optimize Rendering

Optimization Requires a Holistic Approach

w w w . y o t t a a . c o m 22@aweil #appsequencing

THANK YOU