Fast load times翻译开篇
用于提升网站性能的技术
导读
当你开始构建现代 web 站点时，如果你想保证站点的性能，测量、优化和监控是很重要的事情。性能在任何线上企业中都扮演着重要角色，一个高性能的网站永远比低性能的网站更能吸引留住用户。网站优化应该以用户体验为中心，像 Lighthouse 这样的工具（Chrome 提供的工具）能够高亮这些指标并且帮助你一步步提升你的站点性能。为了保证站点性能够持久高效，设置“性能预算”（在一定指标内），来帮助你的团队在有约束的范围内工作，并能够保持性能高效和用户满意度。
你将会学到什么
- 介绍
- 设置性能预算
- 优化你的图片
- 图片和视频懒加载
- 优化你的 JavaScript
- 优化你的资源传输
- 优化你的 CSS
- 优化你的第三方资源
- 优化你的 webfonts
- 优化你的网络质量
- 测量线上性能
- 建立性能文化
介绍
设置性能预算
- 性能预算 101
- 你的第一个性能预算
- 将性能预算合并到构建中
- 用 Lighthouse作为性能预算
- 和 bundlesize 一起使用 Travis CI
- 用 Lighthouse 设置性能预算
- 用 Lighthouse CI 进行性能监控
优化你的图片
- 选择正确的图片格式
- 选择正确的压缩级别
- 使用 imagemin 来压缩你的图片
- 用视频代替 GIF 动画来加速你的页面加载
- 服务响应的图片
- 为图像提供正确的尺寸
- 使用 Webp 图片
- 使用图片 CDN 来优化图片
图片和视频懒加载
- 使用懒加载来提升加载速度
- 图片懒加载
- 视频懒加载
- web 原生的图片懒加载
- 使用 lazysize 来懒加载图片
优化你的 JavaScript
- 使用 PRPL 模式来即刻加载
- 通过代码拆分来减小 JavaScript 负载
- 删除无用代码
- 精简和压缩网络请求负载
- 在现代浏览器中使用先进的代码来获得更快的页面加载
- CommonJS 是如何让你的包体变得更大的
优化你的资源传输
- 内容分发网络（Content delivery networks：CDN）
- 资源优先级
- 通过预加载关键资源来加速加载速度
- 提前建立网络连接来提升感知到页面的速度
- 预加载资源来加速将来的页面跳转
优化你的 CSS
- 延迟加载非关键 CSS
- 压缩 CSS
- 抽离出关键 CSS
- 通过媒体查询优化 CSS 背景图
优化你的第三方资源
- 第三方 JavaScript 的性能
- 识别低效的第三方 JavaScript
- 高效地加载第三方 JavaScript
优化你的 webfonts
- 避免在加载时看不见文本
- 优化 webfont 加载和渲染
- 减小 webfont 体积
优化网络质量
- 基于网络质量的自适应服务
衡量线上性能
- 使用 Chrome UX Report 来查看线上性能
- 在 Data Studio 使用 CrUX Dashboard
- 在 PageSpeed Insights 使用 Chrome UX Report
- 在 BigQuery 使用 Chrome UX Report
- 使用 Chrome UX Report API
建立性能文化
- 速度的价值
- 如何让性能提高产出
- 你需要监控哪些来提高性能
- 如何报告指标和建立性能文化
- 跨功能修复站点速度
- 关联网站速度和业务指标
译者的话
为什么翻译这个系列
我所在的公司正处于 B 轮到 C 轮的过程中，正在慢慢从业务中解脱出来，转而开始关注性能和代码质量，这时候一大堆优化需求就来了。但是我发现，**优化并不难，难的是发现优化的点！**大佬厉害的地方就在于能发现可以优化的点，而如何优化，其实都是交给小弟干的。
发现优化点的能力才是核心能力，这需要扎实的基础和广阔的视野——也就是知识的广度和深度。这个系列主要是能够提升你知识的广度，光看这些标题我就感觉到了自己接触的东西还是太少。
性能文化
写出优秀的代码，并非一蹴而就，这需要一段时间去改变自己，养成习惯，形成文化。这是中小型公司一直缺失的！（当然，这和公司的业务体量有关）如果一个产品要从小众走向大众，性能是绕不开的坎，而养成性能文化，是一个优秀的团队和产品所必须的。
最后
我会在保持语句通顺的前提下尽量直译，尽量保持文章正确，还原它原本的含义，我也会在文章末尾添加一些自己的见解和笔记，不喜欢的可以直接忽略。
本篇是系列文章的大纲和目录。
欢迎关注的我新建的个人公众号： 前端 stack ，每周分享一篇技术外文翻译
3621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
