网页性能优化

关于网页性能优化思维导图，通过优化网页性能，可以加快网页的加载速度，提高用户的满意度和忠诚度。

网页性能优化

• 工具
  • 性能分析工具
    • https://www.webpagetest.org/
    • https://pagespeed.web.dev/
  • 查找未使用的资源
    • 开发者工具 coverage，查看未使用资源的覆盖率
• LCP
  • Largest Contentful Paint 最大内容绘制
  • 影响因素
    • 客户端渲染
    • 资源加载时间
    • JavaScript 和 CSS 渲染阻塞
    • 服务器响应速度
  • 优化
    • PRPL
      • push预加载关键资源
        • <link rel="preload" as="style" href="css/style.css">
      • Render渲染初始路线
      • Pre-cache预缓存剩余资产
      • Lazy load懒加载非关键资产
        • <img src="image.png" loading="lazy" alt="…" width="200" height="200">
    • 高效加载第三方JS
      • 无用引入删除
      • <script> 标记使用 async 或 defer 属性
        • async：完成下载后和窗口加载事件之前第一时间执行，不顺序执行，中断 DOM 构建
        • defer：HTML 解析完全完成之后执行，顺序执行，不会阻塞解析器
      • <link>
        • preload (紧急下载内容)
        • prefetch (使用低优先级策略下载内容)
          • as="style" rel="prefetch"
        • preconnect (连接到服务器)
        • dns-prefetch (解析域名)
        • prerender (在后台渲染页面)