Yandex metrika 标签减慢网站速度谷歌页面速度 isights 报告

Posted 2023-03-25

【中文标题】Yandex metrika 标签减慢网站速度谷歌页面速度 isights 报告

【英文标题】：Yandex metrika tag slowing down site speeds google page speed isights reporting

【发布时间】：2019-12-17 20:49:25

【问题描述】：

所以在我的所有网页上，我都有 Yandex metrika 用于分析的代码。根据谷歌的说法，这个脚本正在减慢我的页面速度，并且需要改变它的加载方式以不被渲染阻塞、TTI 时间输入阻塞、FID 第一个输入延迟阻塞、第一个内容绘制阻塞。

<script data-cfasync="false" type="text/javascript">
   (function(m,e,t,r,i,k,a)m[i]=m[i]||function()(m[i].a=m[i].a||[]).push(arguments);
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a))
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(XXXXXXXX, "init", 
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   );
</script>

Google 的页面速度报告如下 https://developers.google.com/speed/pagespeed/insights/

我可以修改 Yandex metrika javascript 到什么来解决这个问题？

【问题讨论】：

使用其他东西，5 秒脚本评估？它一定很臃肿/写得不好。提高分数的一种选择是将您显示在setTimeout 中的调用函数包装起来，以将加载推迟到所有重要的事情之后，但就我个人而言，我只会使用另一个标签管理器或不使用这些类型的执行时间。

@GrahamRitchie 您能否将您对我上面提供的 Javascript 的修改发布为答案，如果可行，我可以将其标记为答案 :)？

【参考方案1】：

恐怕您没有太多选择，因为它是第三方脚本。

提高分数和感知加载时间的一种选择是将函数调用封装在 setTimeout 集合中足够长的时间，以延迟加载脚本直到加载基本内容。

<script data-cfasync="false" type="text/javascript">
  setTimeout(function()
       (function(m,e,t,r,i,k,a)m[i]=m[i]||function()(m[i].a=m[i].a||[]).push(arguments);
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a))
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

       ym(XXXXXXXX, "init", 
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true
       );
    , 5000); //set this as high as you can without ruining your stats.
</script>

这绝对是一种解决方法，如果你能找到一个，我会建议使用一个不那么臃肿的不同库。

【讨论】：

嘿，感谢您对代码的支持 :) 昨晚我偶然发现了以下我作为答案发布的内容，它确实有助于缩短加载时间，不确定它是否为您提供了其他改进方法的想法加载时间。

【参考方案2】：

<script data-cfasync="false" type="text/javascript">
(function()
var a = function() tryreturn !!window.addEventListener catch(e) return !1 ,
b = function(b, c) a() ? document.addEventListener("load", b, c) : document.attachEvent("onreadystatechange", b);
b(function()

   (function(m,e,t,r,i,k,a)m[i]=m[i]||function()(m[i].a=m[i].a||[]).push(arguments);
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a))
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(XXXXXXXX, "init", 
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   );

, false);
)();
</script>

【讨论】：

不幸的是，这段代码有一个错误，它调用document.addEventListener，但应该是window.addEventListener，在解决这个问题后，它开始做出与原始yandex metrica相同的行为:(

很抱歉，对此回复晚了，我从未看到您对我的回答 @C0nw0nk 的评论。所有这一切都是在文档加载时将脚本添加到页面中，如果您从中获得任何性能提升，则意味着您的站点需要在关键路径的早期进行进一步优化，因为在经过适当优化的站点上，文档加载应该花费不到一秒钟的时间。不幸的是，setTimeout 或不同的库仍然是最好的选择，除非你真的想看中 performanceObserver。

【参考方案3】：

一种选择是使用旧的 Yandex Metrika 代码 (new Ya.Metrika...)。 如果您在 Metrika 的高级设置中设置了复选框，则可以查看旧代码。旧代码有一些限制，但它更小，速度也快了几倍。

【参考方案4】：

禁用 clickmap 和 webvisor 可能会有所帮助。