Mobile Trends in Universal RUM Solutions

CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016
Mobile Trends in Universal RUM
Lauren Younger
Nic Jansma

CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
Speakers
Nic Jansma
Senior Software Engineer
SOASTA
Lauren Younger
Director of Product Management
SOASTA

Why Are We Here?
• Market Outlook & Mobile Trends
• AMP = Accelerated Mobiles Pages
• SPA = Single Page Applications
• What exactly is “Universal RUM?”
• Implementation Examples

Mobile Usage Increasing
● Between 2014 and 2015, traffic from mobile devices
increased from 40% to 75% of total retail traffic.
● By 2020, smartphones and tablets are expected to
account for 48% — almost half — of ecommerce sales.

Mobile Users Spend More!
● Tablet users spend more than 50% more annually via
their tablets than they do via their desktops.
● Site owners need to invest in optimizing for this
audience.
Source Akamai Performance Matters: 9 Key Consumer Insights Report

So How Fast Do You Need to Be?
Every site is different - use RUM data to see how users
interact with your site and what 1 second costs you!
Source SOASTA mPulse

Engagement on Tablets vs. Phones
Users are more patient on their tablets than on their
phones!
• Load times are 26% slower on tablets
○ Tablet: 4.9 sec median load time, 17%
bounce rate
○ Mobile: 3.9 sec median load time, 24%
bounce rate
• But...Tablet users are nearly 30% more likely to
engage even with the longer delays
*Stats based on 573M mobile page views from SOASTA's data warehouse

Global Mobile Trends
• By the end of 2020, smartphones will be in the pockets of 91%
of global consumers*
• Mobile phones will reach 60% of e-commerce traffic by end of
2017**
*Source: “Forrester Research World Mobile And Smartphone Adoption Forecast, 2015 To 2020 (Global)" Forrester report
**Source: Salesforce.com study

Not All Mobile Networks Are the Same
Source: http://www.slideshare.net/tammyeverts/2016-mobile-state-of-the-union?ref=https://www.soasta.com/blog/22-mobile-web-performance-stats/
http://www.pewglobal.org/2016/02/22/smartphone-ownership-and-internet-usage-continues-to-climb-in-emerging-economies/
• While mobile networks
continue to improve, our
research shows that more
bandwidth isn’t a silver bullet
• Mobile usage continues to
increase in emerging
markets, most of which only
have access to 2G networks
• Corporate networks are one
of the slowest places mobile
users are connecting from

• iOS users generally get faster experiences than Android
• iOS users are more likely to engage with web content
• iOS: 4.0 sec median load time, 19% bounce rate
• Android: 5.1 sec median load time, 23% bounce rate
Mobile Performance Stats - by OS
*Stats based on 573M mobile page views from SOASTA's data warehouse

Page Size Continues to Grow!
Source: http://www.slideshare.net/tammyeverts/2016-mobile-state-of-the-union?ref=https://www.soasta.com/blog/22-mobile-web-performance-stats/

Page Size Continues to Grow!
Average page size
served to mobile
devices has
increased from
377KB to 1300KB in
the last 5 years!
Enter AMP & SPA!

Accelerated Mobile Pages a.k.a. AMP
• Open-source web framework that enables publishers to
create very fast pages for mobile devices
• Support for images, audio, video, advertising, menus, fonts,
CSS and more

AMP Prioritized in Search
• Google is prioritizing AMP sites
in their search results, placing
them prominently in their news
carousel
• Lots of incentive for sites to use
AMP!

Overview of AMP
• AMP supports a subset of HTML5 markup tags and adds some new
features
• AMP-specific markup tags are available to easily include third-party
content like Twitter, Youtube, Instagram, etc.
• Built-in page validation can check if the page conforms to the
specification
• High-speed global caching CDN — free of charge
• No external JavaScript allowed!

