Question

我有一个wordpress网站，它使用第三方javascript从Hubspot注入表单。该网站正在使用Autoptimize插件。在为Google网页洞察速度测试优化网站时，我遇到了问题：

我的页脚应该在展开的菜单中包含表单，但由于某种原因在身体中保持生成。我应该提一下，只有在使用 async 添加第三方脚本标记时才会发生这种情况。

我在代码段中写了两个不同的解决方案。最后加载所有其他依赖项。

如何将此表单加载到我的页脚并放置在应有的位置？

＆＃13;

<footer>
  <div class="container-fluid">

      <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 subscribe text-center">
        <div class="content tframe fw fh">
          <div class="tcell valign-mid">
            <div class="collapsible-data">
              <a href="#" class="collapsible-opener">
                Subscribe <span class="more">for Updates</span> <i class="fa fa-angle-up" aria-hidden="true"></i>
              </a>
              <div class="collapsible-content">
                <div class="row" eq-height="">
                  <div class="col-lg-12 pull-left" eq-col="">
                    <div class="info">
                      <h3>Subscribe Today!</h3>

                     <!-- Start Solution 1: Prevents render blocking, but breaks layout -->
                      <script>
                        setTimeout(function(){
                          $.ajax({
                            url: '//js.hsforms.net/forms/v2.js',
                            dataType: 'script',
                            cache: true,
                            success: function() {
                              console.log("AJAX success!")
                              hbspt.forms.create({
                              portalId: '2564694',
                              formId: '2a257043-30bc-4888-a09e-745501e0012a'
                              })
                            }
                          })
                        },2800);
                      </script>
                     <!-- End Solution 1 -->

                      <!-- Start Solution 2: Works, but becomes render blocking -->
                      <!--<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
                      <script>
                        hbspt.forms.create({
                        portalId: '2564694',
                        formId: '2a257043-30bc-4888-a09e-745501e0012a'
                        });
                      </script>-->
                     <!-- End Solution 2 -->

                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 social text-center">
        <div class="content tframe fw fh">
          <div class="tcell valign-mid">
            <div class="container-fluid">
              <div class="addthis_toolbox social">
                <a href="#" class="addthis_button_facebook" title="Facebook">
                  <i class="fa fa-facebook" aria-hidden="true"></i>
                </a>
                <!--<a href="#" class="addthis_button_twitter" title="Twitter">
                  <i class="fa fa-twitter" aria-hidden="true"></i>
                </a>-->
                <a href="#" class="addthis_button_email" title="Contact Us">
                  <i class="fa fa-envelope" aria-hidden="true"></i>
                </a>
                <a href="#" class="addthis_button_linkedin" title="LinkedIn">
                  <i class="fa fa-linkedin" aria-hidden="true"></i>
                </a>
                <a href="#" class="addthis_button_more" title="Share">
                  <i class="fa fa-share-alt" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 signup">
        <div class="content tframe fw fh">
          <div class="tcell valign-mid">
            <?php echo g2is_home_webinar_latest() ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
</div>

<!-- Pagespeed compliant - Avoid render blocking load of JS -->
<!--<script type="text/javascript">
  function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) };
  loadJS('<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js');
</script>-->

<!--Pagespeed compliant - Alternate non-render blocking JS -->
<script async type="text/javascript">
  function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js";
  document.body.appendChild(element);
  }
  if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

<?php wp_footer(); ?>

<!-- Social Share Links -->
<script type="text/javascript" async="" defer="" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-588971d14a074f13"></script>

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" async="" defer="" id="hs-script-loader" src="//js.hs-scripts.com/2564694.js"></script>
<!-- End of HubSpot Embed Code -->

</body>
</html>

＆＃13;

Answer 1

将代码包装在noptimize-tags中，cfr。 AO's FAQ？

从第三方javascript生成的表单不会出现在应该的位置

1 个答案: