加载引导CSS页面加载后

问题描述：

谷歌PageSpeed Insights的是建议删除渲染封锁CSS：加载引导CSS页面加载后

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

实现这一目标意味着从引导样式规则挑选出足够的片呈现屏内容，然后链接在页面加载完成后引导css文件。

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

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

任何想法，将不胜感激。

大卫

您可能需要自定义下载：http：//getbootstrap.com/customize/。您可以选择您需要的功能并禁用其他功能。 – AMACB

在已建立的cdn上使用完整的css文件是一个更好的解决方案，因为用户很可能已经在他们的机器上有这个文件（缓存）。自定义版本的bootstrap意味着用户将不得不下载（不需要）。同样，即使自定义引导程序也会产生一个文件，这个文件太大而不能包含内联css，因此，不能解决问题（渲染阻塞） – Cymro

答

尽量避免使用的CDN的自举和JS，如果您需要的性能。在你的情况下获得引导getbootstrap.com/getting-started/的副本，并将其集成到您的css目录中。

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp“Many用户在访问另一个站点时已经从MaxCDN下载了Bootstrap，因此，当它们访问您的站点时，它将从缓存中加载，从而加快加载速度。同时，大多数CDN将确保一旦用户请求文件它将从离他们最近的服务器提供服务，这也会导致更快的加载时间。“ – Cymro

@ Cymro的正确。除了已经说过的之外，使用CDN也意味着您的服务器将节省一些带宽。 Bootstrap增加了大量的加载 - 它自己的CSS，字体，js和jQuery作为依赖。所有这些加起来超过200kB（〜60kB gzipped）。感谢CDN，您可以节省每次访问的转移次数 – zhirzh

答

我发现最终的解决方案，我想分享，如果别人需要它。

首先我下载了一个自定义版本的引导CSS作为AmacB建议上面。我将css复制到excel中，每条规则都有1行。在接下来的文章中，我把一个X每条规则旁边，在第3列，我写了一个公式来显示规则，如果有一个X，并没有表现出规则如果没有X。然后，我复制第三列并将其作为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中，我做了一个链接到引导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工作表的规则旁边，点击“保存CSS”按钮（你可以添加一个按钮到Excel中工作表），规则保存为一个名为bootstrap-atf的css文件。css（atf =高于倍数）

大大简化了试错过程。

答

我会从CDN网页内容后，使用JS加载引导，然后使用这个在线工具来提取关键路径CSS： https://jonassebastianohlsson.com/criticalpathcssgenerator/ （或者你可以用节点或PhantomJS本地使用相同的工具：https://github.com/pocketjoso/penthouse）

提取的CSS将被最小化并放置在页眉中。

加载引导CSS页面加载后

相关推荐