北京日报
最大内容绘制🌺(LCP):让首屏展示足够快 最大内容绘制(LCP)衡量的是页面从开始加载到屏幕上最大的可见内容块渲染完成所需的时间
常见的影响LCP的元▶️素💪包括图片、视频封面、大段文本或背景图片
一般建议FID小🚀于100毫秒,INP则应保持在200毫秒以内,以确保交互的即时反馈
常见诱因包括未设置尺寸的图片、动🔥态注入的广告和自定👍义字体引起的字体闪烁
要优化LCP,可以关注以下几点: 提升服务器响应速度: 使用CDN加速,优化后端处理逻辑,确保浏览器能快速获取到HTML文档
如果TTFB过长,后续所有加载动作都会延后
优化交互响应,核心在于 避免主线程长期📚被占用 : 将大型JavaScript任务拆分为小任务,使用 requestAnimationFrame 或 se✨tTimeout 分片执行
首字节响应时间(TTFB💎)与加载起点 首字节响应时间并不属于标准的核心🔍Web指标,但它直接影响LCP和用户感知
优化TTFB的常见方法包括:选择性能良好的主机服务、开🌺启服务器端缓存、减少第三方插件对初始请求的干扰,以及使用DNS预解析
而INP则是一个更全面的新指🌅标,用于评估页面整个生命周期内所有交互的延迟情况
首次输入延迟(FID)或交互到下次绘制(INP):响应要即时 FID衡量的是用户首次与页面交互(例如点击链接、按下按钮)到浏览器实际处理响应的时间
当元素(如广告、图片、iframe)在用户已💡经查看后突然移动位置,就会造成不好的体验