$30 off During Our Annual Pro Sale. View Details »

🇳🇱 Frontmania 2022 - Web Performance APIs

🇳🇱 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.

Matheus Albuquerque

October 04, 2022
Tweet

More Decks by Matheus Albuquerque

Other Decks in Technology

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