如何解决sopact.com桌面端CLS>0.25、移动端LCP>4s的性能问题

当前我们的网站共有97个URL存在桌面端CLS>0.25的问题，另有85个URL存在移动端LCP>4s的问题。
需排查优化的站点为：www.sopact.com
请问我们应当如何修复上述两类页面性能问题？

• 所有图片、视频、iframe元素必须在HTML标签中声明width和height属性，同时在CSS中设置aspect-ratio或者用padding-top比例法预留加载占位空间，避免资源加载完成后撑开容器导致布局偏移
• 所有动态插入的内容（广告弹窗、悬浮通知、推荐模块、懒加载模块等），必须提前在DOM中预留对应大小的占位容器，禁止在已有内容上方突然插入无占位的元素
• 网页字体加载避免FOIT/FOUT导致的布局偏移，可使用font-display: optional，或者提前预加载关键字体，也可以给字体设置匹配的后备字体尺寸，减少文字渲染后的尺寸变化
• 所有会触发重排的交互动作（点击展开下拉菜单、切换tab内容等）如果会影响下方元素位置，优先用transform属性实现位移，或者提前预留展开后的空间

• 先定位每个问题页面的LCP元素（通常为首屏大图片、大文字块、视频封面），优先提升LCP元素的加载优先级：如果LCP是图片，给img标签添加fetchpriority="high"属性，同时禁止给首屏LCP图片设置loading="lazy"懒加载
• 资源压缩与格式优化：首屏大图优先用WebP/AVIF等现代压缩格式，比JPG/PNG体积小30%以上，同时根据移动端屏幕尺寸输出适配的图片大小，不要给移动端加载远超屏幕宽度的大图
• 减少渲染阻塞：把首屏需要的关键CSS内联到HTML的head标签里，避免外部CSS加载阻塞渲染；对非首屏的CSS、JS资源用defer/async属性延迟加载，不要阻塞首屏内容渲染
• 资源缓存与分发：所有静态资源（图片、CSS、JS）配置合理的HTTP缓存策略，减少重复加载耗时
• 缩短服务器响应时间：优化首屏依赖的后端接口响应速度，尽量控制在200ms内返回，必要时做服务端渲染或者静态化处理，减少客户端渲染的等待时间

内容的提问来源于stack exchange，提问作者Richa