🇳🇱 Frontmania 2022 - Web Performance APIs

ℹ️ Web performance APIs you (probably) didn't know existed

Responsiveness to interaction is crucial for our apps and you’ve probably heard about the amazing tools we have to measure web performance. But did you know there are many performance APIs native to the Web Platform?

In this talk, we’ll see how to leverage the power of some of them to reliably measure responsiveness and correctly identify culprits for bad experiences.

Transcript

1. Hello, Frontmania ✋ 🇳🇱
   WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED • THE 5TH OF OCTOBER, 2022.
   

   View Slide

2. WEB PERFORMANCE APIS
   YOU (PROBABLY) DIDN’T KNOW EXISTED
   MATHEUS ALBUQUERQUE
   

   View Slide

3. Å
   I’M MATHEUS 🙋
   ↝ @YTHECOMBINATOR ON THE
   WEB
   
   
   ↝ SR. SOFTWARE ENGINEER
   @MEDALLIA
   
   
   ↝ MENTOR @TECHLABS
   

   View Slide

4. Disclaimers
   WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
   

   View Slide

5. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
   #1
   THE IDEA BEHIND
   THIS SESSION IS
   HEAVILY INSPIRED
   BY ZENO'S
   SESSION BACK IN
   2016.
   

   View Slide

6. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
   #1
   SESSION BACK IN
   2016.
   

   View Slide

7. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
   #2 45 MINUTES IS A
   LOT OF TIME, I
   KNOW…
   🥱
   

   View Slide

8. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
   #2
   LOT OF TIME, I
   KNOW…
   🥱
   

   View Slide

9. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
   #3
   🤯 = DEEP DIVE,
   FURTHER
   DISCUSSIONS
   AFTER THE
   SESSION
   

   View Slide

10. Why am I
    
    
    here?
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

11. WEB PERFORMANCE APIS
    YOU (PROBABLY) DIDN’T KNOW EXISTED
    MATHEUS ALBUQUERQUE
    

    View Slide

12. WEB PERFORMANCE STUFF
    YOU ALREADY KNOW
    MATHEUS ALBUQUERQUE
    

    View Slide

13. ↝ HTTP/2
    
    
    ↝ COMPRESS JAVASCRIPT (E.G. WITH BROTLI) AND
    USE IMAGE CDNS (40–80% SAVINGS)
    
    
    ↝ OPTIMIZE THIRD-PARTIES (DEFER/REPLACE/
    UPDATE THEM)
    
    
    ↝ WORKERS TO OFF-LOAD THE MAIN THREAD
    YOU ALREADY KNOW…
    

    View Slide

14. — HTTPS://WWW.PATTERNS.DEV
    YOU ALREADY KNOW…
    

    View Slide

15. — HTTPS://WWW.PATTERNS.DEV
    YOU ALREADY KNOW…
    

    View Slide

16. #QUESTION 🤔
    
    
    We're all already doing (some of)
    these, right?
    

    View Slide

17. View Slide

18. Å
    

    View Slide

19. Å
    — APP DYNAMICS REPORT, LAST THREE MONTHS
    

    View Slide

20. Å
    — APP DYNAMICS REPORT, LAST THREE MONTHS
    

    View Slide

21. Å
    — APP DYNAMICS REPORT, LAST THREE MONTHS
    

    View Slide

22. Å
    FIXING WEB PERFORMANCE
    

    View Slide

23. Å
    FIXING WEB PERFORMANCE
    

    View Slide

24. This talk presents
    Why am I here?
    
    
    Measuring
    
    
    Measuring (with the platform)
    
    
    Optimizing (with the platform)
    
    
    Why are we here?
    
    
    Closing thoughts
    

    View Slide

25. This talk presents
    Why am I here?
    
    
    Measuring
    
    
    Measuring (with the platform)
    
    
    Optimizing (with the platform)
    
    
    Why are we here?
    
    
    Closing thoughts
    

    View Slide

26. Measuring
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

27. #QUESTION 🤔
    
    
    What does it mean to be fast?
    

    View Slide

28. #QUESTION 🤔
    
    
    What does it mean to be fast?
    
    
    If you were to summarize web
    performance in one metric, what’d be
    your pick?
    

    View Slide

29. #QUESTION 🤔
    
    
    What does it mean to be fast?
    
    
    If you were to summarize web
    performance in one metric, what’d be
    your pick?
    
    
    e.g. load time, responsiveness, etc.
    

    View Slide

30. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    If you were to summarize
    web performance in one
    metric, what’d be your
    pick?
    

    View Slide

31. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    If you were to summarize
    web performance in one
    metric, what’d be your
    pick?
    1st/2nd/3rd ANSWERS ↝ REACT
    BRUSSELS DISCOUNT CODE 🇧🇪
    
    
    OTHERS ↝ STICKERS 💅
    

    View Slide

