Google PageSpeed第三方聊天加载问题
我正在使用下面的代码来执行实时聊天代码，通过该代码我添加了一个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;
});但是当我进入并在移动https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.rosterelf.com%2F中跟踪该网站时，我得到了低排名，因为它一直在这么说。
互动时间11.9秒
如果我评论上面的代码，那么我的百分比就会上升到65以上。
那么，有人能指导我如何优化这个脚本来解决这个问题吗？
谢谢
回答 2
Stack Overflow用户
发布于 2021-06-18 05:25:50
当我们在页面上加载javascript时，就会发生许多事情。首先，浏览器下载这个文件，因为它是一个javascript文件，所以它开始执行它，并停止所有其他事情，比如进一步解析页面。在您的情况下，同样的事情正在发生，它正在增加页面的加载时间。
而且，您可以看到dnslookup花费了这么多时间，因此您也改进了这一点。现在，按照给定的步骤来改进加载时间。
步骤：
- 预先连接到所需的来源。考虑添加
preconnect或dns-prefetch资源提示，以建立与重要的第三方起源的早期连接。 - 在加载javascript文件时，USe、
defer和async，这样js的执行不会影响页面加载。 - 通过预加载某个资源，您将告诉浏览器您希望比浏览器发现它更快地获取它，因为您确信它对当前页面很重要。所以预装你的批判性js。语法-
<link rel="preload" as="script" href="critical.js">
在这里您可以看到，您不需要一个chatbox在加载时出现。因此，您可以推迟javascript加载以提高页面速度。
按照上述步骤改进受javascript影响的页面性能
还有一些提高页面速度的提示：
- 加载图像，以便在滚动到.
- 预加载外部字体文件和关键资源。
- 使用coverage选项卡标识未使用的
CSS和JS - 使用
cache-policy服务您的所有内容。这将帮助您从缓存中获取静态资源，从而提高加载时间。 - 尝试使用快速CDN来服务静态文件。
最重要的提示-从URL我可以看到您的网站易受XSS攻击。因此，请查找这一点，并工作在您的安全报头，如Content Security Policy (CSP)。
有关更多示例，请参阅此网站- https://codebulbs.com并检查其源代码。你将从这个网站的来源学到很多东西。
Stack Overflow用户
发布于 2021-06-16 04:42:09
是的，您可以优化脚本，下载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";这样就提高了页面的速度。
https://stackoverflow.com/questions/67904986
复制相似问题
腾讯云开发者
