Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

3 Tips to Deliver Fast Performance Across Mobile Web

372 vues

Publié le

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!

Publié dans : Technologie
  • Login to see the comments

  • Soyez le premier à aimer ceci

3 Tips to Deliver Fast Performance Across Mobile Web

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

×