GoogleChrome / GoogleChrome/lighthouse

Implement a layout-blocking property on networkrequests in Blink

Open
#2,065 30 comments 0 reactions 1 assignee Claimed by @connorjclark View on GitHub
feature P1.5
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.