I'm currently working on my gulp building/deploying pipeline. All the content available on the web about the critical-css-inlining is nice and pretty but it doesn't fit well with real world scenarios where your pages (views) are dinamically assembled. I have:
- header.html
- view.html (home.html, about.html, single.html, category.html)
- footer.html
Any web page is a concatenated header + view + footer. Content is not predictable: you cannot know how many articles there will be in a rendered category view.
Should I build fake assembled views with the maximum amount of content that can be displayed in the above the fold portion for each views and extract then the css? Is there any already known method to accomplish the goal?
It's not about wordpress so please don't mention plugins or stuff like that.
use this: https://www.npmjs.com/package/grunt-critical-css
on the yeoman-blog are also a lot of grunt/gulp recommendations if you want to increase your page performance in general: http://yeoman.io/blog/performance-optimization.html