32. View Slide

33. Å
    

    View Slide

34. #PROTIP💡
    
    
    A lot of loading metrics don't capture
    user experience. We need to think
    about our metrics in terms of what
    matters.
    

    View Slide

35. #QUOTE 🦄
    
    
    "My app loads in n seconds…"
    
    
    — Front-End Engineers, ca. 2022
    

    View Slide

36. View Slide

37. #PROTIP💡
    
    
    Load metrics are not a single number.
    

    View Slide

38. #QUESTION 🤔
    
    
    What does it mean to be fast?
    
    
    If you were to summarize web
    performance in one metric, what’d be
    your pick?
    

    View Slide

39. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    If you were to summarize
    web performance in one
    metric, what’d be your
    pick?
    

    View Slide

40. MEASURING
    PERCEIVED LOAD SPEED
    HOW QUICKLY A PAGE CAN LOAD AND RENDER ALL OF ITS
    VISUAL ELEMENTS TO THE SCREEN
    LOAD RESPONSIVENESS
    HOW QUICKLY A PAGE CAN LOAD/RUN ANY REQUIRED JS IN
    ORDER FOR COMPONENTS TO RESPOND TO USER INTERACTION
    RUNTIME RESPONSIVENESS
    AFTER THE PAGE LOAD, HOW QUICKLY CAN THE PAGE
    RESPOND TO USER INTERACTION?
    SMOOTHNESS
    DO TRANSITIONS & ANIMATIONS RENDER AT A CONSISTENT
    FRAME RATE AND FLOW FLUIDLY?
    

    View Slide

41. #PROTIP💡
    
    
    The only way to truly know how your
    site performs for your users is to
    actually measure its performance as
    those users are loading and
    interacting with it.
    

    View Slide

42. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    Jean-Antoine
    Nollet
    

    View Slide

43. ↝ THE FIRST EVER RUM EXPERIMENT IN 1746
    
    
    ↝ HE GATHERED ˜200 MONKS IN CIRCUMFERENCE,
    WIRED USING IRON, AND DISCHARGED A BATTERY
    THROUGH THE HUMAN CHAIN
    
    
    ↝ HE WAS TESTING THE LATENCY OF AN ELECTRIC
    SIGNAL WITH REAL USERS
    JEAN-ANTOINE NOLLET
    

    View Slide

44. #PROTIP💡
    
    
    Browsers now provide us with many
    apis to fetch performance metrics
    that help site owners make sites
    faster.
    

    View Slide

45. WEB PERFORMANCE STUFF
    YOU ALREADY KNOW
    MATHEUS ALBUQUERQUE
    

    View Slide

46. WEB PLATFORM PERF APIS
    I DIDN’T KNOW EXISTED
    MATHEUS ALBUQUERQUE
    

    View Slide

47. Measuring
    
    
    with the platform
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

48. MEASUREMENT APIS
    GENERAL STUFF
    DOMHighResTimeStamp, PerformanceObserver, PAGE
    VISIBILITY API & LAYOUT INSTABILITY API
    PROFILING
    LONG TASKS API, UserAgentSpecificMemory & JS SELF-
    PROFILING API
    TIMING
    USER TIMING, ELEMENT TIMING. EVENT TIMING, RESOURCE
    TIMING, NAVIGATION TIMING & SERVER TIMING
    SENSORS
    BATTERY STATUS & NETWORK INFORMATION
    

    View Slide

49. document.hidden;
    
    
    document.visibilityState;
    
    
    document.addEventListener("visibilitychange",()
    =
    >
    {
    
    
    if(document.visibilityState==="hidden"){
    
    
    console.log("This window is hidden")
    
    
    }
    
    
    else{
    
    
    console.log("This window is visible")
    
    
    }
    
    
    })
    PAGE VISIBILITY
    

    View Slide

50. ↝ CANCEL NETWORK REQUESTS AND OTHER TIME-
    BASED EVENTS
    
    
    ↝ FETCH INCOMPLETE MEDIA OR DOWNLOAD THE REST
    OF YOUR BUNDLES USING DYNAMIC IMPORTS
    
    
    ↝ PAUSE VIDEOS AND CAROUSELS, IF THE USER IS
    NOT WATCHING THEM
    PAGE VISIBILITY
    

    View Slide

51. ↝ SUBSCRIBE TO PERFORMANCE-RELATED EVENTS
    
    
    ↝ CALLBACKS ARE GENERALLY FIRED DURING IDLE
    PERIODS
    
    
    ↝ YOU TELL THE OBSERVER WHAT TYPES OF ENTRIES
    TO LISTEN FOR
    PerformanceObserver
    

    View Slide

