谷歌PageSpeed消除以上倍摺疊內容的呈現 - 阻止CSS WordPress的

Question

我有一個網站www.nursecpdonline.com.au;它充分響應。

我現在遇到的問題是渲染樣式表。我知道我應該創建一個關鍵的CSS並將其內聯在頁面中。

不過，我遇到的問題是所有的<link rel="stylesheets">是造成阻止呈現在上面的錯誤摺疊的PageSpeed，知道谷歌將懲罰的是，搜索引擎優化排名爲好。

我不知道如何解決它，我嘗試了各種WordPress插件，但他們似乎打破了我的網站。

我設法通過WordPress中的插件添加異步來修復JS。

我讀過的地方，你不能有任何地方<link rel="stylesheet">但在標籤如果這是這種情況如何解決這個渲染問題的CSS？

Answer 1

這段代碼提供了一個消除渲染阻塞CSS的例子。看看你是否可以調整它，以適應你的情況。

// append css dynamically to head 
var head = document.getElementsByTagName('head'); 
var element = document.createElement('link'); 
element.rel = 'stylesheet'; 
element.type = 'text/css'; 
element.href = '//www.link-to-your-css-file.com/my.css'; 

// append the css file to the head 
element.media = 'non-existant-media'; 
head.appendChild(element, head.firstChild); 
setTimeout(function() { 
    element.media = 'all'; 
});