优化 CSS 发送过程【转】
原文链接:https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
̇ 当 PageSpeed Insights 检测到以下情形时,就会触发此规则:网页包含会阻止内容呈现的外部样式表(它们会延迟内容的首次呈现时间)。
概览
浏览器必须先处理当前网页的所有样式和布局信息,然后才能呈现内容。因此,浏览器会阻止呈现网页内容,直到外部样式表已下载完毕并处理完毕(这可能需要进行多次往返,因而可能会导致首次呈现时间延迟)。
建议
如果外部 CSS 资源较小,您可将它们直接插入到 HTML 文档中,这称为“内嵌”。以这种方式内嵌较小的 CSS 文件可让浏览器顺畅无阻地呈现网页。 请注意,如果 CSS 文件较大,完全内嵌 CSS 则可能会导致 PageSpeed Insights 通过优先加载可见内容规则向您发出网页首屏部分体积过大的警告。 如果 CSS 文件较大,您便需要确定和内嵌用于呈现首屏内容的 CSS,并暂缓加载其余样式,直到首屏内容显示出来为止。
- 内嵌较小 CSS 文件
- 请勿内嵌较大数据 URI
- 请勿内嵌 CSS 属性
内嵌较小 CSS 文件的示例
如果 HTML 文档如下所示:
<html> <head> <link rel="stylesheet" href="small.css"> </head> <body> <div class="blue"> Hello, world! </div> </body> </html>
并且 small.css 资源如下所示:
.yellow {background-color: yellow;} .blue {color: blue;} .big { font-size: 8em; } .bold { font-weight: bold; }
您就可以按照如下方式内嵌关键的 CSS:
<html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> <noscript id="deferred-styles"> <link rel="stylesheet" type="text/css" href="small.css"/> </noscript> <script> var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); </script> </body> </html>
系统会在网页中内嵌用于设置首屏内容样式的关键样式,并会立即将其应用到文档中。待系统完成对网页内容的初次绘制之后,整个 small.css 才会开始加载。一旦 small.css 加载完毕,系统便会将其样式应用到网页中,因而不会阻止初次呈现关键内容。
请注意,网络平台很快就会支持以不阻止内容呈现的方式加载样式表。届时,您可以使用 HTML Imports,而无需再使用 JavaScript。
请勿内嵌较大数据 URI
在 CSS 文件中内嵌数据 URI 时,请务必慎重。您可选择在 CSS 中使用较小数据 URI,毕竟内嵌较大数据 URI 可能会导致首屏 CSS 变大,进而延缓网页呈现时间。
请勿内嵌 CSS 属性
应尽量避免在 HTML 元素(例如 <p style=...>
)中内嵌 CSS 属性,因为这经常会导致不必要的代码重复。此外,在默认情况下,内容安全政策 (CSP) 会阻止在 HTML 元素中内嵌 CSS。