Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing mobile and cross device experiences - CDN Summit 2014


Published on

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.

  • Be the first to comment

  • Be the first to like this

Optimizing mobile and cross device experiences - CDN Summit 2014

  1. 1. @aweil #appsequencing Optimizing Mobile Engagement And Cross-Device Experiences w w w . y o t t a a . c o m 1
  2. 2. @aweil #appsequencing w w w . y o t t a a . c o m 2 Mobile Moments are Increasing
  3. 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. 4. @aweil #appsequencing w w w . y o t t a a . c o m 4 All the Fuss? Omni-device Consumption Patterns
  5. 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. 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. 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. 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. 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. 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. 11. @aweil #appsequencing w w w . y o t t a a . c o m 11 Case Study:
  12. 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: Engagement Components
  13. 13. @aweil #appsequencing 3rd party P1: Facebook timeline widget w w w . y o t t a a . c o m 13 Case Study: AppSequencing ID Facebook-script Priority 1 Sequencing Defer Action Delay 5000 ms
  14. 14. @aweil #appsequencing 3rd Party P2: Facebook callback w w w . y o t t a a . c o m 14 Case Study: AppSequencing ID All.js Priority 2 Sequencing Defer Action Delay 5000 ms
  15. 15. @aweil #appsequencing 3rd Party P3: Jira feedback w w w . y o t t a a . c o m 15 Case Study: AppSequencing ID Jira-issue-plugin Priority 3 Sequencing Lazy load Action Div, 5000 ms
  16. 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: AppSequencing ID zopim.js Priority 4 Sequencing Lazy load Action 5000 ms
  17. 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: AppSequencing ID SiteSealPanel Priority 4 Delay Type Lazy load
  18. 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. 19. @aweil #appsequencing w w w . y o t t a a . c o m 19 Case Study: Gearhead connection efficiency
  20. 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. 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. 22. @aweil #appsequencing w w w . y o t t a a . c o m 22 THANK YOU