复写的副本@jsnajdr公司和@地板用于思考

我最近在站点编辑器中添加了一个“导航”指标来跟踪这一点。这是第一步，指标可能并不完美，但至少它将帮助我们在这里获得一些可见性。

为@WordPress/performance人员添加标签！

今天，我对一些禁用动画的实验进行了计时，似乎只关闭了框架运动-增强的动画导航器屏幕（参见#56795)解决了上述大多数性能问题。似乎重写这些动画以使用CSS和利用硬件加速应该可以解决大部分问题。

复写的副本@ciampo公司我记得你前一段时间做过这些动画：你还记得当初做这些动画时的设计决策或讨论吗？我想知道我们可以删除或简化多少。

@德拉加内斯库我可以借用你的测试帮助吗#56795? 它解决了测试中的性能问题吗？无视导航器屏幕动画不存在，这是我们在PR中故意禁用的。

复写的副本@ciampo公司我记得你前一段时间做过这些动画：你还记得当初做这些动画时的设计决策或讨论吗？我想知道我们可以删除或简化其中的多少。

动画是原因之一导航器虽然我们可以尝试使用普通CSS属性而不是框架运动看看会发生什么。我会在接下来的几天里努力做到这一点

谢谢你@ciampo公司! 我很乐意亲自看一看，但可能不会早于下周。

我们可以尝试使用普通的CSS属性，而不是框架运动看看会发生什么。我会在接下来的几天里努力做到这一点

@泰克斯拉，我在这里创建了一份公关草案来测试这种方法：#56909

你做完测试后告诉我。

@泰克斯拉，我在这里创建了一个PR草案来测试这种方法：#56909

太棒了，谢谢！🙌

你做完测试后告诉我。

进行了测试，并在上留下了一些反馈#56909（审查）

我花了一些时间查看Patterns库，因为尽管如此，该部分仍然表现不佳#56909大大提高了整体体验。我想分享一些发现。我的出发点是在全部的和已同步上的图案wp-admin/site-editor.php？路径=%2模式:

使用带有M1 Max芯片的现代MacBook Pro。相同的用户交互，但CPU速度减慢了4倍：

在Chrome devtools中进行性能分析时，我们会得到这样的图形（只有一个开关）：

这一切看起来都非常令人困惑和费解，所以我试图通过进入只有1个模式的模式类别来了解发生了什么，以获得更集中的性能图，实际上是对块预览组件似乎在图形中占据了大量空间。考虑到我们在第一张图上绘制了大约20个这样的图形，很清楚为什么它如此复杂。

我推了69180b8个(#56973)人为地降低这些块预览的渲染速度，并用许多模式分离站点上发生的事情。

我不太确定块预览组件可以工作，但似乎使用了很多这样的组件，导致了站点编辑器的Pattern library部分至少出现了一些令人讨厌的动画。如果我正确地解释，每个人都在使用他们自己的内联框架使用他们自己的块编辑器环境，只需大量处理。这并不是TT4特有的，它也发生在其他区块主题或具有许多模式的网站上。

#54999似乎与我上次的评论有关。

@地板可能是感知到的性能下降来自不同的因素，可能是：

• 导航导航器时会结结巴巴，因为框架运动会等待浏览器来计算动画
• 带有预览的浏览模式非常紧张，因为多次将块预览实例化为客户端编辑器太费力了。

的确#54999这是我试图在链接的PR中解决的问题，当时在预览空块（客户端上的数据只是来自“示例”数据）时呈现“演示”内容。