如何做性能优化

概况

在前端开发中，最常面对的一个问题就是性能优化，所以这里整理了一部分的方法和工具，保证你的网站快速加载，以避免用户下载。

当你构建现代Web网站时，包括pc端和移动H5，如果你要快速并保持快速，那么衡量，优化和监控是非常重要的。性能在任何在线网页能否成功中起着重要作用，因为高性能网站比表现不佳的网站更好地吸引和留住用户。

网站应专注于优化用户体验。像Lighthouse这样的工具会突出显示这些指标，并帮助你采取正确的步骤来提高性能。要“保持快速”，请设置并执行性能优化，以帮助你的团队在你的网站启动后继续快速加载和让用户满意所需的约束条件下工作。

衡量网站的效果

• 探索Lighthouse的表演机会

优化图片

• 使用Imagemin压缩图像
• 用视频替换动画GIF以加快页面加载速度
• 使用lazysizes延迟加载图像
• 提供响应式图像
• 提供正确尺寸的图像
• 使用WebP图像

优化JavaScript

• 使用PRPL模式应用即时加载
• 预加载关键资产以提高加载速度
• 通过代码分割减少JavaScript有效负载
• 删除未使用的代码
• 缩小并压缩网络负载
• 为现代浏览器提供现代代码，以加快页面加载速度

优化Web字体

• 在字体加载期间避免隐藏文本

测量现场性能

使用Chrome UX报告查看字段中的效果
在Data Studio上使用CrUX Dashboard
在PageSpeed Insights上使用Chrome UX报告
在BigQuery上使用Chrome UX报表

实施性能优化

• 性能优化101
• 将性能优化合并到项目构建过程中
• 使用Lighthouse CI设置性能优化

这只是做目录的整理，后续会更新相应的文章