Deferred CSS Execution [#2682923]

When doing a PageSpeed Insights test, we received the Optimize CSS Delivery:

Bootstrap: jsdliver.net
Google Fonts: googleapis.com
Advagg Bundled CSS: localhost

When we enable Deferred CSS Execution to any of the options, it shows the site without any proper styles for a split second and then renders the site when the CSS is loaded. Is there anyway to achieve the Pagespeed Insights' Optimized CSS Delivery without breaking the CSS for a split second?

Comments

Comment #1

7 March 2016 at 21:34

pdesai created an issue. See original summary.

Comment #2

mikeytown2 CreditAttribution: mikeytown2 commented 7 March 2016 at 23:14

Inlining critical CSS is what you're looking for and it's not easy to do. There is a dev module that is more like a proof of concept https://www.drupal.org/project/css_delivery and then there is an article that talks about how to use grunt to generate the critical css http://fourkitchens.com/blog/article/use-grunt-and-advagg-inline-critica...

Comment #3

pdesai CreditAttribution: pdesai commented 8 March 2016 at 07:02

Thanks! I was able to achieve 100% in Mobile using CSS Delivery module. However, for the Desktop side it still giving me the "Optimize CSS Delivery" for the bundled advagg CSS file and now it is throwing a new warning about "Prioritize visible content" - almost there!