question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Long tasks in the report

See original GitHub issue

We want to show more information about long tasks, in order to help reduce TTI/TBT.

First: a new “long tasks” diagnostic audit. We’ve been talking about this. Idea is to show the 5 longest tasks.

Quick way to preview the long tasks–in bootup-time.js:

console.log([...tasks].sort((a, b) => b.duration - a.duration).filter(t => t.duration >= 50));
  • We know the start and end times of each task. Instead of a table, should we explore a timeline visualization, perhaps also adding when TTI/FCP/LCP is?
  • Should we show more than 5? Maybe not all–The verge has ~60 long tasks. 20?
  • What is “Other”? It is different from “unattributable”, yes? Should we filter out these two from this audit?

Second: (new idea, please discuss) augment bootup-time with long tasks

We could add subrows for each script, listing the top n long script tasks.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
paulirishcommented, May 5, 2020

Quick way to preview the long tasks–in bootup-time.js:

Nice. I extended that a tad more:

    const longtasks = [...tasks].sort((a, b) => b.duration - a.duration).filter(t => t.duration >= 50 && t.unbounded === false);

    const also = longtasks.map(t => ({
      url: BootupTime.getAttributableURLForTask(t, jsURLs),
      group: t.group.label,
      start: t.startTime,
      self: t.selfTime,
      duration: t.duration
    }));
    console.table(also);

image

Instead of a table, should we explore a timeline visualization,

we can, but let’s start with the table. the timeline viz scope can get big really quick so i wanna make sure we ship some basic ground truth and then augment from there.

Should we show more than 5?

good call. up to 20-ish sg.

What is “Other”? It is different from “unattributable”, yes? Should we filter out these two from this audit?

different yes. seems like Other happens when most of the time is attributed to events like these. (which seems weird as they are fired at the toplevel/scheduler-level.)

i don’t think we should filter either out as Other/Unattributable can still mess up your FID/TBT/TTI

Second: augment bootup-time with long tasks

yeah seems pretty reasonable.

1reaction
patrickhulcecommented, Jun 23, 2020

Unattributable just means we couldn’t get a stack that resolved to any script. This should be attributable once a PR for #8526 lands which I’m free to work on now 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

PerformanceLongTaskTiming - Web APIs - MDN Web Docs
A long task is any uninterrupted period where the main UI thread is busy for 50ms or longer. Common examples include:.
Read more >
Long Tasks API - W3C on GitHub
Abstract. This document defines an API that web page authors can use to detect presence of "long tasks" that monopolize the UI thread...
Read more >
Are long JavaScript tasks delaying your Time to Interactive?
What are Long Tasks? # A Long Task is JavaScript code that monopolizes the main thread for extended periods of time, causing the...
Read more >
Long Tasks API 1 - W3C
Abstract. This document defines an API that web page authors can use to detect presence of “long tasks” that monopolize the UI thread...
Read more >
How to set up task using Report Long Running Tasks script?
PROCESS: Run built-in script 'Report Long Running Tasks' on each file; report on tasks running longer than 3 seconds. PARAMETERS SET TO:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found