52. const observer
    =
    new PerformanceObserver((list)
    =
    >
    {
    
    
    for (const entry of list.getEntries()) {
    
    
    console.log(entry.toJSON());
    
    
    }
    
    
    });
    
    
    observer.observe({type: 'some-entry-type'});
    PerformanceObserver
    

    View Slide

53. ↝ MANY WEBSITES HAVE DOM ELEMENTS SHIFTING
    AROUND DUE TO CONTENT LOADING
    ASYNCHRONOUSLY
    
    
    ↝ THIS API GIVES US A LIST OF ALL LAYOUT
    SHIFT EVENTS ON A PAGE
    LAYOUT INSTABILITY
    

    View Slide

54. const observer
    =
    new PerformanceObserver((list)
    =
    >
    {
    
    
    const entries
    =
    list.getEntries();
    
    
    /
    /
    Shifts that are not preceded by input events
    
    
    const nonInputEntries
    =
    entries.filter((entry)
    =
    >
    !entry.hadRecentInput);
    
    
    for (const entry of nonInputEntries) {
    
    
    console.log(entry);
    
    
    }
    
    
    });
    
    
    observer.observe({type: 'layout-shift'});
    LAYOUT INSTABILITY
    

    View Slide

55. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

56. Å
    LAYOUT INSTABILITY
    

    View Slide

57. Å
    LAYOUT INSTABILITY
    

    View Slide

58. TIMING (1st ACT)
    USER TIMING
    ALLOWS YOU TO MARK POINTS IN TIME AND THEN MEASURE
    THE DURATION BETWEEN THOSE MARKS.
    EVENT TIMING
    EVENT PROCESSING TIME + TIME UNTIL THE NEXT FRAME
    CAN BE RENDERED. THE BASIS FOR THE FID METRIC.
    ELEMENT TIMING
    MEASURE THE RENDER TIME OF SPECIFIC ELEMENTS. THE
    BASIS FOR THE LCP METRIC.
    

    View Slide

59. /
    /
    Record the time i
    m
    m
    ediately before running a task
    
    
    performance.mark('myTask:start');
    
    
    await doMyTask();
    
    
    /
    /
    Record the time i
    m
    m
    ediately after running a task
    
    
    performance.mark('myTask:end');
    
    
    /
    /
    Measure the delta between the start and end of the task
    
    
    performance.measure('myTask', 'myTask:start', ‘myTask:end');
    
    
    observer.observe({type: 'measure'});
    USER TIMING
    

    View Slide

60. USER TIMING
    

    View Slide

61. USER TIMING + TOOLS
    — "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
    

    View Slide

62. USER TIMING + TOOLS
    — "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
    

    View Slide

63. ↝ ALLOWS YOU TO MEASURE THE RENDER TIME OF
    SPECIFIC ELEMENTS
    
    
    ↝ USEFUL FOR KNOWING WHEN THE LARGEST IMAGE
    OR TEXT BLOCK WAS PAINTED TO THE SCREEN
    
    
    ↝ THE BASIS FOR THE LARGEST CONTENTFUL PAINT
    (LCP) METRIC
    ELEMENT TIMING
    

    View Slide

64. 
    
    
    This is text I care about.
    
    
    observer.observe({type: 'element'});
    ELEMENT TIMING
    

    View Slide

65. ELEMENT TIMING + TOOLS
    — "ELEMENT TIMING: ONE TRUE METRIC TO RULE THEM ALL?" BY ANDY DAVIES
    

    View Slide

66. ↝ USEFUL TO MEASURE THE EVENT PROCESSING TIME
    AS WELL AS THE TIME UNTIL THE NEXT FRAME
    CAN BE RENDERED
    
    
    ↝ EXPOSES A NUMBER OF TIMESTAMPS IN THE EVENT
    LIFECYCLE
    
    
    ↝ THE BASIS FOR THE FIRST INPUT DELAY METRIC
    EVENT TIMING
    

    View Slide

67. const observer
    =
    new PerformanceObserver((entryList)
    =
    >
    {
    
    
    const firstInput
    =
    entryList.getEntries()[0];
    
    
    const firstInputDelay
    =
    firstInput.processingStart - firstInput.startTime;
    
    
    
    
    /
    /
    Measure the time it takes to run all event handlers
    
    
    const firstInputProcessingTime
    =
    firstInput.processingEnd - firstInput.processingStart;
    
    
    /
    /
    Measure the entire duration of the event
    
    
    const firstInputDuration
    =
    firstInput.duration;
    
    
    });
    
    
    observer.observe({type: 'first-input'});
    EVENT TIMING
    

    View Slide

68. MEASURE THE LATENCY…
    
    
    ↝ FROM A CLICK UNTIL WE REORDER CONTENT ON A
    TABLE
    
    
    ↝ TO DRAG A SLIDER TO FILTER SOME DATA
    
    
    ↝ FOR A FLYOUT TO APPEAR WHEN HOVERING A MENU
    ITEM
    EVENT TIMING
    

    View Slide

69. PROFILING
    LONG TASKS API
    REPORTS TASKS THAT TAKES LONGER THAN 50 MS AND IT'S
    THE BASIS FOR TTI AND TBT METRICS
    JS SELF-PROFILING API
    PROFILE SPECIFIC COMPLEX OPERATIONS AND IDENTIFY
    HOT SPOTS USING A SAMPLING PROFILER
    UserAgentSpecificMemory
    DETECT MEMORY LEAKS IN APPS THAT HANDLE A HUGE
    VOLUME OF DATA
    

    View Slide

70. LONG TASKS
    

    View Slide

71. ↝ REPORTS TASKS THAT TAKES LONGER THAN 50 MS
    
    
    ↝ USEFUL TO TRACK WHEN THE BROWSER'S MAIN
    THREAD IS BLOCKED
    
    
    ↝ THE BASIS FOR TIME TO INTERACTIVE (TTI) AND
    TOTAL BLOCKING TIME (TBT) METRICS
    LONG TASKS
    

    View Slide

72. LONG TASKS
    

    View Slide

73. observer.observe({type: 'longtask'});
    LONG TASKS
    

    View Slide

74. observer.observe({type: 'longtask'});
    {
    
    
    name: "same-origin-descendant",
    
    
    entryType: "longtask",
    
    
    startTime: 1023.40999995591,
    
    
    duration: 187.19000002602115,
    
    
    attribution: [
    
    
    {
    
    
    name: "unknown",
    
    
    entryType: "taskattribution",
    
    
    startTime: 0,
    
    
    duration: 0,
    
    
    containerType: "iframe",
    
    
    containerSrc: "child.html",
    
    
    containerId: "",
    
    
    containerName: "child1"
    
    
    }
    
    
    ]
    
    
    };
    LONG TASKS
    

    View Slide

75. const profiler
    =
    new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });
    
    
    /
    /
    Do work
    .
    .
    .
    
    
    const trace
    =
    await profiler.stop();
    
    
    sendProfile(trace);
    JS SELF-PROFILING
    

    View Slide

