html - 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 也可以加速您的生产网站，而不仅仅是您的本地开发环境。在您自己的主机上本地托管静态文件并不能解决 pagespeed 工具在此处建议的渲染阻塞问题。本地托管的静态文件仍然会呈现阻塞。

这里的解决方案是完全内联渲染阻塞 CSS 文件。但是，出于以下几个原因，我建议不要内联资源:

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

应该怎么做才能解决这个问题？您可能有不同的想法，但我建议您什么都不做。

1. 如果浏览器必须稍等片刻才能下载资源，那还不错。如果您使用 CDN，访问者很可能不会察觉到下载，因为现在大多数 CDN 的平均全局延迟都低于 50 毫秒。
2. 资源由浏览器缓存。虽然 pagespeed 工具会在每次请求时加载新资源，但请注意，浏览器可能会从缓存中加载一些资源，从而完全消除 CDN 请求。
3. 资源在网站之间共享。如果您从公共(public) CDN 使用 Bootstrap，访问者的浏览器缓存中很可能已经存在相同的 Bootstrap 文件，当用户访问另一个使用 Bootstrap 的网站时会下载该文件。这为该特定资源提供了 0 毫秒的延迟和 100% 的带宽节省，即使您的浏览器缓存中没有您站点的其他资源的第一次访问者也是如此。浏览器现在可以在其他地方使用节省的带宽来加快其他事情的速度。
4. 手动内联外部库使得跟踪库的所有内联副本变得更加困难，并使编辑和更新变得困难。
5. 动态内联为每个请求增加了一些磁盘搜索。这只会增加服务器负载。如果文件单独提供，则可以保存这些 IO。如果文件足够热，您的操作系统可能只会缓存这些文件。使用 CDN 将完全消除这种负载。

虽然不能完全消除此 pagespeed 警告的解决方案，但它可以减少渲染阻塞资源对真实访问者(而非性能测量工具)的影响:

1. 通过积极压缩来提供资源以减少负载大小。
2. 为资源提供不可变的缓存控制 header ，告诉浏览器放心地将该文件存储更长的时间，因为这在未来不会改变。如果你使用 bootstrap cdn pagecdn默认启用这两个优化。
3. 如果您知道文件将在页面加载后立即加载，您可以使用 HTTP/2 服务器推送在浏览器请求之前传送文件。但是，如果您这样做，您将需要确保不会在每次请求时都主动推送相同的文件(这不是一个好的选择，因为文件应该在第二次请求后从浏览器缓存中加载)。