Meteor-feature-requests: [idea] Quick first meaningful paint

Created on 20 Jun 2017 · 11Comments · Source: meteor/meteor-feature-requests

The next Google Chrome (currently Canary) will bring new "Audit" algorithm based on Lighthouse.

Where Performance rating heavily depends from "First meaningful paint". As well as well known "rendering blocking" scripts and styles. The basics of this idea is to serve static <body> as it's currently done with <head>. Developer may place in static <body> spinner, loader, minimum required styles, message or default template (a.k.a. fast-render), and place all Meteor's generated and compiled scripts and styles right after defined <body> by developer.

<body>
  <div class="spinner"><svg></svg></div>
  <style>.spinner svg { fill: #000 }</style>
  <script src="..."></script>
  <link rel="stylesheet" href="...">
</body>

This will not only lead to better points, scores and ratings by different CSS/HTML audits, but actually improve UX, as user won't see white screen during scripts and styles load.

Let me know what do you think.

Webapp

Source

dr-dimitru

Most helpful comment

It does. See it in action here.

mitar on 20 Jun 2017

🎉1 👍1

All 11 comments

Loading is possible already now. This is an example how to do it.

mitar on 20 Jun 2017

❤1

Hello @mitar ,

Thank you for this. But it isn't returns HTML markup from server where <div class="peermind-loading"> is already on a <body>, or is it?

dr-dimitru on 20 Jun 2017

It does. See it in action here.

mitar on 20 Jun 2017

🎉1 👍1

@mitar thank a lot for pointing me to static-html package, somehow it wasn't on my radar.
It's still "hacky" with Blaze, as it should be in separate package. But definitely worth it.

I've ran tests (in case someone is interested):
council.cloyne.org:

"First meaningful paint" is around ~3000ms - still a lot

My localhost with --production flag

"First meaningful paint" without static-html ~3500ms
"First meaningful paint" with static-html ~1500ms

Any thoughts about to let styles and script be placed in other order or after content. Or this is a bad idea in general and we should not care about Chrome's "Audit", and this is not really matter for UX?

dr-dimitru on 21 Jun 2017

Hm, to me it is 487ms to load both the HTML and CSS. Not sure how Google gets to ~3000 ms? Maybe they do not see loading icon as meaningful paint?

Because the rest of the app is not yet having dynamic imports or anything. So the bundle is large.

mitar on 21 Jun 2017

Perhaps I'm far away from the server can't get below ~2.5 seconds in network tab.

dr-dimitru on 21 Jun 2017

@mitar I've ran a lighthouse test on council.cloyne.org, even tho the html does the trick by making the app feeling really fast in the first rendering, according to Lighthouse the "First meaningful paint" is after ~7.1 seconds

screen shot 2017-08-10 at 11 11 13

nerdvibe on 10 Aug 2017

So what they mean by "First meaningful paint"?

mitar on 10 Aug 2017

😕2

I'm also a bit confused 😕

They say "First meaningful paint measures when the primary content of a page is visible.", so probably Lighthouse is capable of recognizing a loading spinner from the main content and that's not sufficient for the test.

https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint

nerdvibe on 10 Aug 2017

Should be noted, Lighthouse is targeted for mobile and simulates high latency and low-speed connection during the tests.

dr-dimitru on 10 Aug 2017

👍1

This thread should be considered as solved. OP is solved via static-html package as described in my comment above: