Web performance basics

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

最佳实践

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

工具

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

APIs

不该做的事(坏的实践)

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