Track time of eager-loading Turbo Frames

[leonvogt]

Track the time it takes for a eager-loaded (or lazy-loaded) Turbo Frames to load.
This information could be displayed in the Turbo Frame tab from the detail panel, or directly in the DOM besides the Turbo Frame info badge.

[leonvogt]

Attempt MutationObserver:

listenForLazyLoadedFrames() {
  const turboFramesWithSrc = document.querySelectorAll("turbo-frame[src][busy]")
  turboFramesWithSrc.forEach((frame) => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === "complete") {
          const timeEnd = new Date().getTime()
          const timeDiff = timeEnd - this.devTool.initializedAt
          console.log(`Frame ${frame.id} loaded in ${timeDiff}ms`)
        }
      })
    })
    observer.observe(frame, { attributes: true })
  })
}

Tests (time in ms)

Our time	Time meassured by Chrome Network Tools	Difference
450	432	18
585	572	13
519	498	21
243	458	-215
503	702	-199
251	442	-191
270	403	-133
794	850	-56
384	326	58
363	356	7
823	889	-66

Average difference: -67,55ms

[leonvogt]

Attempt Event turbo:before-frame-render:

listenForLazyLoadedFrames() {
  document.addEventListener("turbo:before-frame-render", (event) => {
    const timeEnd = new Date().getTime()
    const timeDiff = timeEnd - this.devTool.initializedAt
    console.log(`Frame: ${event.target.id} loaded in ${timeDiff}ms`)
  })
}

Tests (time in ms)

Our time	Time meassured by Chrome Network Tools	Difference
395	585	-190
415	502	-87
496	508	-12
1480	1510	-30
673	673	0
349	525	-176
395	412	-17
725	769	-44
668	693	-25
367	555	-188
461	660	-199

Average difference: -88,00ms