lighthouse - 修复灯塔性能问题 = “减少第三方代码的影响”

Question

我在这个网站https://www.sandboxsocial.app上运行 Chrome 的灯塔报告，我得到了这个减少第三方代码的影响，读到这个我发现一个解决方案是使用 dns-prefetch资源的域并将其与预连接配对，如下所示：

<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="preconnect" href="https://www.facebook.com" crossorigin>
<link rel="dns-prefetch" href="https://www.facebook.com" />
<link rel="preconnect" href="https://www.hotjar.com/" crossorigin>
<link rel="dns-prefetch" href="https://www.hotjar.com/" />         
<link rel="preconnect" href="https://www.intercom.com" crossorigin>   
<link rel="dns-prefetch" href="https://www.intercom.com" />    
<link rel="preconnect" href="https://code.jquery.com" crossorigin>  
<link rel="dns-prefetch" href="https://code.jquery.com" /> 

无论如何，我一直在报告中看到这个问题，这就是我在代码中使用这些资源的方式：

<!-- Facebook Pixel Code -->
<script defer>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window,document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'id');
  fbq('track', 'PageView');
</script>
<noscript>
    <img alt="pixel" height="1" width="1"
         src="https://www.facebook.com/tr?id=id&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

<script>
  (function (a, s, y, n, c, h, i, d, e) {
    s.className += " " + y;
    h.start = 1 * new Date();
    h.end = i = function () {
      s.className = s.className.replace(RegExp(" ?" + y), "");
    };
    (a[n] = a[n] || []).hide = h;
    setTimeout(function () {
      i();
      h.end = null;
    }, c);
    h.timeout = c;
  })(window, document.documentElement, "async-hide", "dataLayer", 4000, {
    "GTM-******": true,
  });
</script>
<!-- Google Tag Manager -->
<script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-*****");
</script>   
<!-- End Google Tag Manager -->

还有什么我可以尝试的吗？， 谢谢！

标签： lighthouse