从CSS-Tricks上的WebPagetest会话中学习

前几天，我从WebPagetest上的Tim Kadlec聚在一起，在CSS-Tricks上进行一些性能测试。本质上，使用该工具，戳戳并确定要进行的性能疼痛点。您可以在网站上或在其Twitch频道上观看视频，这值得订阅此类绩效调查。

网络性能工作是双重的：

步骤1）衡量事物并探索问题
步骤2）修复

蒂姆（Tim）和我通过WebPagetest的惊人工具做了很多步骤1。当我们戳戳时，我做了笔记。我们发现了许多问题领域，有些相当大！当然，毕竟，我无法将它们摆脱困境，所以我不得不采取行动并尽快做第2步，我很高兴地报告我已经完成了大部分内容并看到了进步。让我们挖！

确定的问题＃1）较差的LCP

最大的内容涂料（LCP）是核心网络生命力（CWV）之一，现在每个人都在用Google仔细观察，这是SEO因素。我的LCP在3.993s上的时光效果不好。

我从蒂姆（Tim）了解到，如果第一个内容的油漆（FCP）包含LCP，那是理想的选择。我们可以看到这不是通过WebPagetest发生的。

要解决的问题：

• 确保最终是一个大图像的LCP区域得到了适当优化，具有响应性的SRCSET，并且托管了CDN。所有这些事情都失败了，因为那个特定的图像在其他地方工作。
• LCP图像上有加载=“ Lazy”，我们刚刚学到的这不是一个好地方。

修复技术和学习：

• 所有适当的图像处理内容都已经到位，但是无论出于何种原因，它都不适用于.gif文件，这就是图像是测试的一天。无论如何，我们可能不应该在该区域使用.gif文件。
• 关闭LCP图像的懒惰加载。这是WordPress特色图像，因此我基本上必须执行。如果是一个内联映像，我会做，它告诉WordPress它需要知道什么。

确定的问题＃2）第一个字节开始渲染差距

蒂姆立即将其视为一个相当明显的问题。

在上面的瀑布中（这是一篇关于马特·霍布斯（Matt Hobbs）阅读瀑布的超级详细文章），您可以看到HTML在大约0.5秒内到达，但是渲染的开始（人们看到的是Big Green Line），直到大约2.9秒开始。太长了。

图表还以黄线确定了问题。我链接到第三方CSS文件，然后将其重定向到我自己的CSS文件，该文件包含自定义字体。该重定向花费时间，并且随着我们挖掘的时间，不仅是第一页加载时间，而且每个页面加载，甚至是缓存的页面加载。

要解决的问题：

• 消除CSS文件重定向。
• 自宿主字体。

修复技术和学习：

• 无论如何，我一直在关注一些新字体。我不久前注意到，我真的很喜欢Mass-Driver的许可创新（由员工编号定价），但我同样喜欢MD Primer，所以我买了。对于身体类型，我与Blanco一起贴上舒适的衬线，仁慈地配备了非常优化的Ribbi ¹版本。下次我发誓时，我会找到一个可变字体，但是，嘿，有时您必须跟随您的心。我购买了这些，现在正在自我托管字体文件。
• 在我自己的CSS中使用 @font-face，没有重定向。还使用字体 - 播放：交换;，但必须在该加载技术上使用更多的工作。等不及尺寸调整了。

对更改进行了重新测试后，您可以在一个大文章页面上看到“开始渲染”在4G连接上的整整2秒钟：

确定的问题＃3）网格指南上的CL不好

蒂姆（Tim）袖手旁观，以衡量页面上的累积布局变化（CL）。您可以指示WebPagetest为您滚动页面。这对于诸如CLS之类的东西很重要，因为布局转换可能会因滚动而发生。

请参阅有关CLS和WebPagetest的本文。

诀窍是在测试期间使用高级设置将自定义JavaScript注入页面：

在这一点上，我们不是在测试主页，而是有目的的一个非常重要的页面：我们的网格完整指南。有了这个，您可以看到CWV的状态更糟：

我不知道该对LCP的确切思考。这是在页面上距离遥远的最大图像所触发的。

对我而言，CLS更令人担忧，因为任何转移的布局总是对用户的讨厌。看到所有这些虚线的橙皮？那是CLS的发生：

要解决的问题：

• CLS很糟糕，因为懒惰的加载图像进入并移动了布局。

修复技术和学习：

• 我不知道！所有这些图像都是内联元素。我知道懒惰的负载可能会导致CLS，但是这些图像具有适当的宽度和高度属性，该属性应该保留图像所需的确切空间（即使在流体，由于纵横比，甚至在加载之前）。那么……什么给？是因为他们是SVG吗？

如果有人知道，请随时打我。我发现这就是表演工作的本质。这是愚蠢的错误，您可以战斗和胜利的小战斗，有时涉及更难赢得的外部影响的更大战斗的轻松胜利的混合在一起，以及更难赢得的外部影响力，而神秘的未知数则需要时间来治愈。幸运的是，我们有WebPagetest之类的工具来告诉我们网站上发生的真实故事，并为我们提供与这些性能战斗所需的见解。

1. 我刚刚学会了Ribbi，意思是定期，斜体，大胆和大胆的斜体。大多数车身在网上需要的经典组合需求。 ⮑

以上是从CSS-Tricks上的WebPagetest会话中学习的详细内容。更多信息请关注PHP中文网其他相关文章！