76. ↝ PROFILE SPECIFIC COMPLEX OPERATIONS
    
    
    ↝ PROFILE THIRD-PARTY SCRIPTS
    
    
    ↝ COMBINE WITH OTHER EVENTS/IMPORTANT
    METRICS, LIKE LONG TASKS OR EVENT TIMING
    APIS
    JS SELF-PROFILING
    

    View Slide

77. ↝ MEASURES THE MEMORY USAGE AND DETECTS
    MEMORY LEAKS
    
    
    ↝ WAITS FOR THE NEXT GC AND THEN MEASURES
    MEMORY IMMEDIATELY AFTER THE UNNEEDED
    MEMORY HAS BEEN RELEASED
    
    
    ↝ FORCES GC IF IT DOES NOT HAPPEN FOR 20S
    UserAgentSpecificMemory
    

    View Slide

78. ↝ FORGETTING TO UNREGISTER AN EVENT LISTENER
    
    
    ↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN
    IFRAME
    
    
    ↝ NOT CLOSING A WORKER
    
    
    ↝ ACCUMULATING OBJECTS IN ARRAYS
    MEMORY LEAKS
    

    View Slide

79. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

80. const obj
    =
    { a: new Array(1000), b: new Array(2000) };
    
    
    setInterval(()
    =
    >
    {
    
    
    console.log(obj.a);
    
    
    }, 1000);
    MEMORY LEAKS
    

    View Slide

81. performance.measureUserAgentSpecificMemory()
    UserAgentSpecificMemory
    

    View Slide

