GoogleChrome / GoogleChrome/lighthouse
Implement a layout-blocking property on networkrequests in Blink
- Dominant language
- JavaScript
- Stars
- 30.8k
- Forks
- 9.8k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 19
Description
https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js#L58 only checks for `script` in ``.
We should expand that to cover blocking scripts within `` ([example](http://jsbin.com/zorimojimu/edit?html,output)). False positives will likely be trickier to deal with. Strawman below.
For all scripts in ``:
1. Determine if the script is before the end of the page (`document.body.lastElementChild`).
2. If it's not at the end, check if there's rendered DOM after it. Filter out `script`, `template`, and anything else in the [default stylesheet](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) that's hidden by default.
3. For all the sibling nodes after the script, check `node.offsetParent === null` to determine if it is being rendered. Note: cannot use `getComputedStyle(node).display === 'none` won't work as expected.
We'll need to also update the reference do, which talks about scripts in the head:
https://developers.google.com/web/tools/lighthouse/audits/blocking-resources
cc @igrigorik
Contributor guide
Assessment
This issue has not been assessed yet.