Optimizing mobile and cross device experiences - CDN Summit 2014
•Download as PPTX, PDF•
0 likes•562 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (7)
Similar to Optimizing mobile and cross device experiences - CDN Summit 2014
Similar to Optimizing mobile and cross device experiences - CDN Summit 2014 (20)
Recently uploaded
Recently uploaded (17)
Optimizing mobile and cross device experiences - CDN Summit 2014
- 1. @aweil #appsequencing Optimizing Mobile Engagement And Cross-Device Experiences w w w . y o t t a a . c o m 1
- 2. @aweil #appsequencing w w w . y o t t a a . c o m 2 Mobile Moments are Increasing
- 3. @aweil #appsequencing w w w . y o t t a a . c o m 3 But Desktop Still Dominates Based on a random sample of > 7bn shopping sessions via Monetate
- 4. @aweil #appsequencing w w w . y o t t a a . c o m 4 All the Fuss? Omni-device Consumption Patterns
- 5. @aweil #appsequencing w w w . y o t t a a . c o m 5 Site Delivery Trends: The troublesome “up and to the right” Images Javascript Via HTTPArchive, May ‘13-’14
- 6. @aweil #appsequencing Cannot impact 3rd party dynamic content like social media or ads CONTENT DELIVERY NETWORKS w w w . y o t t a a . c o m 6 Growing Engagement Challenges PAGELOADTIME ITEFFORT&TIME 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 pace with ongoing Marketing needs Cannot control page load behavior, content priority FRONTEND OPTIMIZATION Manual effort for every content change DO IT YOURSELF Desktop Mobile Worldwide sharing Q114
- 7. @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
- 8. @aweil #appsequencing w w w . y o t t a a . c o m 8 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 Versioning CDN Treats Content weight, round trips Good for Efficient asset delivery, rendering Challenges Visitor context Device capabilities Ongoing care & feeding FEO
- 9. @aweil #appsequencing w w w . y o t t a a . c o m 9 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
- 10. @aweil #appsequencing Separate page into fragments Inject JavaScript – RESS – Dynamic Serving Apply priority, order to fragments – Visitor Context – On-page Interaction w w w . y o t t a a . c o m 10 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 Social3
- 11. @aweil #appsequencing w w w . y o t t a a . c o m 11 Case Study: Gearhead.com
- 12. @aweil #appsequencing Facebook timeline Jira feedback Zopim message Trust icons w w w . y o t t a a . c o m 12 Case Study: Gearhead.com Engagement Components
- 13. @aweil #appsequencing 3rd party P1: Facebook timeline widget w w w . y o t t a a . c o m 13 Case Study: Gearhead.com AppSequencing ID Facebook-script Priority 1 Sequencing Defer Action Delay 5000 ms
- 14. @aweil #appsequencing 3rd Party P2: Facebook callback w w w . y o t t a a . c o m 14 Case Study: Gearhead.com AppSequencing ID All.js Priority 2 Sequencing Defer Action Delay 5000 ms
- 15. @aweil #appsequencing 3rd Party P3: Jira feedback w w w . y o t t a a . c o m 15 Case Study: Gearhead.com AppSequencing ID Jira-issue-plugin Priority 3 Sequencing Lazy load Action Div, 5000 ms
- 16. @aweil #appsequencing Delay load Zopim messages by 5 seconds w w w . y o t t a a . c o m 16 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 17 Case Study: Gearhead.com AppSequencing ID SiteSealPanel Priority 4 Delay Type Lazy load
- 18. @aweil #appsequencing Rapid engagement – First Paint: 1.5s – Start Render: 2.4s – Visually Complete: 3.1s Start Render includes 75% No origin code change All assets executed w w w . y o t t a a . c o m 18 Case Study: Gearhead Waterfall
- 19. @aweil #appsequencing w w w . y o t t a a . c o m 19 Case Study: Gearhead connection efficiency
- 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 w w w . y o t t a a . c o m 20 Case Study: Gearhead Results 27% Conversion Rate 7.5% Bounce Rate 12.6% Avg. Pageviews 20% Time on Site
- 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 w w w . y o t t a a . c o m 21 Optimization Requires a Holistic Approach
- 22. @aweil #appsequencing w w w . y o t t a a . c o m 22 THANK YOU
Editor's Notes
- desctivating unused modules in Wordpress or Joomla (some use the same libraries as well, like jQuery), converting JavaScript behavior to CSS (drop-down menus, and tabs for example), and deferred loading of uncalled JavaScript (Pagespeed is a good tool to find uncalled JavaScript before the onload event)