82. {
    
    
    name: "same-origin-descendant",
    
    
    entryType: "longtask",
    
    
    startTime: 1023.40999995591,
    
    
    duration: 187.19000002602115,
    
    
    attribution: [
    
    
    {
    
    
    name: "unknown",
    
    
    entryType: "taskattribution",
    
    
    startTime: 0,
    
    
    duration: 0,
    
    
    containerType: "iframe",
    
    
    containerSrc: "child.html",
    
    
    containerId: "",
    
    
    containerName: "child1"
    
    
    }
    
    
    ]
    
    
    }
    {
    
    
    bytes: 1000000,
    
    
    breakdown: [
    
    
    {
    
    
    bytes: 1000000,
    
    
    attribution: [
    
    
    {
    
    
    url: "https://example.com",
    
    
    scope: "Window",
    
    
    },
    
    
    ],
    
    
    types: ["JS", "DOM"],
    
    
    },
    
    
    {
    
    
    bytes: 0,
    
    
    attribution: [],
    
    
    types: [],
    
    
    },
    
    
    ],
    
    
    }
    
    
    {
    
    
    "frames": [
    
    
    { "name": "Profiler" },
    
    
    { "column": 0, "line": 100, "name": "", "resourceId": 0 },
    
    
    { "name": "set innerHTML" },
    
    
    { "column": 10, "line": 10, "name": "A", "resourceId": 1 }
    
    
    { "column": 20, "line": 20, "name": "B", "resourceId": 1 }
    
    
    ],
    
    
    "resources": [
    
    
    "https://example.com/page",
    
    
    "https://example.com/app.js",
    
    
    ],
    
    
    "samples": [
    
    
    { "stackId": 0, "timestamp": 161.99500000476837 },
    
    
    { "stackId": 2, "timestamp": 182.43499994277954 },
    
    
    { "timestamp": 197.43499994277954 },
    
    
    { "timestamp": 213.32999992370605 },
    
    
    { "stackId": 3, "timestamp": 228.59999990463257 },
    
    
    ],
    
    
    "stacks": [
    
    
    { "frameId": 0 },
    
    
    { "frameId": 2 },
    
    
    { "frameId": 3 },
    
    
    { "frameId": 4, "parentId": 2 }
    
    
    ]
    
    
    }
    LONG TASKS SELF-PROFILING USERAGENT MEMORY
    🤯
    

    View Slide

83. TIMING (2nd ACT)
    RESOURCE TIMING
    RETRIEVE AND ANALYZE DETAILED NETWORK TIMING DATA
    REGARDING THE LOADING
    SERVER TIMING
    COMMUNICATE PERFORMANCE METRICS ABOUT HOW TIME IS
    SPENT WHILE PROCESSING THE REQUEST
    NAVIGATION TIMING
    COMPLETE TIMING INFORMATION FOR NAVIGATION OF A
    DOCUMENT
    

    View Slide

84. const observer
    =
    new PerformanceObserver((list)
    =
    >
    {
    
    
    for (const entry of list.getEntries()) {
    
    
    /
    /
    If transferSize is 0, the resource was fulfilled via the cache.
    
    
    console.log(entry.name, entry.transferSize === 0);
    
    
    }
    
    
    });
    
    
    observer.observe({type: 'resource'});
    RESOURCE TIMING
    

    View Slide

85. NAVIGATION TIMING
    

    View Slide

86. const observer
    =
    new PerformanceObserver((list)
    =
    >
    {
    
    
    for (const entry of list.getEntries()) {
    
    
    console.log('Time to first byte', entry.responseStart);
    
    
    }
    
    
    });
    
    
    observer.observe({type: 'navigation'});
    NAVIGATION TIMING
    

    View Slide

87. /
    /
    ServiceWorker startup time
    
    
    const workerStartupTime
    =
    entry.responseStart - entry.workerStart;
    
    
    /
    /
    Request time only (excluding redirects, DNS, and connection/TLS time)
    
    
    const requestTime
    =
    entry.responseStart - entry.requestStart;
    
    
    /
    /
    Response time only (download)
    
    
    const responseTime
    =
    entry.responseEnd - entry.responseStart;
    
    
    /
    /
    Request + response time
    
    
    const requestResponseTime
    =
    entry.responseEnd - entry.requestStart;
    NAVIGATION TIMING
    

    View Slide

88. MEASURE ANY WORK THAT THE SERVER DOES TO
    COMPLETE A REQUEST:
    
    
    ↝ ROUTING/AUTHENTICATING THE REQUEST
    
    
    ↝ QUERYING DATABASES/API CALLS TO THIRD-PARTY
    SERVICES
    
    
    ↝ RUNNING CONTENT THROUGH TEMPLATING SYSTEMS
    SERVER TIMING
    

    View Slide

89. Server-Timing:
    
    
    database;dur=123;desc="Database",
    
    
    templating;dur=56;desc="Template processing"
    SERVER TIMING
    

    View Slide

90. SERVER TIMING
    

    View Slide

91. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

92. SENSORS
    BATTERY STATUS
    INFORMATION ABOUT THE POWER SOURCE, CHARGE LEVEL,
    AND OTHERS
    NETWORK INFORMATION
    ADAPT THE USERS’ EXPERIENCE BASED ON THE QUALITY OF
    THEIR CONNECTION
    

    View Slide

93. const batteryInfo
    =
    await navigator.getBattery();
    
    
    batteryInfo.addEventListener("chargingchange", listener);
    
    
    batteryInfo.addEventListener("chargingtimechange", listener);
    
    
    batteryInfo.addEventListener("dischargingtimechange", listener);
    
    
    batteryInfo.addEventListener("levelchange", listener);
    BATTERY STATUS
    

    View Slide

94. const networkInfo
    =
    navigator.connection;
    
    
    navigator.connection.addEventListener('change', onConnectionChange);
    NETWORK INFORMATION
    

    View Slide

