Show render blocking (Chrome 92) and largest contentful paint. #278
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In the coming Chrome 92 the render blocking info will be fixed and potetntially work as it should. That means we can highlight which assets that are render blocking (and potentially render blocking). We can also highlight the image (if it is an image) that is the largest contentful paint object. I prepared HARs generated from Chrome/Edge in Browsertime to include this info and plan to release it when Chrome 92 is released.
soulgalore
added a commit
to soulgalore/DefinitelyTyped
that referenced
this pull request
Jun 3, 2021
In Browsertime and coming Chrome 92 we will have support for knowing if a request is render blocking or not. We also will be able to know if an image is the largest Contentful paint (or not). See micmro/PerfCascade#278
8 tasks
micmro
approved these changes
Jun 4, 2021
| @@ -37,7 +37,7 @@ function makeBlock(rectData: RectData, className: string) { | |||
| foreignElLazy = (getParentByClassName(rect, "water-fall-chart") as Element) | |||
| .querySelector(".tooltip") as SVGForeignObjectElement; | |||
| } | |||
| showDelayTimeOut = setTimeout(() => { | |||
| showDelayTimeOut = window.setTimeout(() => { | |||
There was a problem hiding this comment.
I can change that sorry, it didn't work without for me it shouldn't be in this commit.
typescript-bot
pushed a commit
to DefinitelyTyped/DefinitelyTyped
that referenced
this pull request
Jun 4, 2021
…soulgalore * Adding render blocking and LCP info In Browsertime and coming Chrome 92 we will have support for knowing if a request is render blocking or not. We also will be able to know if an image is the largest Contentful paint (or not). See micmro/PerfCascade#278 * Fix whitespace
|
I'm gonna push a example HAR in the repo so we have that and then do a little more testing. |
|
Hmm this works fine in Chrome and Firefox and not in Safari: Chrome: Safari: |
|
It works in Safari for the redirect (where the background color is set to yellow) let me test tonight if I can get it to work. |
|
Argh, looking at the server log I could see that I had a service worker on my localhost, serving wrong content for Safari. It works fine. |
|
Thanks @soulgalore! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In the coming Chrome 92 the render blocking info will be fixed and potentially work as it should. That means we can highlight which assets that are render blocking (and potentially render blocking).
We can also highlight the image (if it is an image) that is the largest contentful paint object.
I prepared HARs generated from Chrome/Edge in Browsertime to include this info and plan to release it when Chrome 92 is released.
@micmro I'm not a sure how to best highlight those, this is what it looks like at the moment: