Upgrade to Pro — share decks privately, control downloads, hide ads and more …

🇱🇹 Build Stuff 2022

🇱🇹 Build Stuff 2022

ℹ️ 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

November 10, 2022
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. Hello, Build Stuff 👋 🇱🇹
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED • THE 10TH OF NOVEMBER, 2022.

    View full-size slide

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

    View full-size slide

  3. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    🧑🏫 @techlabs
    🐦 @ythecombinator
    👨💻 @medallia
    ↑ ALL THE LINKS! 🤓

    View full-size slide

  4. WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED
    ↑ ALL THE LINKS! 🤓
    🍺
    DEEP DIVE! LET’S
    DISCUSS MORE IN
    THE AFTER CONF!

    View full-size slide

  5. Why am I


    here?
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED

    View full-size slide

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

    View full-size slide

  7. WEB PERFORMANCE STUFF
    YOU ALREADY KNOW
    MATHEUS ALBUQUERQUE

    View full-size slide

  8. ↝ HTTP/2


    ↝ COMPRESS JAVASCRIPT (E.G. WITH BROTLI/ZSTD)
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Å
    — APP DYNAMICS REPORT, LAST THREE MONTHS

    View full-size slide

  12. Å
    — APP DYNAMICS REPORT, LAST THREE MONTHS

    View full-size slide

  13. Å
    — APP DYNAMICS REPORT, LAST THREE MONTHS

    View full-size slide

  14. Å
    FIXING WEB PERFORMANCE

    View full-size slide

  15. Å
    FIXING WEB PERFORMANCE

    View full-size slide

  16. This talk presents
    Why am I here?


    Measuring


    Measuring (with the platform)


    Optimizing (with the platform)


    Why are we here?


    Closing thoughts

    View full-size slide

  17. This talk presents
    Why am I here?


    Measuring


    Measuring (with the platform)


    Optimizing (with the platform)


    Why are we here?


    Closing thoughts

    View full-size slide

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

    View full-size slide

  19. #QUESTION 🤔


    What does it mean to be fast?

    View full-size slide

  20. #QUESTION 🤔


    What does it mean to be fast?


    If you were to summarize web
    performance in one metric, what’d be
    your pick?

    View full-size slide

  21. #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 full-size slide

  22. 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 full-size slide

  23. 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 ↝ SWAG 👕


    OTHERS ↝ STICKERS 💅

    View full-size slide

  24. #PROTIP💡


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

    View full-size slide

  25. #QUOTE 🦄


    "My app loads in n seconds…"


    — Front-End Engineers, ca. 2022

    View full-size slide

  26. #PROTIP💡


    Load metrics are not a single number.

    View full-size slide

  27. #QUESTION 🤔


    What does it mean to be fast?


    If you were to summarize web
    performance in one metric, what’d be
    your pick?

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. #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 full-size slide

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

    View full-size slide

  32. ↝ 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 full-size slide

  33. #PROTIP💡


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

    View full-size slide

  34. WEB PERFORMANCE STUFF
    YOU ALREADY KNOW
    MATHEUS ALBUQUERQUE

    View full-size slide

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

    View full-size slide

  36. Measuring


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

    View full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. ↝ 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 full-size slide

  40. ↝ 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 full-size slide

  41. const observer
    =
    new PerformanceObserver((list)
    =
    >
    {


    for (const entry of list.getEntries()) {


    console.log(entry.toJSON());


    }


    });


    observer.observe({type: 'some-entry-type'});
    PerformanceObserver

    View full-size slide

  42. ↝ 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 full-size slide

  43. 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 full-size slide

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

    View full-size slide

  45. Å
    LAYOUT INSTABILITY

    View full-size slide

  46. Å
    LAYOUT INSTABILITY

    View full-size slide

  47. 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 full-size slide

  48. /
    /
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  51. ↝ 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 full-size slide




  52. This is text I care about.


    observer.observe({type: 'element'});
    ELEMENT TIMING

    View full-size slide

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

    View full-size slide

  54. ↝ 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 full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

  58. ↝ 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 full-size slide

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

    View full-size slide

  60. 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 full-size slide

  61. const profiler
    =
    new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });


    /
    /
    Do work
    .
    .
    .


    const trace
    =
    await profiler.stop();


    sendProfile(trace);
    JS SELF-PROFILING

    View full-size slide

  62. ↝ 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 full-size slide

  63. ↝ 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 full-size slide

  64. ↝ FORGETTING TO UNREGISTER AN EVENT LISTENER


    ↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN
    IFRAME


    ↝ NOT CLOSING A WORKER


    ↝ ACCUMULATING OBJECTS IN ARRAYS
    MEMORY LEAKS

    View full-size slide

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

    View full-size slide

  66. const obj
    =
    { a: new Array(1000), b: new Array(2000) };


    setInterval(()
    =
    >
    {


    console.log(obj.a);


    }, 1000);
    MEMORY LEAKS

    View full-size slide

  67. performance.measureUserAgentSpecificMemory()
    UserAgentSpecificMemory

    View full-size slide

  68. {


    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 full-size slide

  69. 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 full-size slide

  70. 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 full-size slide

  71. 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 full-size slide

  72. NAVIGATION TIMING
    🍺

    View full-size slide

  73. /
    /
    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 full-size slide

  74. 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 full-size slide

  75. Server-Timing:


    database;dur=123;desc="Database",


    templating;dur=56;desc="Template processing"
    SERVER TIMING

    View full-size slide

  76. SERVER TIMING

    View full-size slide

  77. SERVER TIMING

    View full-size slide

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

    View full-size slide

  79. 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 full-size slide

  80. const batteryInfo
    =
    await navigator.getBattery();


    batteryInfo.addEventListener("chargingchange", listener);


    batteryInfo.addEventListener("chargingtimechange", listener);


    batteryInfo.addEventListener("dischargingtimechange", listener);


    batteryInfo.addEventListener("levelchange", listener);
    BATTERY STATUS

    View full-size slide

  81. const networkInfo
    =
    navigator.connection;


    navigator.connection.addEventListener('change', onConnectionChange);
    NETWORK INFORMATION

    View full-size slide

  82. NETWORK INFORMATION
    const networkInfo


    effectiveType: "4g",


    rtt: 200,


    downlink: 1.65,


    saveData: false,


    }

    View full-size slide

  83. ↝ 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 full-size slide

  84. switch (connectionType) {


    case "4g":


    return ;


    case "3g":


    return ;


    default:


    return ;


    }
    NETWORK INFORMATION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. Improving


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

    View full-size slide

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

    View full-size slide

  89. ↝ 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 full-size slide

  90. <
    !
    -
    -
    Preconnect
    -
    -
    >








    <
    !
    -
    -
    Preloading
    -
    -
    >





    <
    !
    -
    -
    DNS Prefetch
    -
    -
    >








    <
    !
    -
    -
    Prefetch
    -
    -
    >








    <
    !
    -
    -
    Prerender
    -
    -
    >



    RESOURCE HINTS

    View full-size slide

  91. <
    !
    -
    -
    Preconnect
    -
    -
    >








    <
    !
    -
    -
    Preloading
    -
    -
    >





    <
    !
    -
    -
    DNS Prefetch
    -
    -
    >








    <
    !
    -
    -
    Prefetch
    -
    -
    >








    <
    !
    -
    -
    Prerender
    -
    -
    >



    RESOURCE HINTS

    View full-size slide

  92. ↝ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  95. ↝ 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 full-size slide

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


    Hints

    View full-size slide

  97. ↝ 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 full-size slide

  98. <
    !
    -
    -
    Increase the priority of the LCP image
    -
    -
    >





    <
    !
    -
    -
    Lower the priority of above-the-fold images
    -
    -
    >

















    <
    !
    -
    -
    Reprioritize scripts
    -
    -
    >






    PRIORITY HINTS

    View full-size slide

  99. <
    !
    -
    -
    Increase the priority of the LCP image
    -
    -
    >





    <
    !
    -
    -
    Lower the priority of above-the-fold images
    -
    -
    >

















    <
    !
    -
    -
    Reprioritize scripts
    -
    -
    >






    PRIORITY HINTS

    View full-size slide

  100. /
    /
    Important validation data


    const user
    =
    await fetch("/user");


    /
    /
    Less important content data


    const relatedPosts
    =
    await fetch("/posts/suggested", { priority: "low" });
    PRIORITY HINTS

    View full-size slide

  101. /
    /
    Important validation data


    const user
    =
    await fetch("/user");


    /
    /
    Less important content data


    const relatedPosts
    =
    await fetch("/posts/suggested", { priority: "low" });
    PRIORITY HINTS

    View full-size slide

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


    Images

    View full-size slide

  103. ↝ 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 full-size slide



  104. src="buildStuff.png"


    srcset="


    buildStuff-300.png 300w,


    buildStuff-600.png 600w,


    buildStuff-1200.png 1200w


    "


    />


    src="buildStuff.png"


    srcset="


    buildStuff-1x.png 1x,


    buildStuff-2x.png 2x,


    buildStuff-3x.png 3x


    "


    />
    RESPONSIVE IMAGES

    View full-size slide

  105. RESPONSIVE IMAGES


    src="buildStuff.png"


    srcset="


    buildStuff-300.png 300w,


    buildStuff-600.png 600w,


    buildStuff-1200.png 1200w


    "


    />


    src="buildStuff.png"


    srcset="


    buildStuff-1x.png 1x,


    buildStuff-2x.png 2x,


    buildStuff-3x.png 3x


    "


    />

    View full-size slide

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

    View full-size slide

  107. NATIVE LAZY-LOADING




    View full-size slide





  108. NATIVE LAZY-LOADING

    View full-size slide

  109. #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 full-size slide

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

    View full-size slide

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

    View full-size slide

  112. NATIVE SCHEDULER
    ↝ A MORE ROBUST SOLUTION FOR SCHEDULING TASKS


    ↝ CONTROL AND SCHEDULE PRIORITIZED TASKS IN A
    UNITED AND FLEXIBLE WAY


    ↝ INTEGRATED DIRECTLY INTO THE EVENT LOOP


    ↝ ALIGNED WITH THE WORK OF THE REACT TEAM AND
    IN COOPERATION WITH GOOGLE, W3C AND OTHERS 🍺

    View full-size slide

  113. 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 full-size slide

  114. NATIVE SCHEDULER

    View full-size slide

  115. ↝ CSS TRICKS (E.G. font-display: swap AND
    will-change)


    ↝ IMPORT ON VISIBILITY (USING AN
    IntersectionObserver)


    ↝ CANVAS + WORKERS = OffscreenCanvas
    …AND MUCH MORE!
    🍺

    View full-size slide

  116. ↝ 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 full-size slide

  117. Move Fast &


    Break Nothing ™
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  121. const Video
    =
    lazy(()
    =
    >
    import("./Video"));


    const Preview
    =
    lazy(()
    =
    >
    import("./Preview"));


    const networkInfo
    =
    useNetworkStatus();


    const { With, Switch, Otherwise }
    =
    usePatternMatch(networkInfo);
    MOVE FAST & BREAK NOTHING ™

    View full-size slide

  122. Loading
    .
    .
    .
    }>



























    MOVE FAST & BREAK NOTHING ™

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  126. BROWSER TOTAL

    View full-size slide

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

    View full-size slide

  128. #REALITYCHECK 😳


    Phone users experience slow First
    Input Delay on 7x more websites.


    — Web Almanac By HTTP Archive, 2021

    View full-size slide

  129. BANDWIDTH MIX
    — GSM ASSOCIATION, 2022

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  132. 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 full-size slide

  133. #RESEARCH 📚


    40% of Brits reported that they had
    become physically violent toward
    their computers.


    — British Psychology Society, 2009

    View full-size slide

  134. #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 full-size slide

  135. #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 full-size slide

  136. #RESEARCH 📚


    53% of mobile users abandon sites
    that take over 3 seconds to load.


    — DoubleClick, 2020

    View full-size slide

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

    View full-size slide

  138. ↝ 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 full-size slide

  139. BUSINESS OUTCOMES
    — AKAMAI AND CHROME RESEARCH, 2017

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  149. THAT’S ALL, FOLKS!


    THANKS! 🤝 🇱🇹


    QUESTIONS?
    MATHEUS ALBUQUERQUE
    ↑ ALL THE LINKS! 🤓
    WEB PERFORMANCE APIS YOU (PROBABLY) DIDN'T KNOW EXISTED

    View full-size slide