The document discusses the impact of mobile internet usage and the evolution of web performance metrics over the years. It highlights the significant growth in user access via mobile devices compared to desktops, along with challenges in page load times and the importance of web performance APIs. Key technologies such as the Paint Timing API and the Network Information API are mentioned as tools to enhance developers' understanding of performance and user experience.

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.