Web performance basics - 学习 Web 开发 编辑

有很多的理由告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践，工具，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 直接收集。

不该做的事（坏的实践）

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