Page 1
3 Tips to Deliver Fast Performance Across Mobile WebPlease Standby: Webinar to Begin Shortly Unable to listen via your speakers? Dial in:
Toll Free: 1 (866) 952-8437Access Code: 888-100-511
International: Click “telephone” in audio section,then click “additional numbers”
Page 2
3 Tips to Deliver Fast Performance Across Mobile Web
Klaus EnzenhoferSenior Technology Strategist, Dynatrace
Stefan BaumgartnerWeb Development, Dynatrace
Page 3
3 Tips to Deliver Fast Performance Across Mobile WebStefan Baumgartner @ddprrtKlaus Enzenhofer @kenzenhofer
Page 5
4.5 sec 15 sec
Why?
Page 6
NetworkSame Page
4.5 sec 15 secSanity Check
Browser CheckChrome 49 Chrome Mobile 33
Server SideLocal WLANLocal WLAN
Only difference is Browser & Device
Page 7
Why did they look at the performance on the mobile device?
Page 8
Google - Mobile Friendliness Campaign?!
Page 9
Change in their compensations
plan!
Page 10
Contract SLA: Average Response Time < 3
sec
User
on Desktop + Mobile
Page 12
Let’s talk about response time
Page 13
NetworkSame Page
4.5 sec 15 secSanity Check
Browser CheckChrome 49 Chrome Mobile 33
Server SideLocal WLANLocal WLAN
Page 14
4.5 sec 15 sec
UserDeveloper Operator
Page 16
Let‘s take a look at the timings!Navigation Start: 0 ms
Domain Lookup End: 269 ms
Connect End: 330 ms
Response Start: 517 ms
Response End:518 ms
Dom Loading: 519 ms
Dom Interactive: 519 ms
DomContentLoaded Event End: 520 ms
Dom Complete: 520 ms
Load Event End:522 ms
Page 17
0.5 sec 0.5 sec
Developer
Page 21
DNS Lookup
Initial connection
TTFB
(HTML)Download
Life of an URL request
Page 22
Starting here, we are able to control …
Page 23
<script src=“angular.js”> blocking!
Page 24
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
Page 25
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
start render
Page 26
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
start renderresponse time
Page 27
The impact of a JavaScript error
Page 28
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
start render?
Page 29
Important content first Everthing else is an
enhancement
Page 30
Single page application frameworks are aware of this trend
- As long as you have valid routes (= URLs), you have the ability to render the state on the server
- The first two requests are the document and the styles of your application
- Then the JS framework kicks in
Page 31
Server-side rendering for SPA
Page 32
Brow
ser
App
Serv
ing
asse
tsAP
I Ser
ver
GET /app
JavaScript payload
GET /api/users
JSON payload
GET /api/posts
GET /api/pages
JSON payload
JSON payload
Send index.html
Request JS application
Page 33
Brow
ser
App
Uni
vers
al re
nder
ing
API S
erve
r
GET /app
JavaScript payload
GET /api/users
JSON payload
GET /api/posts
GET /api/pages
JSON payload
JSON payload
Initial render HTML + CSS
Request JS application
Page 37
4.5 sec 6 sec
UserDeveloper Operator
Page 39
The CDN bill exploded!
Page 40
285 Resources for an initial Page Load
151 CSS and 121 JavaScript files
Page 41
~200 Resources had larger Header than Body
Page 43
Mobile Data is expensive
Page 44
https
://w
hatd
oesm
ysite
cost
.com
Page 46
http://cdn.shopify.com/s/files/1/1462/9702/articles/26_cangoroo_1024x1024.jpg?v=1473016235
Page 49
HTTP Archive – Transfer Size Trend
http://httparchive.org/trends.php
Average Size ~2 500 KB By 1.6 € per 100 KB
40 € to get started!!!!
Page 51
There’s lots of ways to reduce the payload
Page 52
Responsive images
Page 54
<img src=”screenshot-600.png” srcset="screenshot-200.png 200w, screenshot-400.png 400w, screenshot-600.png 600w, screenshot-800.png 800w, screenshot-1000.png 1000w, screenshot-1200.png 1200w, screenshot-1400.png 1400w, screenshot-1600.png 1600w” sizes="(min-width: 900px) 50vw, 100vw" alt=”Super screenshot of our product.">
Page 55
<img src=”screenshot-600.png” srcset="screenshot-200.png 200w, screenshot-400.png 400w, screenshot-600.png 600w, screenshot-800.png 800w, screenshot-1000.png 1000w, screenshot-1200.png 1200w, screenshot-1400.png 1400w, screenshot-1600.png 1600w” sizes="(min-width: 900px) 50vw, 100vw" alt=”Super screenshot of our product.">
These sources are available. For each “width unit”there’s a reduced version of our original screenshot
The sizes define which source to choose from. Retina screensare also checked
A low-res fallback image for browsers that don’t know srcset
Page 62
4.5 sec 6 sec
UserDeveloper Operator
Page 63
3. Now for the returning visitor
Page 68
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); });}
Page 69
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); }) );});
var CACHE_NAME = 'my-site-cache-v1';var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) );});
Page 71
2 sec 2.5 sec
UserDeveloper Operator
Page 72
4.5 sec 15 secUserDeveloper Operator
UserDeveloper Operator
How to?
2.5 sec2 sec
Page 73
4.5 sec 15 secUserDeveloper Operator
UserDeveloper Operator
How to?
2.5 sec2 sec
Happy Developer != Happy User
Your user might travel and mobile data is expensive
The returning user will appriciate your caching strategy
Page 74
You don‘t know how happy your users are?
https://www.dynatrace.com/trial/
Page 75
Thank you!Stefan Baumgartner
@ddpprtKlaus Enzenhofer
@kenzenhofer
Page 76
Connect with us!
Participate in our Forum :community.dynatrace.com
Like us on Facebook :facebook.com/dynatrace
Follow us on LinkedIn :linkedin.com/company/dynatrace
Follow us on Twitter :twitter.com/dynatrace
Watch our Videos & Demos :youtube.com/dynatrace
Read our Blog : application-performance-blog.com