95. NETWORK INFORMATION
    const networkInfo
    
    
    effectiveType: "4g",
    
    
    rtt: 200,
    
    
    downlink: 1.65,
    
    
    saveData: false,
    
    
    }
    

    View Slide

96. ↝ SWITCH BETWEEN SERVING HIGH/LOW DEFINITION
    CONTENT BASED ON THE USER'S NETWORK
    
    
    ↝ DECIDE WHETHER TO PRELOAD RESOURCES
    
    
    ↝ DEFER UPLOADS/DOWNLOADS WHEN USERS ARE ON A
    SLOW CONNECTION
    
    
    ↝ ADAPT TO SITUATIONS WHEN USERS ARE OFFLINE
    NETWORK INFORMATION
    

    View Slide

97. switch (connectionType) {
    
    
    case "4g":
    
    
    return ;
    
    
    case "3g":
    
    
    return ;
    
    
    default:
    
    
    return ;
    
    
    }
    NETWORK INFORMATION
    

    View Slide

98. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

99. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    

    View Slide

100. View Slide

101. Improving
     
     
     with the platform
     WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

102. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Resource
     Hints
     

     View Slide

103. ↝ MANY PERFORMANCE OPTIMIZATIONS CAN BE MADE
     WHEN WE CAN PREDICT WHAT USERS MIGHT DO
     
     
     ↝ RESOURCE HINTS ARE A SIMPLE BUT EFFECTIVE
     WAY TO ALLOW DEVELOPERS TO HELP THE
     BROWSER TO STAY ONE STEP AHEAD OF THE USER
     AND KEEP PAGES FAST
     RESOURCE HINTS
     

     View Slide

104. <
     !
     -
     -
     Preconnect
     -
     -
     >
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Preloading
     -
     -
     >
     
     
     
     
     
     <
     !
     -
     -
     DNS Prefetch
     -
     -
     >
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Prefetch
     -
     -
     >
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Prerender
     -
     -
     >
     
     
     
     RESOURCE HINTS
     

     View Slide

105. <
     !
     -
     -
     Preconnect
     -
     -
     >
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Preloading
     -
     -
     >
     
     
     
     
     
     <
     !
     -
     -
     DNS Prefetch
     -
     -
     >
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Prefetch
     -
     -
     >
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Prerender
     -
     -
     >
     
     
     
     RESOURCE HINTS
     

     View Slide

106. ↝ IT ALLOWS THE BROWSER TO SETUP EARLY
     CONNECTIONS BEFORE THE REQUEST IS ACTUALLY
     SENT TO THE SERVER. THIS INCLUDES:
     
     
     • TLS NEGOTIATIONS
     
     
     • TCP HANDSHAKES
     
     
     ↝ ELIMINATES ROUNDTRIP LATENCY
     PRECONNECT
     

     View Slide

107. 100MS 200MS 300MS 400MS 500MS 600MS 700MS
     HTML
     CSS
     FONT 1
     FONT 2
     FONTS START LOADING FONTS RENDERED
     

     View Slide

108. 100MS 200MS 300MS 400MS 500MS 600MS 700MS
     HTML
     CSS
     FONT 1
     FONT 2
     FONTS START LOADING FONTS RENDERED
     FONT 1
     FONT 2
     

     View Slide

109. ↝ DNS PREFETCH ⇢ WARNS THE BROWSER ABOUT
     THE DOMAINS IT’S GOING TO NEED TO LOOK UP
     
     
     ↝ PREFETCH ⇢ FETCH RESOURCES IN THE
     BACKGROUND AND STORE THEM IN CACHE
     
     
     ↝ PRERENDER ⇢ IT GOES ONE STEP FURTHER AND
     EXECUTES THE FILES
     …AND MUCH MORE!
     

     View Slide

110. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Priority
     
     
     Hints
     

     View Slide

111. ↝ INCREASE THE PRIORITY OF THE LCP IMAGE
     
     
     ↝ LOWER THE PRIORITY OF ABOVE-THE-FOLD IMAGES
     AND PRELOADED RESOURCES
     
     
     ↝ LOWER THE PRIORITY FOR NON-CRITICAL DATA
     FETCHES
     
     
     ↝ REPRIORITIZE SCRIPTS
     PRIORITY HINTS
     

     View Slide

112. <
     !
     -
     -
     Increase the priority of the LCP image
     -
     -
     >
     
     
     
     
     
     <
     !
     -
     -
     Lower the priority of above-the-fold images
     -
     -
     >
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Reprioritize scripts
     -
     -
     >
     
     
     
     
     
     
     PRIORITY HINTS
     

     View Slide

113. <
     !
     -
     -
     Increase the priority of the LCP image
     -
     -
     >
     
     
     
     
     
     <
     !
     -
     -
     Lower the priority of above-the-fold images
     -
     -
     >
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     <
     !
     -
     -
     Reprioritize scripts
     -
     -
     >
     
     
     
     
     
     
     PRIORITY HINTS
     

     View Slide

