Improving Web Performance

Part 2: Improving:

Resources

Web Business Objectives

Competition

Being faster is cool, but only really matters at 20%.

There is a website lightest.app which allows you to run multiple Lighthouse tests and compare them.

An example is done to use this website to compare the competitors of the speaker.

Course Example Website

The website can be cloned from here.

Performance API

We should be able to get some idea of what is going wrong and how we can adjust it.

There is example analytics provided to demo a graph over time to see what weirdness of changes over time.

To understand, we need to grab real data. What did the users who drove these metrics do on our website?

window.performance

MDN is the definitive guide for this one.

Entry timings

// Entry timings
performance.getEntries()
performance.getEntriesByType()
performance.getEntriesByName()
copy

The above will return a list of entries with a bunch of information.

To explore it better, you can use the Chrome DevTools REPL to begin checking these out. From here, you can get really low-level data. There are better ways to get more human-digestable versions of this data (ie network reqs in the network time).

We use the performance API to aggregate data for our own data warehouses.

Performance Observer

We tell a PerformanceObserver to look for a specific thing.

new PerformanceObserver((entryList) => {
  var entries = entryList.getEntries()
}).observe(opts)
copy

Performance API Practice

The workshop works through collecting field data using the performance API.

The example craetes a data structure of all the performance data we want to capture.

There are a number of observers craeted to observe certain events:

// Buffered means that since we are waiting for the load event,
// there are historical events that could already have happened
// and we want them too.

// For FCP
new PerformanceObserver((entryList) => {
  var entries = entryList.getEntries() || []
  entries.forEach(function (entry) {
    if (entry.name === "first-contentful-paint") {
      data.fcp = entry.startTime
      console.log("Recorded FCP Performance: " + data.fcp)
    }
  })
}).observe({ type: "paint", buffered: true })

// This will go off multiple times
new PerformanceObserver((entryList) => {
  var entries = entryList.getEntries() || []
  entries.forEach(function (entry) {
    if (entry.startTime > data.lcp) {
      data.lcp = entry.startTime
      console.log("Recorded LCP Performance: " + data.lcp)
    }
  })
}).observe({ type: "largest-contentful-paint", buffered: true })

new PerformanceObserver((entryList) => {
  var entries = entryList.getEntries() || []
  entries.forEach(function (entry) {
    if (!entry.hadRecentEvent) {
      data.cls += entry.value
      console.log("Incresed CLS Performance: " + data.cls)
    }
  })
}).observe({ type: "layout-shift", buffered: true })

new PerformanceObserver((entryList) => {
  var entries = entryList.getEntries() || []
  entries.forEach(function (entry) {
    data.fid = entry.processingTime - entry.startTime
    console.log("Recorded FID Performance: " + data.fid)
  })
}).observe({ type: "first-input", buffered: true })

// handle the sending of data
window.addEventListener("beforeunload", function () {
  var navEntry = performance.getEntriesByType("navigation")[0]
  data.dcl = navEntry.domContentLoadedEventStart
  data.load = navEntry.loadEventStart

  var payload = JSON.stringify(data)
  // sendBeacon is a request that doesn't care about waiting for a response
  navigator.sendBeacon("/api/perf", payload)
  console.log("Sending performance", payload)
})
copy

Performance Analytics

With everything setup, we ended up collecting a bunch of data and putting it into a provided spreadsheet to overlay it with out business metrics and make some conclusions:

How do we improve performance?

Do fewer things.

This is meant in every possible layer.