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

• 收集用户指标通过 https://github.com/akamai/boomerang 。
• 或者通过window.performance.timing 直接收集。

不该做的事（坏的实践）

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