消除渲染封鎖CSS

Question

我的CSS文件造成我的網頁渲染緩慢，這就是爲什麼我把它們移到頁腳。但是，這會產生UX問題，因爲當頁面加載時，它最初是完全無風格的。

我想過兩種解決了這一問題，並想知道這是最好的：

• 移動的CSS聲明導航欄和頁面標題到一個新的CSS文件，該文件將被放置在標題。雖然這將是一個相對較小的文件，它具有創造另一個HTTP請求

• 內聯的CSS在頭本身的導航和頁面標題的缺點。雖然這不會創建另一個HTTP請求並且可以解決問題，但是如果將它放入外部文件中，CSS將不會被緩存。

這個問題的最佳解決方案是什麼？是否有良好的實踐指導方針？

Answer 1

呀，解決這個問題是你的CSS的關鍵部分（或全部）直接嵌入到像文件（index.html的），因爲如果你有更多的文件，這是爲他們每個人，因此新的請求更多的時間才能加載頁面:)

Answer 2

據谷歌稱，最好的選擇是第二個。

As described here

Answer 3

良好做法準則是：

• 寫入時的最低CSS越好，避免不必要的寫CSS屬性。
• 總是嘗試爲所有樣式創建一個css文件，除非需要使用多個css文件。即使如此，也不要創建超過3個css文件。
• 使用CDN鏈接來包含框架，工具包。
• 避免編寫內聯css樣式，使用外部css文件。
• 正確使用html標籤。 html5引入了一些新的標籤，如標題，主要，旁邊，導航，頁腳。正確使用這些標籤。它給出了一個清晰的結構。所以沒必要手動爲這些標籤創建div類。

我的問題是，你如何知道你的CSS文件導致你的頁面渲染緩慢？你使用任何JavaScript/jQuery插件？