问题标签 [critical-css]

我正在尝试理解关键 CSS。

我知道使用关键 CSS 工具可以提取重要的 CSS，这对于加载“首屏”的内容很重要。

我遇到的问题是：DOM 和浏览器是否会再次加载整个 CSS（放置在页面下方）？这样做的结果将意味着 CSS 类将被重复，这没有多大意义。

换一种说法——整个 CSS 文件是分开的，因此没有重复的类吗？

我试图通过超越渲染阻塞 css 来提高我的网站的性能。只有一个文件似乎有问题，那是我从 CDN 获得的缩小引导样式表。我尝试了多种不同的方法，但没有任何效果。我想在我的项目中有一个 Bootstrap CDN 样式表的副本，并对其进行编辑，使其只有我当前在我的网站上使用的 css。有没有办法序列化您的网站，并从样式表中删除任何未使用的样式？我已经阅读了几种不同的方法，但它们中的大多数在 Chrome 之外的浏览器中都不起作用，并且在样式表中点击媒体查询时会中断。

所以我使用 Webpack 来捆绑我的 js 和 css。

我添加了 Webpack-plugin-critical 以输出具有关键样式的外部 css 文件。该文件被添加到我的（树枝）模板中。

如果我第二次运行 Webpack，它会正常工作，尽管初始构建失败并且我收到一条错误消息，说它找不到主要生成的 css 文件。如何将 ExtractTextPlugin 的主 css 文件输出公开给 Webpack-plugin-critical 允许它在初始构建时使用该文件并生成一个关键 css 文件？

我正在使用critical为我的网站生成关键路径 CSS。我有一个 gulp 任务设置如下：

我想知道是否可以获取output参数的值，即我的关键 CSS，并通过内联标记内的 gulp 将其注入我的母版页<style>？

我尝试使用我的 Masterpage 作为dest属性，但这不起作用，因为源文件不同，因为它是由服务器生成的 HTML 组成的。我也不能将 Masterpage 用作源文件，因为出于显而易见的原因，它并不是呈现给用户的真实表示。

像html-replace这样的东西会为此工作吗？

我想使用 mix.sass 和 PostCss 关键 CSS 拆分来设置 Laravel Mix。最后我想要两个文件：app.css 和 app-critical.css。

不幸的是，我可以让它工作。我尝试过的设置之一（webpack.mix.js）：

当我通过“npm run watch”运行脚本时，出现错误：

此外，我的文件只是复制了所有关键样式。文件越来越大，每次输入 SCSS/CSS 文件更改时都会扩展重复的代码。

我确实尝试设置 Laravel Mix + mix.sass + 以下插件之一：

• https://github.com/zgreen/postcss-critical-css
• https://www.npmjs.com/package/postcss-critical-split

没有成功:(有人有工作设置或链接到示例存储库吗？

谢谢，滕

所以，谷歌建议使用这个 npm 包来生成关键的 CSS：

它实际上是一个很棒的工具，就像一个魅力。唯一的缺点是它仅适用于 Gulp 中的单个文件，而不是可以gulp.src('app/*.html')为所有匹配文件调用的其他任务。

所以我决定在一个数组中列出我所有的页面并遍历它们：

这也被证明是一个可行的解决方案（除了一些 node.js 内存问题）。

现在的问题是我必须在数组中手动​​列出页面。所以我想知道是否有一种方法可以自动生成这样的列表，其功能类似于gulp.src('app/*.html')例如包含所选文件夹中的所有 .html 页面以生成关键的 CSS？

任何帮助将不胜感激！

I want to load for every page the riht criticalCSS File.

So I saved them like this:

fileadmin/critical1.css for TSFE:id=1

fileadmin/critical2.css for TSFE:id=2

and so on. As there are a lot of pages I want the TS to be completely dynamic and NOT like this:

I want it like this:

or this

But it is not working like this. Does anyone know how to do this?

这个问题更多的是理论而不是实际。我需要为站点中的 css 生成关键路径。我阅读了有关此工具的教程：https ://github.com/addyosmani/critical ，我在这里报告了基本示例：

就我而言，我有这个codeigniter结构：

routes.php 关于主页、关于页面和页面联系人是：

Matching 控制器中的方法列表如下：

有没有办法用这种结构生成一个关键的 css？

我试图通过在折叠代码上方包含内联 css 来加快页面加载速度。这适用于根目录中的页面，但我在加载子文件夹中页面末尾的其余 CSS 文件时遇到问题（即http://example.com/other/index.html） .

如果当前文件位于根文件夹中，则以下代码可以正常工作：

但如果当前文件位于子文件夹中，则以下代码不起作用：

另外，如果我尝试绝对路径，它也不起作用：

文件的相对位置是正确的，因为如果我在文档的头部有以下行：

它也可以正常工作，但我不想使用它，因为它会减慢页面的渲染速度。我不精通 JavaScript，只是从在线关键路径 CSS 生成器中获取所需的代码。任何人都可以提供一个解决方案，因为这个网站上的类似问题都没有一个令人满意的答案。

当我运行gulp critical命令时，elixir 会加载一段时间，然后在控制台中出现错误：

我已经用 node npm 正确安装了这个包。

有什么问题？