消除渲染阻止的JavaScript和CSS-需要建議

Question

Google PageSpeed Insights將其標記為我應該解決的問題-我已閱讀https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery上的優化CSS交付指南，但我對最佳實踐感到困惑是，還有哪些資源被渲染阻止，哪些不是？

谷歌是從提示頁頭拆除樣式表的鏈接，並與內聯樣式更換，使一些渲染，然后使用JavaScript來觸發外部樣式表加載在window.onload火災時？ 這不會只是延遲到達“正確呈現”頁面的過程嗎？瀏覽器盡快開始下載CSS更好嗎？

Answer 1

是的，這幾乎就是您所推薦的頁面所推薦的。 在<style>標簽內的HTML標記中直接放入最少量的CSS（只要是少量的CSS）。 然后在文檔末尾包含完整的樣式集。 （在示例中，它實際上並不是通過JavaScript本身加載的；相反，指向外部樣式表的鏈接位於<noscript>標記中。這有點麻煩，但是可以完成工作。您也可以請求樣式表通過AJAX並直接使用JavaScript注入。）

僅當您可以隔離頁面所需的最小CSS並且CSS數量相當小時，此方法才有效。 例如，如果您要構建一個單頁Web應用程序，則許多CSS規則可能適用於該應用程序中除初始視圖之外的其他部分。 在這種情況下，這些額外的規則可以放在外部樣式表中。 或者，也許您有一組嚴格用於彈出對話框的規則。 這些規則也可以推遲。

如果您不能真正將規則分為最初需要的規則和不需要的規則，並且最小規則集很大，則無法利用這種方法。