我可以將我的外部css文件放在html頁面的末尾以防止渲染阻塞？

我已經完成了谷歌網頁速度測試。在報告中，它建議我刪除摺疊內容上方的渲染阻止CSS資源。我開始知道我有14個外部CSS文件，這會導致加載我的頁面時出現延遲。那麼我可以把我的CSS文件放在HTML標籤的末尾，還是有其他方法可以做到這一點？我可以將我的外部css文件放在html頁面的末尾以防止渲染阻塞？

來源

2017-07-14 Intern

[僞君子]（https://developers.google.com/speed/pagespeed/insights/?url=www.google.com&tab=mobile） –

將不同樣式表的內容放在一個文件中？ – Cyclonecode

如果你把css放在文件中，它會加載得更快一些，但是當它加載時，所有的內容都是無風格的。 – fen1x

-3

在文件的結尾把它會導致瀏覽器首先顯示所有的HTML wihtout任何造型。我個人覺得不盡人意。

嘗試，而合併的CSS文件一起只使用一個大的縮小的文件，因此在瀏覽器只需要加載一個文件的CSS。

來源

2017-07-14 06:13:04 SVARTBERG

哈哈，爲什麼downvoting？我說的是不正確的嗎？ – SVARTBERG

這應該是一個評論。 –

首屏內容的手段，你在屏幕上看到目前沒有對屏內容滾動down.the風格是必要的初始負載，其他款式可以下載later.so你可以做什麼，有兩個樣式表一個包含初始頁面加載和其他樣式表的樣式將具有styles.the第二樣式表的其餘部分可以包括通過JavaScript

如何優化你的CSS文件中有更好的表現

的

代替具有這樣米任何外部文件，結合那些爲單個文件。這個會的請求數量減少到服務器
縮減大小的CSS文件（這將刪除多餘的空格）
刪除未使用的CSS。你可能已經使用了像twitter bootstrap和foundation這樣的前端框架。有很多插件來識別未使用的CSS列表。

來源

2017-07-14 06:26:41 codegeek

+1確保你還發送g-zip內容。真實生活表現 - 其中**包括可維護性** - 優先於谷歌自己的一些評分系統[他們似乎不關心他們的產品。]（https://developers.google.com/speed/pagespeed/洞察/？url = youtube.com＆tab = mobile） –

@Ihazkode是的，我發送g-zip內容 – Intern

@Intem，我們可以做很多事情來優化網站，在這個網站有非常好的文章https：// varvy .COM /的PageSpeed / – codegeek

做你的建議將加載未樣式，然後CSS加載後的網站將獲得的造型，這將給一個幹/壞UX網站的內容。相反，您可以內聯（或在頭標籤內添加）第一個摺疊內容，即需要對網站第一部分進行樣式設置而不滾動的CSS。然後在生產模式下將所有的css文件合併到一個文件中，如果您的源文件是可信來源，則文件的文件名爲dns-prefetch。此外，如果您使用的是通過捆綁的WebPack一個反應應用程序，你可以嘗試實施code splitting加載有關路線束。拆分供應商的css/js文件和您的應用程序文件，以便可以利用瀏覽器緩存。

Udacity有這個免費的課程here它可以讓你更好地瞭解如何優化你的頁面加速時間。

來源

2017-07-14 06:35:51

你可以做到這一點，它會加載速度更快，但被加載時，它會是無樣式。如果這對你是好的，那就繼續做吧。但是，如果你問我，你可以將你的CSS樣式/文件分類爲緊急，而不是那麼緊急。如果您的頁面加載時間爲5秒，並且所有內容都是無風格的，那麼您可能會認爲結果在用戶體驗方面不是很好。所以，拿起你絕對要在開始時加載的樣式，並將其餘的放在最後。

來源

2017-07-14 11:28:52

我可以將我的外部css文件放在html頁面的末尾以防止渲染阻塞？

回答

相關問題