Lighthouse: NO_FCP for webGL page from Lighthouse, but there is FP in console

Created on 24 Nov 2019  路  9Comments  路  Source: GoogleChrome/lighthouse

Provide the steps to reproduce

  1. Clone it from https://github.com/rubyzhao/Three_MyChart_Line
  2. Open LineBufferGeometry.html with Live Server
  3. lighthouse http://127.0.0.1:5500/LineBufferGeometry.html --view --output-path=LightHouse_Output\Canvas.html --output=html

What is the current behavior?

image
For more detail, refer to Canvas.zip
Also tried Audits in DevTools, got the same result as above.

But there is FP from console:

image

Environment Information

  • Lighthouse version: 5.6.0
  • Chrome version: 78.0.3904.108 (Official Build) (64-bit)
  • Node.js version: 12.11.1
  • Operating System: Win10X64 1083
  • Live Server: 5.6.1
  • VS Code: 1.40.1
needs-investigation needs-priority waiting-on-upstream
Source
picture rubyzhao
👍1

All 9 comments

Thanks for filing @rubyzhao! I think this page legitimately does not have a first contentful paint. The screenshot of performance entries first paint is a different spec event from first contentful paint and while non-white canvas renders should be included, it looks like it's not :/

Might need to file a crbug to get this addressed.

patrickhulce picture patrickhulce on 24 Nov 2019

Might need to file a crbug to get this addressed.

@patrickhulce that sounds like the kind of thing you would have already filed

https://crbug.com/991228 :P

brendankenny picture brendankenny on 24 Nov 2019

Haha, I thought we had solved this already!! That certainly explains it 馃槅

patrickhulce picture patrickhulce on 25 Nov 2019

Thanks @patrickhulce and @brendankenny. I even changed the full background to no-white color, still can't get FCP. Hope they can fix the bug soon. Is there any workaround to get performance index for the page with webGL?

rubyzhao picture rubyzhao on 25 Nov 2019

The only workaround I'm aware of would be to inject some other content at the same time as your webGL paint, like some text or an <img>

patrickhulce picture patrickhulce on 25 Nov 2019
👍1

@patrickhulce, Haha add anything in body at the beginning, for example 

<body>
    <h1>test</h1> 
...

will fool lighthouse. But it will not work at bottom of body. For example, add it below

... 
    <script src="r110/three.min.js"></script>
    <h1>test</h1> 
</body>

will not work. Interesting.

rubyzhao picture rubyzhao on 25 Nov 2019
👍1

Hm, that's definitely unexpected that it wouldn't work below a script unless that script document.write a comment or something odd.

patrickhulce picture patrickhulce on 25 Nov 2019

No movement on the crbug ... should we ping someone?

connorjclark picture connorjclark on 28 Apr 2020
👀1

This has been fixed upstream 馃帀

https://melodic-class.glitch.me/fcp-canvas-3js.html

patrickhulce picture patrickhulce on 19 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mjara74 picture mjara74  路  3Comments
radum picture radum  路  3Comments
muuvmuuv picture muuvmuuv  路  3Comments
johnfrancisli picture johnfrancisli  路  3Comments
timj2 picture timj2  路  3Comments