0

我有一个号召性用语小部件，我想在移动设备的首屏显示它。但是，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: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; ?>

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

4

1 回答 1

1

做：

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

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

于 2018-05-14T14:01:50.333 回答