Reading/Web/Projects/Performance/Inlining CSS

Hypothesis
It has been suggested that if we inline CSS there is no need to lazy load any of the HTML content, for any other reason than reducing bytes/fully load time.

Prediction
My feeling was that both inlining CSS and lazy loading content would lead to improvements on first paint and fully loaded time. My hope that was combined they would provide the lowest first paint and fully loaded time possible.

Method
I wrote a patch that allows to to configure Minerva's CSS so that it is inlined in the HTML. I enabled this on reading web staging temporarily and initiated some web page tests.

Test 1
I configured the server to inline CSS in both beta and stable. I ran webpagetest (9 views) on beta and stable mobile channel.

Test 2
I wrote a patch to fix an issue in Extension:Gather so that it didn't load CSS unnecessarily in the head and enabled that on the testing server.

I re-ran test 1 again with this bug fix after purging the page's cache.

I include this test in the results as it's interesting to shows the impact of having that link tag in the top even if the content of the stylesheet is tiny).

Test 3
This time I disabled MinervaInlineCSS on both beta and stable and ran the tests again after purging the page's cache. The stable channel would act as the current conditions and give us a baseline.

Test 4
For completeness, I ran a single test in stable with lazy loaded content and inlined CSS.