在页面加载性能分析中，确定哪些资源是关键的，哪些可以耽误加载，可以通过以下步调进行：
- 使用 Performance 面板：
- 在 Chrome DevTools 的 Performance 面板中纪录页面加载过程。
- 分析纪录效果，查看哪些资源加载时间较长，哪些资源在页面渲染前是必须的。
- 分析关键渲染路径：
- 确定哪些资源是页面首次渲染所必须的，这些资源包括关键 CSS、JavaScript 和 HTML 内容。
- 识别并优化关键路径长度，即从开始加载到页面首次渲染完成所需的时间。
- 查抄资源加载顺序：
- 在 Network 面板中查抄资源的加载顺序，确保必要的资源（如首屏渲染所需的 CSS 和 JavaScript）优先加载。
- 评估资源巨细和类型：
- 优先加载小尺寸且对页面功能至关重要的资源。
- 对于大型资源，如图片和视频，可以思量懒加载或按需加载。
- 使用代码分割：
- 对于 JavaScript 代码，使用代码分割技能仅加载当前路由或组件所需的代码。
- 分析第三方脚本：
- 查抄第三方脚本（如广告、社交媒体按钮、跟踪代码）是否对首屏渲染有影响。
- 假如这些脚本不是首屏渲染所必须的，思量耽误加载或异步加载。
- 使用优先级提示：
- 使用 rel="preload" 和 as 属性来指定资源的加载优先级。
- 对于关键 CSS 和字体，可以使用 as="style" 或 as="font" 来提高加载优先级。
- 使用媒体查询：
- 对于只在特定条件下需要的 CSS，如打印样式或响应式图片，使用媒体查询来耽误加载。
- 评估 JavaScript 的作用域：
- 分析 JavaScript 脚本是否阻塞了页面渲染。
- 对于非首屏渲染必须的脚本，使用 async 或 defer 属性。
- 使用 Lighthouse 审计：
- 运行 Lighthouse 审计工具，获取有关性能优化的建议，包括哪些资源可以耽误加载。
- 监控真实用户体验：
- 使用 RUM（Real User Monitoring）数据来相识真实用户在不同设备和网络条件下的体验。
- A/B 测试：
- 对不同的加载计谋进行 A/B 测试，比较哪种计谋能提供更好的用户体验。
- 使用 Service Workers：
- 通过 Service Workers 缓存关键资源，并在网络条件较差时提供离线支持。
通过上述步调，可以有效地识别和区分关键资源和非关键资源，从而优化页面加载性能，提供更快的用户体验。
复制再试一次分享
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
