moving stylesheet refs to footer and using critical path CSS

Hello-

We are currently running 3.40 of nopC and the Alfresco theme and in an effort to improve our Google PageSpeed Insights score, I want to move our bundled/minified stylesheet references into the footer and utilize inline critical path CSS to at least load some elements and hide other elements until the stylesheets in the footer have rendered.

I'm having trouble determining which styles are absolutely essential to having my pages begin to load without looking "un-styled" for a moment.
Has anyone using Alfresco theme put together a critical path CSS they'd be willing to share with me?

Also, we are planning to upgrade to 4.0 this winter and wondering if you guys have considered building this functionality into the themes so as to allow nop store owners to choose the location (header/footer) for their styles to be rendered and if so, which page element styles should be included in the inline "critical path" CSS.

Thanks!

Hello Joster,

I don't think it's quite possible to split your css to "essential" and "non-essential", or if not impossible, then at least it will be quite difficult.

Besides, the Alfresco theme just has been refactored for 3.9, and the whole css code has been rewritten and optimized + some design improvements have been made, so if you are planning to upgrade to 4.0 it is pointless to do any modifications on your theme now. Keep in mind that if you already have custom modifications, you have to merge it manually when you update your theme, otherwise they will be lost.

I hear you...
I'm not really thinking of including any more than just the main body elements, header elements like logo and search box, master column wrapper and maybe the styles from the mega menu in my critical styles in the head.

I was thinking of maybe just using a  

display:none;

  on the header-links-wrapper and main-slider in the head critical styles so they won't appear until the actual stylesheet in the footer is loaded.

Thanks for the information!