核心网络生命力和网络特征之间的相关性
介绍
核心网络活力（CWV）是Google认为是衡量网络体验质量的最重要指标的指标。识别和优化CWV问题的过程通常是被动的。网站所有者决定使用哪种技术或查看哪种指标通常是通过反复试验而不是经验研究来决定的。可以使用新技术来构建或重建站点，只是发现站点在生产中会导致UX问题。
在此分析中，我们同时分析了CWV和许多不同类型的Web特征之间的相关性，而不是在真空中分析单一类型的Web特征之间的相关性，因为Web开发的选择不是在真空中而是在网站的许多部分中。我们希望这些结果将为团队在评估各种Web开发选择时提供更多参考，并邀请社区帮助进一步了解CWV和Web特性之间的相互作用。
1.带有最大满意油漆的显着负面关联：
- TTFB，JavaScript，CSS和图像的字节数
- JavaScript框架-AngularJS，GSAP，MooTools和RequireJS
- JavaScript库-Hammerjs，Lodash，momentjs，YUI，Zepto，jQueryUI和prettyPhoto
- CMS-Joomla和Squarespace
- UI框架-animatecss
- Web框架-MicrosoftASPNet
- 小部件-FlexSlider和OWLCarousel
2.与累积布局偏移相关的显着负关联：
- 图片字节数
- JavaScript框架-AngularJS，Handlebars和Vuejs
- JavaScript库-FancyBox，Hammerjs，Modernizr和Slick
- 小部件-Flexslider和OWLCarousel
方法
数据源
该分析基于HTTP Archive中的数据。HTTP存档数据集是在实验室环境中生成的并包含有关网站许多特征的详细信息以及效果数据。由于HTTP存档数据是由实验室在一组硬件上生成的，因此无法完全反映实际使用情况，仅允许我们分析LCP（最大的满意油漆）和CLS（累积布局偏移），因为我们没有任何数据FID（第一输入延迟）的用户输入。但是，由实验室生成的优势在于，所有数据都收集在同一组硬件上，而不会影响所加载网站的类型。因此，可以避免由于我们无法测量的用户/设备特性而使我们感到困惑。尽管我们并未避免网站特征与网站性能之间的所有混淆，
网络特征
我们与领域专家进行了交流，并建立了感兴趣的网络特征列表：
1.TTFB，字体请求和各种类型的内容字节
2.各种类型的第三方请求的计数
3.Web技术（编码为二进制以表示是否使用技术）
- JavaScript框架
- JavaScript库
- 不育系
- UI框架
- Web框架
- 小部件
这些特征代表了网页的构建和体验方式。可以使用诸如内容管理系统（CMS），JavaScript库和框架等各种技术来构建页面。根据Web年鉴，有40％的网站是使用CMS构建的。这使它成为定性检查以查看CMS和CWV之间是否存在有意义的关联的有用类别。另一方面，我们使用定量指标来表示用户对页面的体验，包括性能和页面权重数据。
分析中包含的技术列表仅是HTTP Archive中站点所采用的所有技术的一部分。我们已将分析限制为仅使用至少50,000个网站使用的技术的网站（这大约占HTTP Archive中网站的1％）。这消除了我们可能没有足够数据进行评估的未充分利用的技术。某些技术的存在也高度重叠，而CMS Wix和JavaScript库Zepto几乎完全重叠。如此高的重叠会产生建模问题，因此我们选择从此分析中删除Wix。
分析
以LCP和CLS为结果，以网络特征为预测变量，我们尝试通过随机森林对结果与预测变量之间的关系进行建模。随机森林是基于从随机选择的一组预测变量和数据集的引导样本中训练出来的一组决策树来进行回归和分类的一种学习算法。
为了评估结果与每个预测变量之间的相关性以及它们对结果的单独影响，我们得出了相关性的度量（较高的％==均值，％HSM）和效应量的度量（均值均分差，MSD） ）。两种度量均基于训练后的决策树基于预测因子进行的拆分的类型。有关更多详细信息，请参见附录。
％HSM介于0和1之间，接近0的值指示负相关，接近1的值指示正相关，而接近0.5的值指示几乎没有相关。MSD的大小不受限制，并且较大的正值表示预测变量似乎对结果的平均值起积极作用。请注意，此处的肯定值不一定表示它是好的，而只是在数字意义上。
结果
在这里，我们介绍了关联的结果，并指出了对CWV尤其重要的特定特征。
在解释这些有关关联的结果时，需要注意的重要一点是，仅应相对于其他网站特征来解释特定网站特征的正面和负面影响，并且在采用多种网站技术的网站范围内进行解释。内容，以及不同的第三方要求。例如，如果给定的Web技术显示出强大的积极影响，则应将其解释为，相对于其他技术，该技术似乎对性能有好处，而不是如果我们将该技术添加到网站中，其Web性能将得到改善。
LCP
LCP被建模为其数值的对数，因此值越大越糟。
％HSM值接近1的预测变量意味着数值/计数特性的较高值或技术的存在与LCP的较高值紧密相关，而％HSM接近0的预测变量则相反（高％HSM较差）。
同样，具有相对较大和正MSD的预测变量意味着较高的数值/计数特征值或技术的存在对LCP产生强烈的负面影响，反之亦然，对于具有相对较大和负MSD的预测变量（较大的MSD较差） 。
尽管TTFB并非总是可操作的，但较高的TTFB值，JavaScript字节，CSS和图像显示出与LCP的正相关性最强且负面影响最大。
通常，在我们考虑的其他预测因素的背景下，第三方请求不会对LCP表现出强烈的相关性或影响。此结果可能是由于HTTP存档中的大多数网站都有相当数量的第三方请求，因此无法很好地确定其效果。
除AMP之外，大多数JavaScript框架的存在与LCP都具有很强的正相关性，并具有负面影响。AngularJS，GSAP，MooTools和RequireJS最突出。
就像JavaScript框架一样，大多数JavaScript库的存在也显示了与LCP的强正相关性和负面影响。Hammerjs，Lodash，momentjs，YUI和Zepto在相关性和效果大小方面脱颖而出，而jQueryUI和prettyPhoto在相关性方面脱颖而出。
在CMS中，Joomla和Squarespace与LCP表现出很强的正相关性，并具有负面影响。另一方面，WordPress显示出较低的相关性和影响力。
Animatecss在UI框架中脱颖而出，MicrosoftASPNet在Web框架中脱颖而出。
在小部件中，FlexSlider和OWLCarousel与LCP都显示出强正相关，而Flexslider也具有很强的负面效果。
CLS
CLS被建模为是否满足给定阈值的二进制指标。1表示网站的CLS <0.1，否则为0，因此1优于0。
％HSM值接近1的预测变量意味着更高的数值/计数特征值或技术的存在与满足CLS阈值密切相关，反之亦然，％HSM接近0的预测变量（低％HSM更为糟糕）。
同样，具有相对较大和正MSD的预测变量意味着较高的数值/计数特征值或技术的存在对满足CLS阈值显示出强烈的积极影响，反之亦然，对于具有相对较大和负MSD的预测变量（较大的负MSD）更差）。
除了与字节数显示与CLS遵从性和负面影响呈负相关的字节以外，这些特性中的大多数都显示与LCP的相关性较弱且影响较小。
与LCP一样，第三方请求似乎具有较低的相关性，并且对CLS遵从性有影响。
多个JavaScript框架的存在与CLS遵从性和负面影响之间显示出强烈的负相关性，而AMP，GSAP和React显示出较低的相关性和影响。AngularJS，Handlebars和Vuejs似乎具有最大的负面影响。
JavaScript库对CLS的合规性似乎不如框架差，尽管大多数仍显示出负面影响。FancyBox，Hammerjs，Modernizr和Slick最著名。
CMS都没有明显的负面影响，WordPress表现出相当积极的相关性。
UI框架的影响很小。在Web框架中，RubyonRails与CLS遵从性之间显示出正相关。
在小部件中，Flexslider和OWLCarousel都对CLS遵从性产生了相当负面的影响。
结论
此分析是努力更全面地了解Web特性对CWV的影响的第一步。尽管结果指出了紧密相关的特征，但对于Web社区来说，进一步深入研究已确定的关联对于确定哪些是真正的因果关系，以及哪些仅仅是与Web开发人员建立联系具有重要意义。同时，具有强烈的负相关性/效果的网络特征应被视为需要更多关注和/或计划的事物的信号。最后，将来刷新这些分析以查看此处确定的关联是否仍然有效将是很有意思的。
附录
随机森林通过对数据进行二进制拆分来训练决策树。对于基于某种纯度标准的预测变量X，每个拆分均基于特定的预测变量，并且形式为X <= c和X> c。然后，将所有值X <= c的数据点放在相应的分支中，同样对于X> c的数据点也将放入。然后可以基于其他预测变量以相同方式在每个后续分支中进一步拆分数据点。我们使用的相关性和效应大小的度量利用了这些分裂。
具体来说，对于给定的预测变量，我们寻找基于预测变量的拆分。对于每个此类拆分，我们计算<=和>分支中数据点的结果平均值。％HSM（较高的=>拆分平均值的百分比）检查> =分支中的结果平均值高于<分支中的结果平均值的次数的比例。这检查了较大的结果均值与较高的预测值相关的频率。MSD（均值拆分差异）是从预测分支的所有相关拆分中取平均值的<=分支减去>分支的平均值。这将检查具有较高预测值的数据点与具有较低值的数据点之间的结果平均值之间的差异。
关注公众号啦啦啦好想biu点什么免费获取更多资讯和开源游戏代码。长按二维码获取
聪明的人已经关注作者了
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
相关内容
- AJAX基础知识与简单的操作示例
- 2021年谷歌SEO战略权威指南
- GitHub上广受欢迎的下载神器:youtube-dl
- youtube-dl安装和实用方法
- 基于Hexo和GitHub搭建自己的博客
- java五子棋小游戏含免费源码
- 免费且好用的GIF录制软件LICEcap
最后，不要忘了❤或📑
