Google PageSpeed 第三方聊天加载问题

Posted 2023-02-25

技术标签:

【中文标题】Google PageSpeed 第三方聊天加载问题【英文标题】：Google PageSpeed third party chat loading issue 【发布时间】：2021-08-26 12:10:36 【问题描述】：

我正在使用下面的代码来执行实时聊天代码，通过它我添加了一个 div 并且聊天框显示哪个工作正常。

try 
  // LIVECHAT
  //if (matchMedia('only screen and (min-width: 1025px)').matches)
  //
  var __lc = ;
  __lc.license = XXXXXX;

  (function () 
     
      var lc = document.createElement("script");
      lc.type = "text/javascript";
      lc.async = true;
      lc.src =
        ("https:" == document.location.protocol ? "https://" : "http://") +
        "cdn.livechatinc.com/tracking.js";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(lc, s);
       
  )();
  var LC_API = LC_API || ;

  LC_API.open_chat_window = function () 
    $(".chatbox").show();
    $("#chat-widget-container").show();
  ;


  LC_API.on_chat_window_minimized = function () 
    
    $(".chatbox").show();
    $("#chat-widget-container").hide();
  ;

  LC_API.on_chat_window_opened = function () 
    $(".chatbox").hide();
    $("#chat-widget-container").show();
  ;

  LC_API.on_chat_window_hidden = function () 
    $(".chatbox").show();
    $("#chat-widget-container").show();
  ;
  //
 catch (err) 


$(".openChat").on("click", function (event) 
  
  LC_API.open_chat_window();

  return false;
);

但是当我去 Google Pagespeed Insights 并在手机 https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.rosterelf.com%2F 中跟踪网站时，我的排名一直很低。

交互时间 11.9 秒

如果我评论上面的代码，那么我的百分比会上升到 65 以上。

那么有人可以指导我如何优化这个脚本来解决这个问题吗？

谢谢

【问题讨论】：

TTI 正在计算加载所有 javascript 库所需的时间，如果我没记错的话。 cdn.livechatinc.com/tracking.js 这是脚本中添加的第三方cdn，如果您可以删除它，则速度将提高或下载然后使用它，然后速度也会提高。 @zanderwar 它的 12.7 秒。它是由于聊天..一旦我删除聊天脚本并减少它。 【参考方案1】：

是的，您可以优化脚本下载cdn链接https://cdn.livechatinc.com/tracking.js并保存在项目文件夹中

lc.src =
    ("https:" == document.location.protocol ? "https://" : "http://") +
    "cdn.livechatinc.com/tracking.js";

替换这个

lc.src ="folder_name/tracking.js";

然后页面速度增加。

【讨论】：

我试过没有成功。分数仍然没有提高。【参考方案2】：

当我们在页面上加载javascript 时，许多事情开始发生。首先，浏览器下载这个文件，因为它是一个 javascript 文件，它开始执行它并停止所有其他的事情，比如进一步解析页面。在您的情况下，同样的事情正在发生，它正在增加您页面的加载时间。

此外，您可以看到dnslookup 花费了很多时间，因此您也对此进行了改进。现在按照给定的步骤来缩短加载时间。

步骤：

preconnect

dns-prefetch

defer

async

<link rel="preload" as="script" href="critical.js">

在这里您可以看到加载时不需要出现聊天框。因此，您可以延迟 javascript 加载以提高页面速度。

按照上述步骤改善受 javascript 影响的页面性能

Google PageSpeed 第三方聊天加载问题

步骤：

更多提高页面速度的技巧：