优化CSS投放 - Google的建议 [英] Optimize CSS Delivery - a suggestion by Google

问题描述

Google建议在< noscript>< link rel =stylesheethref =small.css>< / noscript> / code>。

Google suggests to use very important CSS inline in head and other CSS inside <noscript><link rel="stylesheet" href="small.css"></noscript>.

这在我看来提出了一些问题：

This raises few questions in my mind:

• 如何优先在两个文件的CSS。该页面的所有内容都很重要。显示，字体等。如果我把它移动到底部，那么如何帮助页面呈现。难道会引起重绘等吗？


• 在Document ready事件之后是否需要CSS？从 此处 。


• CSS如何能够进入< noscript>< / noscript> 当JavaScript启用时它会工作吗？它是浏览器兼容吗？

• How to prioritize CSS in two files. Everything for that page looks important. Display, font etc. If I move it to bottom then how it helps page render. Wont it cause repaint, etc?
• Is that CSS is required after Document ready event? Got it from here.
• How 'CSS can' go inside <noscript></noscript>, which is for script? Will it work when JavaScript is enabled? Is it browsers compatible?

参考

推荐答案

根据我对阅读问题中提供的链接：

Based on my reading of the link given in the question:

1. 基于消除Flash-of-Unstyled-Content效果，选择内联的CSS声明。因此，请确保所有页面元素的大小和颜色正确。 （当然，如果你使用网络字体，这是不可能的。）


2. 由于没有内联的CSS是可延迟的，你可以随时加载它。将其加载到 DOMContentReady ，在我看来，反对这一优化：在文档完全加载之前启动新的HTTP请求可能会减慢页面加载的其余部分。另请参阅我的下一个要点：


3. 该示例显示了noscript标记中的CSS作为后备广告。以下示例为页面状态

1. Choose which CSS declarations are inlined based on eliminating the Flash-of-Unstyled-Content effect. So, ensure that all page elements are the correct size and colour. (Of course, this will be impossible if you use web-fonts.)
2. Since the CSS which is not inlined is deferrable, you can load it whenever makes sense. Loading it on DOMContentReady, in my opinion, goes against the point of this optimisation: launching new HTTP requests before the document is completely loaded will potentially slow the rest of the page load. Also, see my next point:
3. The example shows the CSS in a noscript tag as a fallback. Below the example, the page states

原始small.css在页面加载后加载。

ie使用javascript。

i.e. using javascript.

如果我可以在这篇文章中加入我个人的意见：

If I could add my own personal opinion to this piece:

• 此优化对代码可读性特别有害：样式表不属于 noscript


• 这将打破对HTTP（或其他协议）请求的任何潜在的未来增强，因为网络事务是硬的，通过javascript进行编码。


• 最后，在什么情况下会获得性能提升？也许如果你的页面加载了很多初始隐藏的内容;但是我希望浏览器本身能够比这个黑客更好地优化页面加载。

盐。我会犹豫地说，Google不知道他们在做什么。

Take this with a grain of salt, however. I would hesitate to say that Google doesn't know what they're doing.

编辑：note on flash-of-unstyled-content （缩写为FOUC）

note on flash-of-unstyled-content (abbreviated FOUC)

说一个跨越多行的文本块，包括一些具有自定义样式的文本，例如< span class =my-class> 。现在，假设你的CSS会设置 .my-class {font-weight：bold} 。如果该CSS不是内联样式表的一部分，则在延迟加载完成后， .my-class 会突然变为粗体。

Say you a block of text spanning multiple lines, and includes some text with custom styling, say <span class="my-class">. Now, say that your CSS will set .my-class { font-weight:bold }. If that CSS is not part of the inline style sheet, .my-class will suddenly become bold after the deferred loading has finished. The text block may reflow, and might also change size if it requires an extra line.

因此，文字区块可能会重新流动，如果需要额外的行，也可能会改变大小。

So, rather than a flash of totally-unstyled content, you have a flash of partly-styled content.

由于这个原因，在考虑延迟的CSS时，应该小心。一种安全的方法是仅推迟用于显示本身延迟的内容的CSS，例如在用户交互之后显示的隐藏元素。

For this reason you should be careful when considering what CSS is deferred. A safe approach would be to only defer CSS which is used to display content which is itself deferred, for example hidden elements which are displayed after user interaction.

这篇关于优化CSS投放 - Google的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！