使用引导程序时优化关键渲染路径

Question

如果我正在使用Bootsrap 3，是否可以优化关键渲染路径（类似于Google和Facebook正在做的事情）？

Facebook刚刚介绍了与标题和侧边栏相关的样式。 Google概述了所有样式，因为它们的主页样式不多。

这里的问题是，我想说我想要内联与我的标题相关的样式，它将包含来自bootstrap使用的10多个类（container-fluid，row，{{1 }，col-lg-10等。）。 并且内联引导是一个坏主意，因为它超过100kbs

我想加载折叠内容，非常快。

有没有聪明的方法呢？你有什么建议吗？

Answer 1

此技术独立于您的框架，在这种情况下为Bootstrap。 您必须想出一种方法来找出关键的CSS，然后将其提取并内联到HTML文件中。 有很多方法可以做到这一点：

• 自定义关键CSS文件（手动创建）
• 在CSS文件中键入注释，可以在编译/构建时提取注释：https://css-tricks.com/annotating-critical-css/
• 使用headless browser像Puppeteer一样自动

这个主题太大了，无法在短时间内回答，因此可以随时阅读上面列出的主题： https://web.dev/extract-critical-css/

工具：

• Critical
• criticalCSS
• Penthouse

Answer 2

我还没有开始做内联样式，在你需要沿着那条路走下去之前可以做很多优化。此外，还有一个巨大的权衡，HTTP请求中的重复样式的表现（可能是一把双刃剑）和维护噩梦。

1. 加载CSS。
2. 在身体末端加载JS。
3. 自定义引导程序以仅包含所需的最小样式。 http://getbootstrap.com/customize/
4. 捆绑＆amp;在单独的包中最小化您的头文件相关文件，考虑隔离引导程序组件。捆绑提供缓存和缩小。
5. 单页面应用程序，熟悉您的初始加载页面，并使用模块/ Web组件在html模板中使用ajax。
6. 使用CDN，因为每个主机有最多的http连接。

更多信息可以在https://developer.yahoo.com/performance/rules.html

找到

Answer 3

简短的回答是出于性能原因，您不应该添加额外的内联代码。最好的方法是尽量减少加载时间（如上所述），使用引导程序定制器删除您所需要的任何类，并在发送之前缩小和gzip（如果可能）。大多数时候你需要比100kbs bootstrap css少得多。

但是，在浏览器中呈现元素比向它们应用类更昂贵。您只能将加载时间最小化到一定程度。

您还没有告诉我们您期望的表现如何;但如果超级快速加载标题是生死攸关的情况，是的，你应该使用内联代码。