optimizing mobile and cross device experiences - cdn summit 2014
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