114. /
     /
     Important validation data
     
     
     const user
     =
     await fetch("/user");
     
     
     /
     /
     Less important content data
     
     
     const relatedPosts
     =
     await fetch("/posts/suggested", { priority: "low" });
     PRIORITY HINTS
     

     View Slide

115. /
     /
     Important validation data
     
     
     const user
     =
     await fetch("/user");
     
     
     /
     /
     Less important content data
     
     
     const relatedPosts
     =
     await fetch("/posts/suggested", { priority: "low" });
     PRIORITY HINTS
     

     View Slide

116. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Responsive
     
     
     Images
     

     View Slide

117. ↝ IMAGES FOR DESKTOP AND TABLET CAN BE ˜2-4X
     LARGER THAN THE MOBILE ONES.
     
     
     ↝ WITH srcset, THE BROWSER WON'T DOWNLOAD THE
     LARGER IMAGES UNLESS THEY'RE NEEDED. THAT
     SAVES BANDWIDTH.
     RESPONSIVE IMAGES
     

     View Slide

118. 
     
     src="frontmania.png"
     
     
     srcset="
     
     
     frontmania-300.png 300w,
     
     
     frontmania-600.png 600w,
     
     
     frontmania-1200.png 1200w
     
     
     "
     
     
     />
     
     
     src="frontmania.png"
     
     
     srcset="
     
     
     frontmania-1x.png 1x,
     
     
     frontmania-2x.png 2x,
     
     
     frontmania-3x.png 3x
     
     
     "
     
     
     />
     RESPONSIVE IMAGES
     

     View Slide

119. RESPONSIVE IMAGES
     
     
     src="frontmania.png"
     
     
     srcset="
     
     
     frontmania-300.png 300w,
     
     
     frontmania-600.png 600w,
     
     
     frontmania-1200.png 1200w
     
     
     "
     
     
     />
     
     
     src="frontmania.png"
     
     
     srcset="
     
     
     frontmania-1x.png 1x,
     
     
     frontmania-2x.png 2x,
     
     
     frontmania-3x.png 3x
     
     
     "
     
     
     />
     

     View Slide

120. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Native Lazy-
     Loading
     

     View Slide

121. NATIVE LAZY-LOADING
     
     
     
     
     

     View Slide

122. 
     
     
     
     NATIVE LAZY-LOADING
     

     View Slide

123. #PROTIP 💡
     
     
     Lazy-loading iframes can lead to 2-3%
     median data savings, 1-2% FCP
     reductions, and 2% FID improvements
     at the 95th percentile.
     
     
     — Chrome team’s research, 2019
     

     View Slide

124. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Native
     Scheduler
     

     View Slide

125. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

126. scheduler.postTask()
     SCHEDULE AND CONTROL PRIORITIZING TASKS.
     scheduler.wait()
     YIELD AND RESUME AFTER SOME AMOUNT OF TIME OR
     PERHAPS AFTER AN EVENT HAS OCCURRED.
     scheduler.yield()
     BREAK UP LONG TASKS BY YIELDING TO THE BROWSER AND
     CONTINUING AFTER BEING RESCHEDULED.
     isInputPending()
     DETERMINE IF THE CURRENT TASK IS BLOCKING INPUT
     EVENTS.
     NATIVE SCHEDULER
     

     View Slide

127. NATIVE SCHEDULER
     

     View Slide

128. View Slide

129. ↝ CSS TRICKS (E.G. font-display: swap AND
     will-change)
     
     
     ↝ IMPORT ON VISIBILITY (USING AN
     IntersectionObserver)
     
     
     ↝ CANVAS + WORKERS = OffscreenCanvas
     …AND MUCH MORE!
     

     View Slide

130. ↝ AVOID THE INITIAL HTTP TO HTTPS REDIRECTS
     SO THAT PAGES LOAD FASTER USING HTTP STRICT
     TRANSPORT SECURITY (HSTS)
     
     
     ↝ SEND DATA WITHOUT EXTRA ROUND TRIPS WITH
     QUIC
     …AND MUCH MORE!
     

     View Slide

131. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

132. SERVICES & OSS
     

     View Slide

133. #PROTIP 💡
     
     
     Start with observability services or
     libraries like web-vitals. Then create
     your own abstractions on top of the
     web (e.g. React hooks).
     

     View Slide

134. Move Fast &
     
     
     Break Nothing ™
     WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

135. BROWSER COMPATIBILITY
     PERFORMANCE OBSERVER
     USER TIMING
     LONG TASKS
     ELEMENT TIMING
     RESOURCE TIMING
     NAVIGATION TIMING
     

     View Slide

