Bootstrap CDN渲染延迟

Question

一直在网站上工作，并通过放置

通过MAX CDN使用Boostrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

在头部。

Google Pagespeed正在展示：

您的网页有1个阻止的CSS资源。这会导致呈现页面的延迟。 在不等待加载以下资源的情况下，无法呈现页面上的上述内容。尝试推迟或异步加载阻止资源，或直接在HTML中内联这些资源的关键部分。 优化以下内容的CSS交付：

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

有没有解决这个问题？

由于

Answer 1

更改CDN（ ，它很可能无法为您执行任何操作 ），或者只是在本地存储文件。这会提高您的Google Page Speed速率。

下载您正在使用的引导程序文件的副本，并将其存储为root/css/bootstrap.min.css

root是您的项目文件夹。

CDN主要用于测试目的（即时访问文件）或大型项目，这些项目有多个要求无法在本地得到满足。

<强> Read this thread to better understand.

虽然Google为您提供的错误可能不是您项目的严重问题，但在本地使用您的资源始终是一个好习惯，这样您的网站可以自行加载，而无需引用类似于单独的外部来源查询。

  

静态文件=更好的加载时间=快乐的Google。

Answer 2

另一个答案太不正确了，所以如果有人仍然需要帮助，我正在写这篇文章。

CDN不仅可以加速本地开发环境，还可以加快生产网站的速度。在您自己的主机上本地托管静态文件不能解决pagespeed工具在此处建议的“渲染阻止”问题。本地托管的静态文件仍在阻止渲染。

此处的解决方案是完全内嵌渲染阻止CSS文件。但是，出于以下几个原因，我建议不要内联资源：

1. 通过CDN交付的资源交付速度更快。如果内联它们，则预期整个有效负载将以缓慢的速度传递。
2. 单独交付的资源由浏览器缓存，而如果您内联CSS资源，浏览器将无法在请求之间重用它们。
3. 内联的资源随每个请求以及文件的其他动态内容一起压缩。您无法利用CDN附带的预压缩功能。
4. 由于内联CSS文件，导致更大的HTML文档在解析时会变慢。

应该怎么做才能解决此问题？您可能会有所不同，但我建议您什么也不做。

1. 如果浏览器需要等待一点时间来下载资源，那还不错。如果您使用的是CDN，则访问者可能不会意识到下载，因为现在大多数CDN的平均全球延迟少于50ms。
2. 资源由浏览器缓存。虽然pagespeed工具会在每个请求上加载新资源，但请注意，浏览器可能正在从缓存中加载一些资源，从而完全消除了CDN请求。
3. 资源在网站之间共享。如果从公共CDN使用Bootstrap，则访问者的浏览器缓存中可能已经存在相同的引导文件，当用户访问另一个使用引导程序的网站时，该文件就会下载。对于您的浏览器缓存中没有您网站其他资源的初次访问者，这可以为特定资源提供0毫秒的延迟和100％的带宽节省。浏览器现在可以将节省的带宽用于其他地方，以加快其他速度。
4. 手动内联外部库使跟踪该库的所有内联副本变得更加困难，并且使编辑和更新变得困难。
5. 动态内联会为每个请求增加几个磁盘搜索。这只会增加服务器负载。如果单独提供文件，则可以保存这些IO。如果文件足够热，您的操作系统可能只缓存文件。使用CDN将完全消除这种负担。

尽管不是完全可以消除此pagespeed警告的解决方案，但有可能减少渲染阻止资源对实际访问者的影响（不是性能衡量工具）：

1. 使用主动压缩来服务资源以减小有效负载大小。
2. 使用不可变的高速缓存控制标头提供资源，以告诉浏览器放心地将此文件存储更长的时间，因为将来这种情况不会改变。如果您通过pagecdn使用bootstrap cdn，则默认情况下将启用这两个优化。
3. 如果您知道要在页面加载后立即加载文件，则可以使用HTTP / 2 Server Push来发送文件，甚至在浏览器要求之前也可以。但是，如果执行此操作，则需要确保不会在每个请求中都强制推送相同的文件（这不是一个好选择，因为该文件应在第二个请求之后从浏览器缓存中加载）。