2016-03-05 174 views
0

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

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

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

这是很多工作,但可行(我想)。

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

任何想法,将不胜感激。

大卫

+4

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

+2

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

回答

-1

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

+1

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

+0

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

1

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

首先我下载了​​一个自定义版本的引导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 =高于倍数)

大大简化了试错过程。