Page Insights网站加载延迟及FID无法获取问题咨询

问题1：为什么在Page Insights中网站要在4-5个滑动帧之后才开始加载？ #

Page Insights的帧捕获逻辑从页面导航发起时就开始记录，前几帧空白无内容主要有以下常见原因：

• 服务器TTFB（首字节响应时间）过高：从浏览器发起访问请求到服务器返回第一个响应字节的耗时太长，这段时间浏览器无内容可渲染，只能显示空白
• 存在渲染阻塞资源：放在页面头部的未做异步/延迟加载处理的CSS、JS资源会阻塞渲染流程，浏览器必须等这类资源下载、解析完成后才会开始绘制页面内容
• 站点使用CSR（客户端渲染）方案：React、Vue等单页应用的初始HTML只有空容器，必须等JS包下载、执行完成后才能挂载生成实际DOM内容，这段等待期对应空白帧
• 站点配置了主动延迟渲染的逻辑：比如自定义开屏页、首屏资源预加载完成后才展示内容的逻辑，都会拉长空白帧的时长

问题2：为什么Page Insights无法抓取获取FID数据？ #

• FID（首次输入延迟）属于*真实用户监控（RUM）*指标，需要真实用户对页面产生点击、输入、触控等交互操作才能采集到数据。Page Insights的实验室检测环节仅模拟页面加载流程，不会模拟用户交互，因此默认无法输出实验室环境下的FID结果
• 如果你查看的是Page Insights关联的Chrome用户体验报告（CrUX）的真实用户数据，出现无法获取的提示大概率是你的站点访问量不足，没有足够多的真实用户交互样本纳入CrUX统计库
• 另外FID已经在2024年正式被INP（交互到下一步绘制）替换为新的核心Web Vital指标，部分版本的Page Insights已经停止对FID的采集和展示

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