首屏

分包

见技术栈/webpack/分包

服务端渲染

适合内容丰富，复杂交互的动态网页，对首屏加载和 seo 有要求的项目 CSR 主要通过 CDN 控制渲染，对服务器压力小 SSR 则要通过服务器并发控制渲染，还需要额外处理并发和降级逻辑，支持 CSR 降级

削减阻塞渲染的 JS 和 CSS 体积

接入 webpack-bundle-analyser 进行产物分析 调试工具和非线上依赖不打入正式包，建议通过 webpack 变量进行判断，如果线上环境特定条件下需要开启，建议通过 umd 方式按需引入 格式化代码，css 中的空格缩进对浏览器来说都不是必要的，可以接入 css-minimizer-webpack-plugin 进行优化

缓存资源

一般 CDN 会设置一个较大的过期时间 如 Cache-control: max-age=315360000 对应的时间是 1 年，适用于通过 hash 值进行版本管理的静态资源 CDN 上的缓存更新比较麻烦，需要一些时间来生效 建议通过文件名+版本号的方式来更新静态资源，通过 stale-while-revalidate 策略也可以

还可以使用 service worker 自己实现缓存和容灾策略

关键 CSS

可以考虑将首屏内容 CSS 作为关键 CSS 提取出来，或者内联到 HTML 文档的 head 中 从而无需发出额外的请求就能获取这些样式，或者作为最高优先级阻塞加载，剩余的 CSS 可以延迟加载或者根据分包懒加载；

优化和压缩图片资源

建议搭配 imagex 进行优化

预加载重要资源

link rel="preload"

压缩文本文件

Gzip | Brotli

开启 http2/http3

http1.1 只能保持 6 个 TCP 持久连接，持久连接虽然能保持 6 个，但是请求一次只能处理一个，当前请求没处理完 其他的会阻塞 优化方式是：雪碧图，内联代码，细分域名，合并代码 而且每个请求都会携带 user Agent 和 cookie 等 header, 增加了传输的成本

尽早建立连接

配置 rel="preconnect" 来告知浏览器页面打算尽早建立连接，在 html 中配置固定的 cdn，做好预加载 dns-prefetch 与 preonnect 配合，dns-prefetch 只执行 DNS 查询，而 preconnect 则是建立与服务器的连接 包括 Dns 解析以及建立 TCP 连接 preconnect 最好仅用于最关键的连接 <link rel="preconnect" href="https://xxx.com"/> 对于不支持 preconnet 的浏览器，可以考虑将 dns-prefetch 作为后备