2016-08-06 39 views
0

有人能告诉我为什么以下工作渲染延迟脚本突然无法通过Google Pagespeed Insight Test?推迟上面的CSS渲染突然无法通过Google Pagespeed Insight Test

<script> 
function loadCSS(href){ 
var ss = window.document.createElement('link'), 
ref = window.document.getElementsByTagName('head')[0]; 
ss.rel = 'stylesheet'; 
ss.href = href; 
// temporarily, set media to something non-matching to ensure it'll 
// fetch without blocking render 
ss.media = 'only x'; 
ref.parentNode.insertBefore(ss, ref); 
setTimeout(function(){ 
// set media back to `all` so that the stylesheet applies once it loads 
ss.media = 'all'; 
},0); 
} 
loadCSS('link.css'); 
</script> 

<noscript> 
<!-- Let's not assume anything --> 
<link rel="preload" href="link.css" as="style" onload="this.rel='stylesheet'"> 

</noscript> 

的页面是http://www.landshoppe.com/

我使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript" async></script> 

在页脚

回答

0

我终于找到了答案。这个答案对于那些正在为如何让Google pagespeed得分正确而打破头绪的人有用!

我觉得我差点破解它。我在桌面上有98个,在手机上有94个。移动到即将完成100完美! :)

块优化的CSS呈现'高于折叠'(ATF)基本上意味着所有的“折叠之上”样式在'head'和'style'标签之前'内联'(Do not甚至在.css文件中保留一个ATF类或ID)!并将所有内容填充到外部CSS文件中并将其转储到页脚,或者使用JavaScript或任何其他您喜欢的方法推迟它,Google Pagespeed Insight将很乐意忽略它! :)如果你甚至在css文件中留下了一个课程或ID,那么GPS会通过不停地喊'Render Blocking CSS'来使你的完美得分生活变得悲惨!即使你做任何事情都要推迟!

忘记了一切你学到的关于不内联任何CSS并将其全部放入外部文件! :)

干杯!