Mobile Trends in Universal RUM Solutions

CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016

Mobile Trends in Universal RUMLauren YoungerNic 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

https://www.forrester.com/go?objectid=RES127942


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

http://www.pewglobal.org/2016/02/22/smartphone-ownership-and-internet-usage-continues-to-climb-in-emerging-economies/

http://www.pewglobal.org/2016/02/22/smartphone-ownership-and-internet-usage-continues-to-climb-in-emerging-economies/


• 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 configo Easy to configure. Predefined list of metrics is sent to vendor

• <amp-analytics> with custom configo 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 pixelso 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/

Technology

Mobile Trends in Universal RUM Solutions