白屏时间

空白->显示第一个画面时间

重要性

提升用户体验，减少用户跳出，提升整体页面的留存率

原因

  • css 放在 head 里，阻塞渲染，加载时间长会出现页面长时间白屏
  • js 加载和执行会阻塞页面解析和渲染

优化

  • DNS 解析
    • DNS 缓存优化
    • DNS 预加载策略
    • 确定可靠的 DNS 服务器
  • 对浏览器页面的下载 解析 渲染过程
    • 尽可能精简 HTML 代码和结构
    • 尽可能优化 css 文件和结构
    • 合理放置 js 代码 尽量不要使用内敛 js
    • 将渲染首屏 css 内敛到 html 中 快速下载 css
    • 延迟首屏不需要的图片加载 优先加载首屏所需的图片
  • 文件体积
    • 尽量减少 css js 体积，放在 head 标签
    • js defer 属性：先加载后执行不阻塞代码执行