页面性能指标

以用户为中心

FP：first paint
FCP：first contentful paint
FMP：first meaningful paint
TTI：time to interactive

优化方式

目的：尽快渲染出首屏、减少白屏时间

  • 优化关键渲染路径，减少阻塞渲染的js、css

使用 async/defer 让浏览器下载 JavaScript 的同时不阻塞 HTML 解析
内联页面关键部分的样式到 HTML

  • Service Worker 缓存 AppShell
  • HTTP/2 Server Push

webpack 插件

vue-skeleton-webpack-plugin

PRPL 模式

PRPL：push\preload、render、precache、lazy-load

  1. PUSH/PRELOAD，推送/预加载初始 URL 路由所需的关键资源
  2. RENDER，渲染初始路由，尽快让应用可被交互
  3. PRE-CACHE，用 Service Worker 预缓存剩下的路由
  4. LAZY-LOAD 按需懒加载、懒实例化剩下的路由