请前端大佬帮忙分析 CLS 累计布局偏移问题

2023-12-14 22:27:35 +08:00
 Meekdai
我的一个页面 https://blog.meekdai.com/ 用 pagespeed 分析的时候发现了 CLS 偏移比较严重,看了很多文章还是没有弄明白我的问题出在哪里,所以求指导。

下面是分析报告
https://pagespeed.web.dev/analysis/https-blog-meekdai-com/b7332gmovj?form_factor=desktop
972 次点击
所在节点    前端开发
2 条回复
everyx
2023-12-14 23:49:29 +08:00
优化一下 CSS 就行了,你的 primer.css 太大了,等到 CSS 加载完再来应用这些样式就会有问题了,需要拆分一下,可以将 CLS 相关内联一下,然后其他的拆分成一些小的 css 文件中,再配置一下 preload

偏移是很大,见下图

[Imgur]( https://imgur.com/ogk2aSJ)
Meekdai
2023-12-15 12:40:05 +08:00
@everyx 感谢,我尝试优化一下。

另外我确实一直想要精简一下 primer.css ,只提取我用到的,不知道有没有好用的现有工具,谢谢!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1000504

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX