![Page 1: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/2.jpg)
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 Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/3.jpg)
3 Tips to Deliver Fast Performance Across Mobile WebStefan Baumgartner @ddprrtKlaus Enzenhofer @kenzenhofer
![Page 4: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/4.jpg)
Who we are
![Page 5: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/5.jpg)
4.5 sec 15 sec
Why?
![Page 6: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/6.jpg)
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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/7.jpg)
Why did they look at the performance on the mobile device?
![Page 8: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/8.jpg)
Google - Mobile Friendliness Campaign?!
![Page 9: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/9.jpg)
Change in their compensations
plan!
![Page 10: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/10.jpg)
Contract SLA: Average Response Time < 3
sec
User
on Desktop + Mobile
![Page 11: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/11.jpg)
Good idea?!
![Page 12: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/12.jpg)
Let’s talk about response time
![Page 13: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/13.jpg)
NetworkSame Page
4.5 sec 15 secSanity Check
Browser CheckChrome 49 Chrome Mobile 33
Server SideLocal WLANLocal WLAN
![Page 14: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/14.jpg)
4.5 sec 15 sec
UserDeveloper Operator
![Page 15: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/15.jpg)
![Page 16: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/16.jpg)
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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/17.jpg)
0.5 sec 0.5 sec
Developer
![Page 18: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/18.jpg)
User Operator
![Page 19: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/19.jpg)
User
![Page 20: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/20.jpg)
![Page 21: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/21.jpg)
DNS Lookup
Initial connection
TTFB
(HTML)Download
Life of an URL request
![Page 22: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/22.jpg)
Starting here, we are able to control …
![Page 23: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/23.jpg)
<script src=“angular.js”> blocking!
![Page 24: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/24.jpg)
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
![Page 25: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/25.jpg)
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
start render
![Page 26: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/26.jpg)
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
start renderresponse time
![Page 27: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/27.jpg)
The impact of a JavaScript error
![Page 28: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/28.jpg)
<script src=“angular.js”> blocking!<script src=“main.js”> blocking!
start render?
![Page 29: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/29.jpg)
Important content first Everthing else is an
enhancement
![Page 30: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/30.jpg)
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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/31.jpg)
Server-side rendering for SPA
![Page 32: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/32.jpg)
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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/33.jpg)
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 34: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/34.jpg)
![Page 35: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/35.jpg)
![Page 36: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/36.jpg)
![Page 37: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/37.jpg)
4.5 sec 6 sec
UserDeveloper Operator
![Page 38: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/38.jpg)
Operator
![Page 39: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/39.jpg)
The CDN bill exploded!
![Page 40: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/40.jpg)
285 Resources for an initial Page Load
151 CSS and 121 JavaScript files
![Page 41: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/41.jpg)
~200 Resources had larger Header than Body
![Page 42: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/42.jpg)
User
![Page 43: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/43.jpg)
Mobile Data is expensive
![Page 44: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/44.jpg)
https
://w
hatd
oesm
ysite
cost
.com
![Page 45: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/45.jpg)
![Page 46: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/46.jpg)
http://cdn.shopify.com/s/files/1/1462/9702/articles/26_cangoroo_1024x1024.jpg?v=1473016235
![Page 47: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/47.jpg)
Back Home
![Page 48: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/48.jpg)
Back Home
![Page 49: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/49.jpg)
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 50: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/50.jpg)
2. Page weight
![Page 51: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/51.jpg)
There’s lots of ways to reduce the payload
![Page 52: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/52.jpg)
Responsive images
![Page 53: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/53.jpg)
![Page 54: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/54.jpg)
<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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/55.jpg)
<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 56: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/56.jpg)
Reduce styles
![Page 57: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/57.jpg)
![Page 58: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/58.jpg)
Tree shaking
![Page 59: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/59.jpg)
![Page 60: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/60.jpg)
![Page 61: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/61.jpg)
![Page 62: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/62.jpg)
4.5 sec 6 sec
UserDeveloper Operator
![Page 63: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/63.jpg)
3. Now for the returning visitor
![Page 64: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/64.jpg)
Service worker
![Page 65: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/65.jpg)
![Page 66: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/66.jpg)
![Page 67: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/67.jpg)
![Page 68: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/68.jpg)
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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/69.jpg)
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 70: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/70.jpg)
![Page 71: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/71.jpg)
2 sec 2.5 sec
UserDeveloper Operator
![Page 72: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/72.jpg)
4.5 sec 15 secUserDeveloper Operator
UserDeveloper Operator
How to?
2.5 sec2 sec
![Page 73: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/73.jpg)
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: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/74.jpg)
You don‘t know how happy your users are?
https://www.dynatrace.com/trial/
![Page 75: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/75.jpg)
Thank you!Stefan Baumgartner
@ddpprtKlaus Enzenhofer
@kenzenhofer
![Page 76: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/76.jpg)
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
![Page 77: 3 Tips to Deliver Fast Performance Across Mobile Web](https://reader033.vdocuments.us/reader033/viewer/2022042907/587dd4a81a28ab5b5b8b605b/html5/thumbnails/77.jpg)