136. BROWSER COMPATIBILITY
     SERVER TIMING
     LAYOUT INSTABILITY
     JS SELF-PROFILING
     PAGE VISIBILITY
     BATTERY STATUS
     NETWORK INFORMATION
     

     View Slide

137. View Slide

138. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

139. const Video
     =
     lazy(()
     =
     >
     import("./Video"));
     
     
     const Preview
     =
     lazy(()
     =
     >
     import("./Preview"));
     
     
     const networkInfo
     =
     useNetworkStatus();
     
     
     const { With, Switch, Otherwise }
     =
     usePatternMatch(networkInfo);
     MOVE FAST & BREAK NOTHING ™
     

     View Slide

140. Loading
     .
     .
     .
     }>
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     MOVE FAST & BREAK NOTHING ™
     

     View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. Why are we
     here?
     WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

147. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Browsers
     

     View Slide

148. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Which
     browsers are
     visiting our
     app?
     — APP DYNAMICS REPORT, LAST THREE MONTHS
     

     View Slide

149. BROWSER TOTAL
     

     View Slide

150. View Slide

151. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Devices &
     Connection
     

     View Slide

152. #REALITYCHECK 😳
     
     
     Phone users experience slow First
     Input Delay on 7x more websites.
     
     
     — Web Almanac By HTTP Archive, 2021
     

     View Slide

153. BANDWIDTH MIX
     — GSM ASSOCIATION, 2022
     

     View Slide

154. 6.07 (MBPS) 44.31 (MBPS)
     — THE STATE OF LTE BY OPEN SIGNAL, 2018
     THE GLOBAL LTE PICTURE
     

     View Slide

155. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     People
     

     View Slide

156. THE TIME IT TAKES TO LOAD A PAGE
     HOW EASY IT IS TO FIND WHAT I'M LOOKING FOR
     HOW WELL THE SITE FITS MY SCREEN
     HOW SIMPLE THE SITE IS TO USE
     HOW ATTRACTIVE THE SITE LOOKS
     — SPEED MATTERS, VOL. 3
     HOW IMPORTANT IS SPEED?
     

     View Slide

157. #RESEARCH 📚
     
     
     40% of Brits reported that they had
     become physically violent toward
     their computers.
     
     
     — British Psychology Society, 2009
     

     View Slide

158. #RESEARCH 📚
     
     
     A 500ms delay resulted in up to a 26%
     increase in frustration and up to an
     8% decrease in engagement.
     
     
     — Radware research, 2013
     

     View Slide

159. #RESEARCH 📚
     
     
     Delayed web pages caused a 38%
     rise in mobile users' heart rates —
     equivalent to the anxiety of watching
     a horror movie alone.
     
     
     — Ericsson ConsumerLab neuro research, 2015
     

     View Slide

160. #RESEARCH 📚
     
     
     53% of mobile users abandon sites
     that take over 3 seconds to load.
     
     
     — DoubleClick, 2020
     

     View Slide

161. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Business
     

     View Slide

162. ↝ LONG TASKS DELAYED TTI
     
     
     ↝ AS FIRST-PAGE LONG TASK TIME INCREASED,
     OVERALL CONVERSION RATES DECREASED
     
     
     ↝ MOBILE HAD UP TO ˜12X LONGER LONG TASKS
     
     
     ↝ OLDER DEVICES COULD BE SPENDING HALF OF
     THEIR LOAD-TIME ON LONG TASKS
     BUSINESS OUTCOMES
     — AKAMAI AND CHROME RESEARCH, 2017
     

     View Slide

163. BUSINESS OUTCOMES
     — AKAMAI AND CHROME RESEARCH, 2017
     

     View Slide

164. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     Closing Notes
     

     View Slide

165. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     ALWAYS TRY TO
     CORRELATE
     BUSINESS
     METRICS WITH
     PERFORMANCE.
     #1
     

     View Slide

166. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     DON'T TAKE
     FAST NETWORKS,
     CPUS AND RAM
     FOR GRANTED.
     #2
     

     View Slide

167. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     TEST ON REAL
     PHONES AND
     NETWORKS.
     #3
     

     View Slide

168. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     AVOID THE
     OBSERVER
     EFFECT.
     #4
     

     View Slide

169. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     GET RID OF THE
     NOISE IN YOUR
     METRICS.
     #5
     

     View Slide

170. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     THERE'S NO
     SILVER BULLET.
     IDENTIFY YOUR
     CORE METRICS.
     #6
     

     View Slide

171. We’re hiring! 🗺
     
     
     Mostly in…
     🇺🇸🇲🇽🇦🇷🇺🇾🇪🇸🇨🇿🇮🇱🇮🇳
     

     View Slide

172. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

173. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
     

     View Slide

174. Å
     

     View Slide

175. THAT’S ALL, FOLKS! THANKS!
     QUESTIONS?
     MATHEUS ALBUQUERQUE
     

     View Slide