Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Planet of APIs: A Tale of Performance & User Experience

100 views

Published on

Henri Helvetica

Overview
A quarter century has passed since the first browser was released. Tim Berners-Lee’s pioneering followed by Marc Andreessen’s groundbreaking Mosaic came Navigator, spawning an industry that regaled in loading information onto a screen for users of the internet all over. But today in 2018, complexities have resulted in webpage loading and rendering intricacies. Added, consumer comportment has shifted dramatically, leaving developers with new found duties, notably: the disciplined delivery of data.

We once referred to raw timing data provided by the browser to measure performance. The modern web experience soon demanded metrics beyond DOMContentLoaded and onLoad events, and introduced more complex measurements such as Paint Timing APIs, Network Information APIs and Time To Interactive to name a few. Planet Of The APIs peruses present-day and even experimental practices employed in measuring web apps in the on going pursuit of providing stellar and performant user experiences.

Objective
To provide developers with knowledge and understanding of modern performance APIs

Target Audience
This is for the developer who ships web based products

Assumed Audience Knowledge
A basic understanding of web performance

Level
Intermediate

Five Things Audience Members Will Learn
Modern APIs: their need and uses
Understanding hardware restrictions
The challenges of present day resource loading
Prioritizing interactivity
Auditing with the available tools

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Planet of APIs: A Tale of Performance & User Experience

  1. 1. thissoftwareisgoingtochangeeverything. -markandreessen https://www.youtube.com/watch?v=_L3Y2_YiT-A
  2. 2. forme,thingsstartedexplodingwiththe inventionofthebrowserMOSAIC,because suddenlytheinternetwasaccessibletothe averageperson. -kimpolese https://www.youtube.com/watch?v=_L3Y2_YiT-A
  3. 3. 65Mnewusersin18monthsin1993.
  4. 4. 4,156,932,140usersonlinetodayin2018. -internetworldstatshttps://www.internetworldstats.com/stats.htm
  5. 5. “Mobileandtabletinternetusageexceeds desktopforfirsttimeworldwide.” - StatsContersNov2016.http://gs.statcounter.com/press/2016
  6. 6. Africa mobile:63.77% desktop:33.68% tablet:2.55% Asia mobile:65.05% desktop:33.02% tablet:1.92% India mobile:77.81% desktop:21.57% tablet:0.61% mobile-vs-desktop
  7. 7. Africa mobile:63.77% desktop:33.68% tablet:2.55% Asia mobile:65.05% desktop:33.02% tablet:1.92% India mobile:77.81% desktop:21.57% tablet:0.61% mobile-vs-desktop 9941% * 1670% * 9242% * - InternetWorldStats.https://www.internetworldstats.com- *%usergrowth2000-2018
  8. 8. https://www.nytimes.com/2017/09/15/business/amish-technology.html
  9. 9. 2G 40% 3G 31% 4G 29% -GSMAIntelligence-mobileglobaleconomy https://www.gsma.com/mobileeconomy/wp-content/uploads/2018/02/The-Mobile-Economy-Global-2018.pdf GlobalNetworkConnections
  10. 10. BYTES 0 300 600 900 1200 p10 p25 p50 p75 p90 desktop▲36.3% mobile▲28.8% JavascriptBytes - https://httparchive.org/
  11. 11. BYTES 0 1250 2500 3750 5000 p10 p25 p50 p75 p90 desktop▲8.4% mobile▲55.8% ImageBytes - https://httparchive.org/
  12. 12. “53%ofvisitorswillabandonapagethat takes3secondsormoretoload.” –DoubleClickbyGoogle https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  13. 13. “77%ofpagesloadin10secondsormore, withtheavgpageloadingin19seconds.” –DoubleClickbyGoogle https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  14. 14. Thisisthereality.
  15. 15. FireBug.
  16. 16. WebperformanceAPIsarethebrowser’s solution torealworldmeasurements.
  17. 17. PaintTimingAPI.
  18. 18. PaintTimingAPI. FirstPaint. FirstContentfulPaint. FirstMeaningfulPaint.
  19. 19. PaintTimingAPI. FirstPaint.
  20. 20. PaintTimingAPI. FirstPaint. FirstPaint reportsthetimewhenthebrowserfirstrenderedafter navigation.Thisexcludesthedefaultbackgroundpaint,butincludes non-defaultbackgroundpaintandtheenclosingboxofaniframe. Thisisthefirstkeymomentdeveloperscareaboutinpageload– whenthebrowserhasstartedtorenderthepage.
  21. 21. PaintTimingAPI.
  22. 22. PaintTimingAPI. FirstContentfulPaint. FirstContentfulPaint reportsthetimewhenthebrowserfirst renderedanytext,image(includingbackgroundimages),non-white canvasorSVG.Thisexcludesanycontentofiframes,butincludestext withpendingwebfonts.Thisisthefirsttimeuserscouldstart consumingpagecontent.
  23. 23. PaintTimingAPI. FirstMeaningfulPaint. Firstmeaningfulpaint=Paintthatfollowsbiggestlayoutchange
  24. 24. PaintTimingAPI. FirstMeaningfulPaint. Firstmeaningfulpaint=Paintthatfollowsbiggestlayoutchange
  25. 25. PaintTimingAPI. https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming
  26. 26. IntersectionObserverAPI.
  27. 27. IntersectionObserverAPI. TheIntersectionObserverAPIenables developerstounderstandthevisibilityand positionoftargetDOMelementsrelativeto anintersectionroot.
  28. 28. IntersectionObserverAPI. https://mzl.la/2ywnOCV
  29. 29. MediaCapabilitiesAPI.
  30. 30. MediaCapabilitiesAPI. AnAPItoquerytheuseragentwithregardstothe decodingandencodingabilitiesofthedevicebasedon informationsuchasthecodecs,profile,resolution, bitrates,etc.TheAPIexposesinformationsuchas whethertheplaybackshouldbesmoothandpower efficient.
  31. 31. MediaCapabilitiesAPI. https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities
  32. 32. NetworkInformationAPI.
  33. 33. NetworkInformationAPI. TheNetworkInformationAPIenablesweb applicationstoaccessinformationabout thenetworkconnectioninusebythe device. https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
  34. 34. NetworkInformationAPI. downlink effectiveType rtt save-data
  35. 35. NetworkInformationAPI. downlink effectiveType rtt save-data
  36. 36. NetworkInformationAPI. downlink effectiveType rtt save-data
  37. 37. NetworkInformationAPI. downlink effectiveType:slow-2G,2G,3G,4G. rtt save-data
  38. 38. NetworkInformationAPI. downlink effectiveType rtt save-data
  39. 39. NetworkInformationAPI. downlink effectiveType rtt save-data
  40. 40. NetworkInformationAPI. https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
  41. 41. BatteryStatusAPI. 🔋 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
  42. 42. BatteryStatusAPI. 🔋 TheBatteryStatusAPIprovidesinformation aboutthesystem'sbatterychargelevelandlets youbenotifiedbyeventsthataresentwhenthe batterylevelorchargingstatuschange.
  43. 43. b it.ly/MarchMadnessCrUX
  44. 44. BLEACHERREPORT %USERS 0 3 6 9 12 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3500 4000 4500 5000 FCP-SportsBlogs.
  45. 45. ENGINEERING CONTENT SALES/MRKT
  46. 46. ServerTimingAPI. LongTaskAPI. https://developer.mozilla.org/en-US/docs/Web/API/PerformanceServerTiming https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API
  47. 47. Hints BrowserInterventions.
  48. 48. FIN.

×