I have a NextJs application, hosted on Zeit Now, that I've optimized so it can run in Google Page Speed Insight with a score of 100/100.
In order to pass the 'Eliminate render-blocking JavaScript and CSS in above-the-fold content' test, I had to generate a critical CSS for the landing page, inline it in a <style/> tag in <head/>, and move all the <link rel="stylesheet"/> before the end of the body tag.
Now, when I run an audit using Google Lighthouse, I sometimes get the 'Reduce render-blocking stylesheets' warning, and sometimes not.
When the warning is there, I'll get a first meaningful paint at around 2s, when it's not there, I'll get it at around 400ms.
So my question is, which one should I trust?
so the general solution to avoid blocking css ressources, while maintaining a good first paint, is to inline the critical css via a '' tag in the <head>, and load the css files using javascript.
Using NextJS, a good solution is to inline the critical css using index.js (and anything elese in pages), and then load all css dependencies for each component, using require() after verifying process.browser (since it won't load server side).
For some reasons, Google Page Speed Insight didn't consider a bunch of <link rel="stylesheet"/> at the end of a <body> tag as blocking, but Google Lighouse did, and it shows when you look at the first meaningful paint.