关键CSS，高于折叠内容和渲染视图 [英] Critical css, above the fold content and rendered views

问题描述

我目前正在研究我的建设/部署管道。
在网上提供的有关critical-css-inlining的所有内容都很好，很漂亮，但它不适合您的网页（视图）在其中进行组合的真实场景。
我有：

• header.html


• view.html（home.html ，about.html，single.html，category.html）
  
• footer.html

任何网页都是连接的标题+视图+页脚。
内容不可预知：您无法知道呈现的类别视图中会有多少文章。

我应该使用最大数量的构建伪装配视图吗？内容可以显示在上面的每个视图的折叠部分，然后提取css？是否有任何已知的方法来实现目标？

这不是关于WordPress的，所以请不要提及插件或类似的东西。

解决方案

使用这个： https ：//www.npmjs.com/package/grunt-critical-css

在yeoman-blog上的

也有很多grunt / gulp的建议if您希望提高网页的整体表现： http://yeoman.io/blog/performance-optimization .html

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

这篇关于关键CSS，高于折叠内容和渲染视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！