javascript - Google PageSpeed 消除首屏内容中的呈现阻塞 CSS Wordpress

Question

我有一个网站 www.nursecpdonline.com.au ;它完全响应。

我现在遇到的问题是渲染样式表。我知道我应该创建一个关键的 CSS并将其内联到页面中。

但是，我遇到的问题是所有 <link rel="stylesheets">在 PageSpeed 中导致渲染阻塞高于折叠错误，并且知道谷歌也会因此惩罚 SEO 排名。

我不知道如何修复它，我尝试了各种 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';
});