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

3. thissoftwareisgoingtochangeeverything.
-markandreessen
https://www.youtube.com/watch?v=_L3Y2_YiT-A

4. forme,thingsstartedexplodingwiththe
inventionofthebrowserMOSAIC,because
suddenlytheinternetwasaccessibletothe
averageperson.
-kimpolese
https://www.youtube.com/watch?v=_L3Y2_YiT-A

5. 65Mnewusersin18monthsin1993.

6. 4,156,932,140usersonlinetodayin2018.
-internetworldstatshttps://www.internetworldstats.com/stats.htm

8. “Mobileandtabletinternetusageexceeds
desktopforfirsttimeworldwide.”
- StatsContersNov2016.http://gs.statcounter.com/press/2016

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

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

11. https://www.nytimes.com/2017/09/15/business/amish-technology.html

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

14. BYTES
0
300
600
900
1200
p10 p25 p50 p75 p90
desktop▲36.3% mobile▲28.8%
JavascriptBytes
- https://httparchive.org/

15. BYTES
0
1250
2500
3750
5000
p10 p25 p50 p75 p90
desktop▲8.4% mobile▲55.8%
ImageBytes
- https://httparchive.org/

16. “53%ofvisitorswillabandonapagethat
takes3secondsormoretoload.”
–DoubleClickbyGoogle
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

17. “77%ofpagesloadin10secondsormore,
withtheavgpageloadingin19seconds.”
–DoubleClickbyGoogle
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

18. Thisisthereality.

19. FireBug.

20. WebperformanceAPIsarethebrowser’s
solution torealworldmeasurements.

21. PaintTimingAPI.

22. PaintTimingAPI.
FirstPaint.
FirstContentfulPaint.
FirstMeaningfulPaint.

23. PaintTimingAPI.
FirstPaint.

24. PaintTimingAPI.
FirstPaint.
FirstPaint reportsthetimewhenthebrowserfirstrenderedafter
navigation.Thisexcludesthedefaultbackgroundpaint,butincludes
non-defaultbackgroundpaintandtheenclosingboxofaniframe.
Thisisthefirstkeymomentdeveloperscareaboutinpageload–
whenthebrowserhasstartedtorenderthepage.

25. PaintTimingAPI.

26. PaintTimingAPI.
FirstContentfulPaint.
FirstContentfulPaint reportsthetimewhenthebrowserfirst
renderedanytext,image(includingbackgroundimages),non-white
canvasorSVG.Thisexcludesanycontentofiframes,butincludestext
withpendingwebfonts.Thisisthefirsttimeuserscouldstart
consumingpagecontent.

27. PaintTimingAPI.
FirstMeaningfulPaint.
Firstmeaningfulpaint=Paintthatfollowsbiggestlayoutchange

28. PaintTimingAPI.
FirstMeaningfulPaint.
Firstmeaningfulpaint=Paintthatfollowsbiggestlayoutchange

29. PaintTimingAPI.
https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming

30. IntersectionObserverAPI.

31. IntersectionObserverAPI.
TheIntersectionObserverAPIenables
developerstounderstandthevisibilityand
positionoftargetDOMelementsrelativeto
anintersectionroot.

32. IntersectionObserverAPI.
https://mzl.la/2ywnOCV

33. MediaCapabilitiesAPI.

34. MediaCapabilitiesAPI.
AnAPItoquerytheuseragentwithregardstothe
decodingandencodingabilitiesofthedevicebasedon
informationsuchasthecodecs,profile,resolution,
bitrates,etc.TheAPIexposesinformationsuchas
whethertheplaybackshouldbesmoothandpower
efficient.

35. MediaCapabilitiesAPI.
https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities

36. NetworkInformationAPI.

37. NetworkInformationAPI.
TheNetworkInformationAPIenablesweb
applicationstoaccessinformationabout
thenetworkconnectioninusebythe
device.
https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation

38. NetworkInformationAPI.
downlink
effectiveType
rtt
save-data

39. NetworkInformationAPI.
downlink
effectiveType
rtt
save-data

40. NetworkInformationAPI.
downlink
effectiveType
rtt
save-data

41. NetworkInformationAPI.
downlink
effectiveType:slow-2G,2G,3G,4G.
rtt
save-data

42. NetworkInformationAPI.
downlink
effectiveType
rtt
save-data

43. NetworkInformationAPI.
downlink
effectiveType
rtt
save-data

44. NetworkInformationAPI.
https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation

45. BatteryStatusAPI. 🔋
https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation

46. BatteryStatusAPI. 🔋
TheBatteryStatusAPIprovidesinformation
aboutthesystem'sbatterychargelevelandlets
youbenotifiedbyeventsthataresentwhenthe
batterylevelorchargingstatuschange.

47. b it.ly/MarchMadnessCrUX

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

49. ENGINEERING
CONTENT
SALES/MRKT

50. ServerTimingAPI.
LongTaskAPI.
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceServerTiming
https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API

51. Hints
BrowserInterventions.

52. FIN.