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

Question

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

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

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

使用此代码，小部件确实会在移动设备中加载，但我的 Google 页面速度得分降至 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:9999999999" onClick="javascript:_gaq.push(['_trackPageview', '/widgetTel']);">999.999.9999</a><br /></span>After hours:  <a href="mailto:email@email.com" onClick="javascript:_gaq.push(['_trackPageview', '/widgetEmail']);">email@email.com</a><br /></div></div>';}</script>
<?php endif; ?>

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

Answer 1

做：

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

这将允许先构建 DOM，然后添加您的 div，这样就可以了。

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

Defer loading of HTML widget with script tag

html

javascript

deferred-loading

pagespeed