Web 性能基础

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

最佳实践

从学习浏览器的关键渲染路径开始。了解这些会帮助你通晓如何提升浏览器的性能。
使用资源提示，例如 rel=preconnect、rel=dns-prefetch、rel=prefetch 和 rel=preload。
压缩 JavaScript 代码至最小。只为当前页面加载需要使用到的 JavaScript 代码。
CSS 性能因素
在你的服务器（或者 CDN）上使用 HTTP/2 协议。
使用 CDN 托管静态资源，这样可以显著减少加载时间。
使用 gzip、Brotli 或 Zopfli压缩你的资源
图片优化（如果可以，尽可能使用 CSS 动画或者 SVG 图片）。
在超出应用视口范围的部分使用懒加载，如果你这么做了，为 SEO 制定一个后备计划（例如为 bot traffic 渲染整个页面）；例如，在 <img> 元素上使用 loading 属性。
同样至关重要的是，要认识到什么对用户真正重要。这可能不是绝对的时间，而是用户感知。