如何克服在PageSpeed Insight中消除渲染 - 阻挡CSS

我执行了PageSpeed Insights测试我的网站使用WordPress创建的。如何克服在PageSpeed Insight中消除渲染 - 阻挡CSS

它显示消除阻止呈现的JavaScript和CSS在上述屏内容

该错误消息消失，当我除去的style.css文件这是我的核心CSS文件包含7000行代码。

参照Optimize CSS Delivery，我应用这个线路编码的进入我<script>

<script> 
var cb = function() { 
    var l = document.createElement('link'); l.rel = 'stylesheet'; 
    l.href = 'small.css'; 
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(cb); 
    else window.addEventListener('load', cb); 
</script>

应用此方法会导致更多的阻塞资源。

我可以知道如何解决这个问题？谢谢。

P/S：请提供一个原因，如果你downvote。所以我下次可以提高我的质量。

来源

2016-03-15 WeeHong

这里的人Downvote只是为了好玩。如果你回答了一个问题，并且有人不同意你的问题，或者他们有自己的答案......他们就以你的答案为目标。 –

我认为PageSpeed Insights在他们的算法中非常具有侵略性，即使你的页面加载得太快，你可能会得到一个低分，为了获得高分，你应该内嵌你的CSS或者将它放在页面底部但取决于你的网站的大小，它可能会导致另一个问题，如FOUC，这是一个非常糟糕的用户体验，所以我也考虑使用其他工具，如：https：//www.webpagetest.org/来检查你的并且不会争取只在PageSpeed Insights中获得100％的分数，同时也考虑到高质量的内容和可用性。 –

您可以异步加载CSS，还是有需要的媒体查询？

要做的最好的事情是内联一些媒体查询的东西，以便每个查询都从HTML完成 - 这将消除渲染阻塞。

但是我会说，如果你的页面加载速度在chrome中显示得较低，那么Pageinsights可以被忽略。这不是100％。这就是您真正想要关注的地方，因为Google为用户反馈提供的信誉超过了bot的质量得分。如果你可以减少到0.5秒的负载，用户将反弹得更少。

来源

2016-03-15 19:02:42

如何克服在PageSpeed Insight中消除渲染 - 阻挡CSS

回答

相关问题