2014-01-30 51 views
3

正如我相信你們許多人都知道的那樣,Google PageSpeed Insights有時會在您測試網站時抱怨它稱之爲「呈現阻塞CSS」。如何從W3總緩存中獲取縮小的文件位置

他們的建議是在HEAD中只內聯呈現「必要的」CSS。如果你在外部文件中有CSS(就像大多數人一樣),建議在頁面加載後加載。這看起來非常極端,但這是建議。它似乎是一個很大的障礙,以提高一個人的移動PageSpeed分數,以及...

您可以使用PageSpeed模塊的Apache或Nginx,以幫助您確定哪些CSS實際上是「必要的」。再次,人們可以爭論這樣做的相對價值,但這是谷歌目前的建議。

我有一個概念,通過在我的主題的腳註中插入一個小腳本,將CSS注入到頭部,從而將JavaScript用於「延遲加載」CSS文件。你可以在這裏看到這種技術的一個例子:https://bensmann.no - 這不是我的網站。基本上,我希望複製或複製的內容,他與他的縮小的CSS做 - 其裝載到HEAD的頁面已經通過JavaScript包含在頁面

然後我會把<!-- W3TC-include-css --> 一個<noscript>標籤內的底部加載之後,從而抑制縮小的CSS的放置,並確保它出現在非JS瀏覽器上。

所以,問題是我需要以某種方式獲取縮小的CSS文件的位置,以及用於命名文件(用於元素的ID)的哈希。任何人都知道如何在頁腳中使用PHP訪問縮小的CSS文件的位置?

回答

0

你必須瞭解Critical Path CSS,這是一個大滑坡,確實,沒有人確切知道哪些CSS是關鍵或不重要。

在臨時(或作爲永久性解決方案)中,安裝Autoptimize等插件並進行操作將極大地提高Page Speed Insights分數。

記得打勾進入設置時顯示高級選項。我個人建議只需內聯所有 CSS並使用該選項,但這只是我。

如果在實現此操作後有任何插件被破壞,只需取消優化CSS代碼,找到插件的CSS文件,然後將其添加到例外列表中。

相關問題