使用脚本标记延迟加载HTML小部件

Question

我有一个号召性用语小部件，我想在移动设备的首屏上显示。但是，Google PageSpeed在主要内容加载之前加载小部件是在惩罚我。我尝试将小部件嵌入到带有script属性的defer标记中，但现在小部件根本没有加载。

使用此代码，移动设备的Google PageSpeed得分为99，但小部件无法加载。

<?php if(is_mobile()) : ?>
  <script  type="text/html" defer>
    <div class="widget">Call Now</div>
  </script>
<?php endif; ?> 

使用此代码，小部件会在移动设备中加载，但我的Google Page Speed得分降至93。

<?php if(is_mobile()) : ?>
    <div class="widget">Call Now</div>
<?php endif; ?> 

这是完整的HTML小部件，以及@ randy-casburn建议的修复。窗口小部件也不会加载此代码。

<?php if(is_mobile()) : ?>
  <script defer>document.addEventListener('DOMContentLoaded', ()=> {document.querySelector('body').innerHTML += '<div id="mobile-cta" class="widget-wrapper widget_text"><div class="widget-title"><h3>Call or Email Now</h3></div><div class="textwidget"><span class="desktop-number">During office hours: 999.999.9999<br /></span><span class="mobile-number">During office hours: <a href="tel:[phone]" onClick="javascript:_gaq.push(['_trackPageview', '/widgetTel']);">999.999.9999</a><br /></span>After hours:  <a href="mailto:[email protected]" onClick="javascript:_gaq.push(['_trackPageview', '/widgetEmail']);">[email protected]</a><br /></div></div>';}</script>
<?php endif; ?> 

编辑：添加惩罚代码示例。

Answer 1

做：

document.addEventListener('DOMContentLoaded', ()=> {
  document.querySelector('body').innerHTML += '<div class="widget">Call Now</div>';
});

这将允许首先构造DOM，然后添加你的div，这应该可以解决问题。