[英]Facebook Customer Chat slowing down your website? Found solution to trick Google PageSpeed Insights
Today i encountered issue with Facebook SDK.今天我遇到了 Facebook SDK 的问题。 Facebook Customer Chat have drastically lowered my Google PageSpeed Insights score by over a 40 points... I have't found any answers on stack, so i came up with a solution i decided to share with you.
Facebook 客户聊天使我的 Google PageSpeed Insights 得分大幅降低了40多分……我在堆栈上没有找到任何答案,所以我想出了一个解决方案,我决定与你分享。
It's not the prettiest one, and it's not solving slow Facebook SDK issue.它不是最漂亮的,也不能解决缓慢的 Facebook SDK 问题。 Just trick's Google PageSpeed Insights score!
只是技巧的 Google PageSpeed Insights 得分!
My solution is to place section into setTimeout(), and wait (in my case) for 5secounds.我的解决方案是将部分放入 setTimeout(),然后等待(在我的情况下)5 秒。 This, gives time google speed checker to measure response time, and give score.
这让谷歌速度检查器有时间测量响应时间并给出分数。
Hope i helped someone!希望我帮助了某人!
const facebookChat = () => {
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v9.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
setTimeout(facebookChat, 5000);
Adding a script after a delay is not anything new and I have expressed concerns / problems with a very similar solution of using a delay on the script before .在延迟之后添加脚本并不是什么新鲜事,我已经表达了对之前在脚本上使用延迟的非常相似的解决方案的担忧/问题。
Now since my first answer I listed there things have changed a lot and I would no longer advise using setTimeout
for delaying scripts due to massive variability in connection speeds in the real world .现在,自从我列出第一个答案以来,情况发生了很大变化,由于现实世界中连接速度的巨大变化,我不再建议使用
setTimeout
来延迟脚本。
Google Page Speed Insights is much more relevant now due to the introduction of Web Vitals , with a huge update to Google Search algorithm being implemented next year around these metrics.由于引入了Web Vitals ,Google Page Speed Insights 现在更加相关,明年将围绕这些指标对 Google 搜索算法进行重大更新。
These metrics are measured in the real world, so hacks are not going to cut it anymore.这些指标是在现实世界中测量的,因此黑客不会再削减它了。
As such a much better approach is to load facebook messenger on intent .因此,更好的方法是在 intent 上加载 facebook messenger。
By this I mean:我的意思是:
async
or defer
attribute.async
或defer
属性。 do not initialise the script A lot of the issues with messenger are due to the massive code bloat and high CPU execution time of that code. Messenger 的许多问题是由于该代码的大量代码膨胀和高 CPU 执行时间造成的。
If you implement it this way you are not delaying any rendering (due to async
or defer
on the script tag) and you are not having to worry about the overhead of initialising the messenger until the user presses your button.如果您以这种方式实现它,则不会延迟任何渲染(由于脚本标记上的
async
或defer
),并且您不必担心在用户按下您的按钮之前初始化信使的开销。
You need to know the network speed (and CPU speed if possible) and then you can include the facebook script early if the network speed is fast or late if it is slow.您需要知道网络速度(如果可能,还有 CPU 速度),然后如果网络速度快,则可以尽早包含 facebook 脚本,如果网络速度较慢,则可以延迟包含脚本。
Luckily nowadays we can actually calculate network speed pretty reliably and make a decent guess for CPU speed.幸运的是,现在我们实际上可以非常可靠地计算网络速度,并对 CPU 速度做出一个不错的猜测。
Network speed can be calculated by using a performanceObserver
.可以使用
performanceObserver
计算网络速度。
You look at the first 10 requests on a page (using `entryType == "resource"``) and from that we can calculate network latency and download speed.您查看页面上的前 10 个请求(使用 `entryType == "resource"``),我们可以从中计算网络延迟和下载速度。
Then we set some threshold that we think is fast enough to include facebook messenger early or late and act accordingly.然后我们设置一些我们认为足够快的阈值,以便早晚包含 facebook 信使并采取相应措施。
You can also use performance observer to see when all resources are downloaded on the page if you know how many requests the page has and then trigger the facebook script download.如果您知道页面有多少请求,您还可以使用性能观察器查看页面上的所有资源何时下载,然后触发 facebook 脚本下载。
With regards to CPU - if the browser supports it we can gather how many cores a processor has using window.navigator.hardwareConcurrency
, 4 or less we assume it is slower, 5 or more we assume it is faster.关于 CPU - 如果浏览器支持它,我们可以使用
window.navigator.hardwareConcurrency
收集处理器有多少内核,4 或更少我们认为它更慢,5 或更多我们认为它更快。 It isn't super accurate but it can be a nice addition to the above method for making fine adjustments.它不是非常准确,但它可以很好地补充上述进行微调的方法。
Alternatively for calculating CPU load you could use performanceObserver
again to listen for longtask
items.或者,为了计算 CPU 负载,您可以再次使用
performanceObserver
来监听longtask
项目。 If there have been no long tasks for X seconds then include the facebook script.如果 X 秒内没有长任务,则包含 facebook 脚本。
This can be achieved by setting a timer for x seconds and then listening for entryType== "longtask"
and then resetting the timer if a longtask
entry occurs.这可以通过将计时器设置为 x 秒,然后侦听
entryType== "longtask"
,然后在出现longtask
条目时重置计时器来实现。
This final way of doing it ensures that on a very slow device facebook messenger is not being loaded until the rendering and bootstrapping of the essential page items is complete.这样做的最后一种方法确保在非常慢的设备上 facebook 信使不会被加载,直到基本页面项目的呈现和引导完成。
In the end it all depends on how important Facebook Messenger (or any third party library) is as to when you load it and how you handle it.最后,这一切都取决于 Facebook Messenger(或任何第三方库)何时加载以及如何处理它的重要性。
Using the web vitals library to measure Real User Metrics (RUM) is far better for making decisions like this than arbitrarily adding a delay, you may find most of your users do not experience a problem.使用web 生命体征库来测量真实用户指标 (RUM) 比任意添加延迟要好得多,您可能会发现大多数用户都没有遇到问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.