Upload
soasta
View
239
Download
0
Embed Size (px)
Citation preview
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
Why Are We Here?
• Market Outlook & Mobile Trends
• AMP = Accelerated Mobiles Pages
• SPA = Single Page Applications
• What exactly is “Universal RUM?”
• Implementation Examples
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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.
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
• 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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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/
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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!
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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!
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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!
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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 :
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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 :
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
AMP in RUM Waterfall Dashboard
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
SPA Monitoring Challenges - Example
• Onload event fires after
static resources load
• SPA frameworks load
many resources
dynamically after onload
event
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
Mobile Frameworks Aren’t Magic
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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:
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
Outlook
• Continued development of AMP
• Facebook Instant Articles
• More SPA frameworks
Proliferation of SPA and accelerated mobile frameworks
will continue:
CONFIDENTIAL – Not for Distribution | ©2016 SOASTA, All rights reserved.
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