在升级到 React 19 和 Ant Design v6 后，页面的 CLS 性能下降，导致样式闪烁。虽然通过 CSS 固定组件尺寸有所缓解，但效果不够理想。尝试使用 Ant Design 的 zeroRuntime 方案，虽然能避免运行时注入问题，但动态主题功能几乎失效，适合静态站点而不适合需要动态主题的项目。

累积布局偏移（CLS）是谷歌核心网页指标之一，衡量网页内容意外移动的程度。高CLS分数会影响用户体验和搜索引擎排名。常见原因包括未设定尺寸的图片和视频、字体加载问题。优化建议包括为图片和视频设定固定尺寸、优化字体加载、使用CSS Transform进行动画等。解决CLS问题能提升用户体验和SEO表现。

在新公司进行网页性能优化时，我发现React的Suspense组件导致CLS问题。父组件传递数据给子组件，但子组件在数据未加载时没有显示占位符，导致布局变化。对于小文件如2Kb的组件，不建议使用Lazy加载。这提醒我们注意网页性能的细节。

Web Vitals是用于衡量网页性能的指标，包括FCP、LCP、CLS和FID。改进FCP可使用CDN和压缩图片等方法，改进LCP可延迟资源加载和优化图片，减少请求开销可使用preload和preconnect，改进CLS可固定广告位置和指定图片宽高，改进FID可延迟加载js文件。

该论文介绍了一种通过语义知识蒸馏来改进多语言语音转文本翻译中的跨语言迁移学习的方法。使用 SAMU-XLS-R 初始化编码器，在 CoVoST-2 和 Europarl 语音转文本数据集上实现了比基线模型更好的交叉语言任务知识传输，提高了12.8个BLEU分数。在零-shot翻译情景下，平均提高了18.8分和11.9个BLEU分数。

如要阅读全文，点击标题跳转。日志成本控制主要有如下几个维度：- 减量：去掉没有意义的无效日志，只打印关键日志。- 减周期：尽可能减少日志存储的时长。- 转低频：低频相较于标准存储，可降低 6 0%--70%的成本。- 慎开全文索引：全文索引将会把所有日志全部索引一遍，并且这个存储是未压缩的存储，如果开启全文索引，则存储往往会比不开的存储高出 4--10 倍。

如何修复 Hugo 本地图片的累计布局偏移（CLS）问题？通过利用 Hugo 的 Render Hooks 功能重新渲染图片相关代码，自动获取图片的宽高并加上 width 和 height 属性，解决本地图片的偏移问题。

距离上一篇文章发布已有四个月了，是时候写几篇文章给博客除草了。上一次我介绍了我如何迁移、重构了我的博客的架构，这次我想来谈谈我在重构中优化和打磨访客体验时解决的一个问题。 我的博客优化之旅 图片 lazyload 的学问和在 Hexo 上的最佳实践 我的博客有多快？ 天下武功，唯快不破 —— 我是这样优化博客的 再快一点，再快一点 —— 优化博客白屏时间的实践 使用 Next.js +...