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

Question

谷歌PageSpeed Insights將此標記爲我應該修復的東西 - 我已閱讀關於優化CSS遞送的指導https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery，但我對最佳實踐感到困惑，也在哪些資源呈現阻塞，哪些不是？

是否Google建議從頁頭刪除樣式錶鏈接，並用內聯樣式替換以使呈現呈現，然後使用JavaScript來觸發外部樣式表以在window.onload觸發時加載？這不就是延遲到達'正確呈現'頁面的過程嗎？瀏覽器開始儘快下載CSS會不會更好？

Answer 1

是的，這幾乎是你引用的頁面推薦的。直接在<style>標籤內的HTML標記中放入最少量的CSS（只要是少量的）。然後在文檔的末尾添加一組完整的樣式。 （在這個例子中，它實際上並沒有通過JavaScript本身加載;相反，到外部樣式表的鏈接被放置在<noscript>標籤中。這有點破解，但它可以完成工作，也可以請求樣式表通過AJAX直接注入）

這種方法只適用於如果你可以隔離你的頁面所需的最小CSS和CSS的數量相當小。例如，如果您正在構建單頁網絡應用程序，那麼您的許多CSS規則可能適用於除初始視圖外的部分應用程序。在這種情況下，這些額外的規則可以放在外部樣式表中。或者，也許你有嚴格的彈出式對話框規則集。這些規則也可以推遲。

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