Inconsistent Start Render

Web Performance Discuss Test Results
1

Hello all,

I understand that the current trend in website optimization is to start rendering the webpage as quickly as possible which can be done by eliminating render blocking JavaScript and CSS in above the fold content.

I’ve done exactly that and PageSpeed Insights does not warn me on that.
https://developers.google.com/speed/pagespeed/insights/?url=https://www.raymond.cc/blog/

Weirdly when I ran 20 tests in WebPagetest, only 4 results shows an early page rendering.
http://www.webpagetest.org/result/150619_SS_4TM/
http://www.webpagetest.org/result/150619_AR_53B/
http://www.webpagetest.org/result/150619_G0_5YN/
http://www.webpagetest.org/result/150619_HF_62R/

While the other 16 tests shows that the page only started to render after CSS, JS and web fonts are loaded.
http://www.webpagetest.org/result/150619_B6_52H/
http://www.webpagetest.org/result/150619_QF_549/
http://www.webpagetest.org/result/150619_CQ_55Z/
http://www.webpagetest.org/result/150619_F5_56R/
http://www.webpagetest.org/result/150619_WC_58Y/
http://www.webpagetest.org/result/150619_W8_5AV/
http://www.webpagetest.org/result/150619_F9_5GM/
http://www.webpagetest.org/result/150619_DT_5HC/
http://www.webpagetest.org/result/150619_6G_68E/
http://www.webpagetest.org/result/150619_Y1_68P/
http://www.webpagetest.org/result/150619_JA_6AF/
http://www.webpagetest.org/result/150619_QT_6B3/
http://www.webpagetest.org/result/150619_67_6BV/
http://www.webpagetest.org/result/150619_MV_6HK/
http://www.webpagetest.org/result/150619_WZ_6J2/
http://www.webpagetest.org/result/150619_YP_6JN/

The WordPress plugin “WP Deferred Javascripts” is used to defer JS.

I use the following JavaScript to load CSS asynchronously.

Theoretically, with CSS above the fold being added to the head, and all other files (CSS, JS, web fonts) being deferred, the render should start nearly instantly after the first HTML page being downloaded to the web browser.

Can anyone figure out what might be causing the problem of sometimes not being able to quickly render after downloading the first HTML page?

Thanks.

2

Chrome has a (bug/feature/issue) where any external css is considered to be render-blocking as soon as it is parsed, regardless of where it is in the document. I know there are discussions going on to fix the behavior so that styles in the body will not be render-blocking but that hasn’t been changed yet.

3

Thanks for responding Patrick.
That explains why Firefox works all the time but very randomly in Chrome.