Отложить загрузку 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: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

Do:

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

Это позволит сначала построить DOM, а затем добавить свой div, и это должно сработать.