3 Tips to Deliver Fast Performance Across Mobile Web On-Demand Webinar Seems like everyone’s doing Responsive Web Design these days! Are you using React, Angular or others to create a mobile-friendly web experience? Newsflash: Mobile-friendly doesn’t always equal customer-friendly, when it comes to performance. We’re talking about 60% of your traffic—how do you avoid disaster? Learn the basics of high-performance mobile development through the examination of real-world, performance-killing code examples. You’ll also hear about: Why 4.5 seconds on Chrome can be 15 seconds on a Galaxy S5 Chromium How to identify major issues within mobile page construction Best practices for managing CSS and JavaScript Things to consider going global with your Web application Join web performance experts Klaus Enzenhofer and Stefan Baumgartner from Dynatrace to ensure your mobile properties are delighting your customers!

1. 3 Tips to Deliver Fast Performance
Across Mobile Web
Please Standby: Webinar to Begin
Shortly
Unable to listen via your speakers? Dial in:
Toll Free: 1 (866) 952-8437
Access Code: 888-100-511
International: Click “telephone” in audio section,
then click “additional numbers”

2. 3 Tips to Deliver Fast Performance
Across Mobile Web
Klaus Enzenhofer
Senior Technology Strategist, Dynatrace
Stefan Baumgartner
Web Development, Dynatrace

3. 3 Tips to Deliver Fast Performance
Across Mobile Web
Stefan Baumgartner @ddprrt
Klaus Enzenhofer @kenzenhofer

4. Who we are

5. 4.5 sec 15 sec
Why?

6. Network
Same Page
4.5 sec 15 secSanity Check
Browser CheckChrome 49 Chrome Mobile 33
Server Side
Local WLANLocal WLAN
Only difference is Browser & Device

7. Why did they look at the performance
on the mobile device?

8. Google - Mobile Friendliness Campaign?!

9. Change in their
compensations plan!

10. Contract SLA:
Average Response Time < 3 sec
User
on Desktop + Mobile

11. Good idea?!

12. Let’s talk about
response time

13. Network
Same Page
4.5 sec 15 secSanity Check
Browser CheckChrome 49 Chrome Mobile 33
Server Side
Local WLANLocal WLAN

14. 4.5 sec 15 sec
UserDeveloper Operator

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

17. 0.5 sec 0.5 sec
Developer

18. User Operator

19. User

21. DNS Lookup
Initial
connection
TTFB
(HTML)
Download
Life of an URL request

22. Starting here, we are able to
control …

23. <script src=“angular.js”> blocking!

24. <script src=“angular.js”> blocking!
<script src=“main.js”> blocking!

25. <script src=“angular.js”> blocking!
<script src=“main.js”> blocking!
start render

26. <script src=“angular.js”> blocking!
<script src=“main.js”> blocking!
start renderresponse time

27. The impact of a
JavaScript error

28. <script src=“angular.js”> blocking!
<script src=“main.js”> blocking!
start render?

29. Important content first
Everthing else is an enhancement

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

31. Server-side
rendering for SPA

32. Browser
App
ServingassetsAPIServer
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

33. Browser
App
UniversalrenderingAPIServer
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

37. 4.5 sec 6 sec
UserDeveloper Operator

38. Operator

39. The CDN bill exploded!

40. 285 Resources for an initial Page Load
151 CSS and 121 JavaScript files

41. ~200 Resources had larger Header than Body

42. User

43. Mobile Data is
expensive

44. https://whatdoesmysitecost.com

46. http://cdn.shopify.com/s/files/1/1462/9702/articles/26_cangoroo_1024x1024.jpg?v=1473016235

47. Back Home

48. Back Home

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!!!!

50. 2. Page weight

51. There’s lots of ways to reduce
the payload

52. Responsive images

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.">

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 screens
are also checked
A low-res fallback image for browsers that don’t know srcset

56. Reduce styles

58. Tree shaking

62. 4.5 sec 6 sec
UserDeveloper Operator

63. 3. Now for the
returning visitor

64. Service worker

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);
});
}

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);
})
);
});

71. 2 sec 2.5 sec
UserDeveloper Operator

72. 4.5 sec 15 sec
UserDeveloper Operator
UserDeveloper Operator
How to?
2.5 sec2 sec

73. 4.5 sec 15 sec
UserDeveloper 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

74. You don‘t know how happy your users are?
https://www.dynatrace.com/trial/

75. Thank you!
Stefan Baumgartner
@ddpprt
Klaus Enzenhofer
@kenzenhofer

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