Web performance basics

有很多的理由告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践,工具,API 以及链接的简明介绍,它为每个主题提供了更多的信息。意识到对用户来说什么是真正重要的也至关重要,他可能不是绝对意义上的时间而是用户感知的时间

最佳实践

  • 从学习浏览器的关键渲染路径开始。了解这些会帮助你通晓如何提升浏览器的性能。
  • 使用resource hints例如rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload
  • 压缩 Js 代码至最小。只为当前页面加载需要使用到的 js 代码
  • CSS性能因素
  • 在你的服务器(或者 CDN)上使用 HTTP/2协议
  • 使用 CDN 托管静态资源,这样可以显著减少加载时间
  • 使用gzip, Brotli 或者 Zopfli压缩你的资源
  • 图片优化(如果可以,尽可能使用 css 动画或者 svg)
  • 在超出应用视口范围的部分使用懒加载,如果你这么做了,为 SEO 制定一个后备计划(例如为 bot traffic 渲染整个页面)

工具

  • 学习使用Firefox Dev Tools来分析你的网站。
  • Pagespeed Insights 可以分析你的页面并且给出一些通用的建议来提升网站性能。
  • Lighthouse 可以给你一份有关你网站的包括性能,SEO 和无障碍等多个方面的详细分类。
  • 使用 Webpagetest.org检测页面在不同真实设备类型和地点时候的速度。trics.
  • 定义一个绩效预算(performance budget)。

APIs

不该做的事(坏的实践)

  • 将任何东西都下载下来
  • 使用未经压缩的媒体文件