Question

有人可以告诉我为什么以下工作渲染延迟脚本突然无法通过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>

在页脚

Answer 1

最后我找到了答案。这个答案可能对那些对如何正确获得Google pagespeed得分感到不满的人有用！

我想我几乎破解了它。我的桌面设备有98，移动设备有94。快速成功完成100！：）

优化阻止渲染的CSS＆＃39;在折叠之上＆＃39; （ATF）基本上意味着拥有所有＆＃39;以上折叠＆＃39;要打造的样式＆＃39;在＆＃39; head＆＃39;之前内部＆＃39; style＆＃39;标签（不要在.css文件中留下一个ATF类或id）！并将所有其他内容放入外部css文件并将其转储到页脚，或者使用javascript或任何其他您喜欢的方法推迟它，Google Pagespeed Insight将很乐意忽略它！ :)如果你在css文件中留下一个类或Id，那么GPS将通过不知疲倦地大喊“渲染阻止CSS”来让你的完美得分生活变得悲惨。！即使你做了一切都推迟了它！

忘记所有关于不内联任何CSS并将其全部放在外部文件中的知识！：）

干杯！

推迟上面的CSS渲染突然无法通过Google Pagespeed Insight Test

1 个答案: