Question

Google PageSpeed的见解建议删除渲染阻止css：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

实现这一点意味着从引导程序样式规则中挑选出足够多的部分来呈现折叠内容，然后在页面加载后链接引导程序css文件。

这是很多工作，但可行（我想）。

但是，在页面加载后链接bootstrap css时，引导规则的所有内联覆盖都将丢失。

任何想法都会受到赞赏。

大卫

Answer 1

我最终找到了一个我想分享的解决方案，如果其他人需要它的话。

首先，我按照上面提到的AmacB下载了自定义css的定制版本。我将css复制到excel中，每条规则都有1行。在下一栏中，我在每个规则旁边添加了 x ，在第3列中，我编写了一个公式来显示规则，如果有 x 并且不显示规则如果没有 x 。然后我复制了第3列，并将其作为css文件上传到我的网站。

当然有效，但Css为32kbytes。内联太多了。

所以我开始查看每个规则，以确定我是否需要它来覆盖折叠内容。在我觉得不需要规则的地方，我删除了 x ，保存了第3列，上传并检查了它是如何工作的。这个过程花了几个小时，但最后我把css归结为我需要的那些规则。生成的文件大约有80条规则。

然后，在我的 php 文件中，我在页面标题中添加了：

$TheCSS=file_get_contents('/css/bootstrap-reduced.css');
echo '<style>'.$TheCSS.'</style>';

我在Pagespeed Insights上的得分现在 99/100 。

该解决方案为每个页面增加了4kb的效率。所以...在页面加载之后，在jquery中我创建了一个指向bootstrap cdn的链接，在下一页加载时，我使用该链接而不是插入内联css。

写了VBA代码以简化流程：

Sub SaveAsTextFile()
TheFileName = "bootstrap-atf.css"
ThePath = "C:\Users\MyFolder\"
Sheets("Sheet1").Columns("C").Select
Selection.Copy
Sheets.Add.Name = "Temp"
Sheets("Temp").Select
Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks:=False, Transpose:=False
Sheets("Temp").Columns("A").Select
LastRow = ActiveSheet.UsedRange.SpecialCells(xlCellTypeLastCell).Row

Set Rng = Selection
Open ThePath & TheFileName For Output As #1
For i = 1 To LastRow
 cellValue = Rng.Cells(i, 1).Value
 If cellValue <> "" Then Print #1, cellValue
Next i
Close #1
ActiveWindow.SelectedSheets.Delete
End Sub

在excel表格中的一系列规则旁边打勾，点击＆＃34;保存CSS＆＃34;按钮（您可以在excel工作表中添加一个按钮），规则保存为名为bootstrap-atf.css的css文件（atf =首屏）

大大简化了试错过程。

Answer 2

我会在页面内容后使用JS从CDN加载bootstrap，然后使用此在线工具提取关键路径CSS： https://jonassebastianohlsson.com/criticalpathcssgenerator/ （或者您可以在本地使用Node或PhantomJS使用相同的工具：https://github.com/pocketjoso/penthouse）

提取的CSS将被最小化并放置在标题中。

Answer 3

如果您需要性能，请尝试避免使用Bootstrap和JS的CDN。在您的情况下，获取bootstrap getbootstrap.com/getting-started/的副本并将其集成到您的css目录中。

页面加载后加载bootstrap css

3 个答案: