跳到主要内容

性能优化

网站加载

  • 服务端渲染 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 放底部
  • 降低 css 选择器复杂度

静态资源

优先使用 CDN

JS

  • 懒加载 (代码分割)
  • documentFragment

图片

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

SEO 相关

  • html 标签语义化
  • 减少不必要的元素、减少嵌套
  • 图片要有含义清晰的 alt 描述
  • 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 合理使用
  • a 标签中不要嵌套文本外的东西,例如图片