Meteor: Eliminate render-blocking JavaScript and CSS in above-the-fold content

Question

How to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" in Meteor?

Answer 1

The Truth^TM

After implementing a working solution for this problem, I'd say that the right^TM answer to your question is: "No, that's just what you get for using such a complex javascript framework."

But it's still a fact that loading meteor can take over a minute, on slow networks. It is huge. That makes for an awful UX. So I think it would improve a meteor app overall to have something like a loading screen.

I'm writing a package kriegslustig:altboiler (I'll update this as soon as I do the first "major" release).

Solution

I documented the solution that I'm using in altboiler in this repo. It got pretty long, so here's a summary:

• Use WebApp.connectHandlers
• Loop through WebApp.clientPrograms[WebApp.defaultArch].manifest
• Get all the URLs inside via AJAX
• Buffer and then compile them into one single script tag
• Insert that script tag into the head
• And then finally self destruct the loader script

That way you won't get that error on Google Pagespeed.

Potential

You could serve a loading screen first or you could also render the whole site without the parts that need a connection to the server.

Performance

I expected this to load Meteor a lot slower, but in my initial test Meteor actually loaded faster. My test wasn't exactly scientific though. I simply loaded it in the Chrome emulator and throttled the connection to 50kbps. Also, I did this on a dev instance, so it was uncompressed. The results are still somewhat relevant though:

Without altboiler: 1.7min
With altboiler: 2.8min

The ajax requests only perform better when there are a lot of requests made. So presumably the impact on a bundled instance could range from slightly worse to slightly better.

Downsides

It might intervene with the spiderable package, but I don't think so. I'll test it when I've written some tests for the package.