Performance Analytics for AMP Sites
Traditional Performance Monitoring Techniques and
AMP:
• Web server log analytics or server side Application
Performance Monitoring (APM)?
o Will not capture all traffic
• Synthetic monitoring?
o Without experience, will be difficult to estimate traffic patterns
• JavaScript in <script> tag?
o Not allowed
• JavaScript in <amp-iframe> child page?
o Sandboxed IFRAME disallows access to parent window object

AMP Has Built-in Analytics!
• <amp-analytics> with built in vendor config
o Easy to configure. Predefined list of metrics is sent to vendor
• <amp-analytics> with custom config
o Harder to configure but customizable
o Can send metrics to your own server
o GET or POST
o Configurable trigger events (visible, click, scroll, timer)
• <amp-pixel> tracking pixels
o GET query with URL substitution variables to gather metrics
3 ways to beacon analytics data :

mPulse AMP setup
• 1 line to enable the <amp-analytics> extension
<script async custom-element="amp-analytics" …>
• 1 line to configure mPulse with your API key
<amp-analytics type=“mpulse" …>
Only 2 lines of HTML to get started :

mPulse Brings RUM to AMP

AMP in RUM Waterfall Dashboard

Single Page Applications a.k.a. SPA
• Frameworks that enable faster page load time (in theory)
• Browser does not need to refresh all assets on every request
• Only changes are re-rendered with every request
• Common SPA frameworks
○ Angular
○ Backbone
○ Ember
○ React

SPA Monitoring Challenges
• The onload event no longer matters
• Soft navigations are not “real” navigations
• The browser won’t tell you when resources have been
downloaded
• Hard vs. Soft = different performance characteristics

SPA Monitoring Challenges - Example
• Onload event fires after
static resources load
• SPA frameworks load
many resources
dynamically after onload
event

SPA - Hard vs Soft Navigation
• Hard Navigation
○ The first time a visitor loads your app
○ Onload event irrelevant
○ Performance heavy
• Soft Navigation
○ Every route change after the first navigation
○ Not a “real” navigation
○ Onload event does not fire
○ Only “delta” of the view is re-rendered

mPulse Supports All SPA Frameworks
• Updated boomerang.js to measure SPAs:
○ Instead of listening to onload, we listen for all SPA
routing events
○ Begin monitoring the HTML for new resources
○ Wait until all resources have been fetched
○ Create our own “onload” for SPAs
○ Monitor ResourceTiming (=Waterfall) on all navigations
http://docs.soasta.com/boomerang/#single-page-apps

What is “Universal RUM?”
• Performance Management focus is shifting to the frontend
• RUM = “Real User Monitoring”
• “Universal RUM” = monitoring of all digital properties
o Across all brands
o Across all subdomains
o Across all platforms
o Across all OS’s
o Across all screen sizes
o Across all frameworks

mPulse = Universal RUM
• Only solution on the market with AMP support
• Has supported SPA over a year
• Supports ALL SPA frameworks, including custom
• Integrates APM data
• Integrates synthetic monitoring data
• Correlates Performance and Business metrics

Mobile Frameworks Aren’t Magic

Mobile Frameworks Aren’t Magic
• Slow TTFB due to server performance
• CDN malfunction
• Network delays and poor cellular throughput
• Slow mobile device hardware
• Resources not optimized for mobile (large images)
• Fonts can delay page rendering (default timeout of 3s)
Some reasons for slow page loads:

Outlook
• Continued development of AMP
• Facebook Instant Articles
• More SPA frameworks
Proliferation of SPA and accelerated mobile frameworks
will continue:

Takeaways
• Exodus to mobile screens is continuing
• Mobile frameworks will continue to grow
• Performance monitoring across multiple platforms and
screen sizes is imperative for business success
• Mobile frameworks aren’t magic - digital performance must
be managed
• Universal RUM solutions are required for a full digital view

Q&A
https://www.soasta.com/performance-monitoring/

Mobile Trends in Universal RUM Solutions

Recommandé

Recommandé

Contenu connexe

Plus de SOASTA

Plus de SOASTA (20)

Dernier

Dernier (20)

Mobile Trends in Universal RUM Solutions