跳到主要内容

性能优化

网站加载​

  • 服务端渲染 SSR

性能监控​

  • pageSpeed
  • lighthouse
  • web-vitals

性能指标​

  • FCP
  • LCP
  • FID
  • CLS

缓存​

接口缓存​

对于不常变动的内容，可以进行接口缓存，例如分类页。

缓存媒介​

  • 服务端渲染使用 redis，简单的例子
  • 客户端渲染使用 localStorage

网络​

  • 减少 HTTP 请求（针对 HTTP2 以下）
  • 使用 HTTP2
  • HTTP 缓存 304
  • DNS 预解析，使用 <link rel="dns-prefetch" href="https://fonts.googleapis.com/"> 预解析第三方网站
  • 开启 gzip
  • DNS 缓存 （Node 端）

JS​

  • 高消耗任务使用 web worker
  • requestAnimationFrame 实现动画，减少丢帧
  • 事件委托

CSS​

  • 减少 css 重绘回流
  • css 放头部，js 放底部（JS 加载和执行会阻塞 HTML 解析，或者使用 defer）
  • 降低 css 选择器复杂度

静态资源​

优先使用 CDN

JS​

  • 懒加载 （代码分割）
  • documentFragment
  • script 加载 script 加载

图片​

  • 图片懒加载
    • 原生
    • getBoundingClientRect
    • IntersectionObserver
  • webp 格式
  • 渐进式图片优化体验
  • 响应式图片

SEO 相关​

  • html 标签语义化
  • 减少不必要的元素、减少嵌套
  • 图片要有含义清晰的 alt 描述
  • 图片给定宽高，尤其是首屏图片会影响 CLS
  • TDK(react-helmet)
    • title
    • description
    • keywords
  • 结构化数据 - application/ld+json
  • 爬虫不爬取该链接 <a href="xxx" rel="nofollow"> 防止权重传递
  • <link rel="canonical" href="https://alanwang.site" > 指定落地页，防止爬虫爬取 https://alanwang.site?name='alan'
  • h1 和 h2 合理使用