作者 | Kayce Basques
来源 | Tools for Web Developers
链接 | Optimize Website Speed With Chrome DevTools
目标
本教程教您如何使用Chrome DevTools，以便找到让网站加载速度更快的方法。
继续阅读或者可以观看本教程的视频版本：
前提条件
-
您应该具有基本的Web开发经验，类似于 Introduction to Web Development class 中讲授的内容。
-
您无需了解任何有关加载性能的知识。您将在本教程中了解它！
介绍
下面这只猫叫Tony，在猫圈非常有名。他建立了一个网站，以便粉丝们可以了解他最喜欢的食物。他的歌迷喜欢这个网站，但是 Tony 一直抱怨网站加载缓慢。Tony 现在向你求助，以帮助他提升网站加载速度。
Step 1：审计网站
每当您想打算提高站点的加载性能时，都应该从审计开始。审计具有2个重要作用：
- 它为您创建了一个基准，以衡量后续的改进。
- 它为您提供了可行的提示，说明哪些更改将产生最大的影响。
设置
首先，我们需要设置站点，以便以后可以对其进行更改：
- 转到
chrome://version查看您使用的Chrome版本。本教程是基于 Chrome 68。如果您使用的是早期版本或更高版本，那么某些功能可能看起来有所不同或不可用。 不过您应该仍然能够完成本教程，只需记住您的UI看上去可能与屏幕截图有所不同。 - 打开该站点的源代码。这个选项卡我们称为编辑器选项卡。
-
单击
Remix This。项目的名称从tony更改为一些随机生成的名称。 您现在拥有了自己的可编辑代码副本。 稍后，您将修改这些代码。 -
单击
Show Live。这个 deom 将在新选项卡中打开。 此选项卡为 demo 选项卡。这个网址可能需要加载一段时间。
- 按下
Command + Option + J(Mac)或者Control + Shift + J(Windows，Linux，Chrome)。 Chrome DevTools 随 demo 一起打开。
在本教程中的其余屏幕截图，DevTools 将显示为单独的窗口。可以通过按 Command + Shift + P(Mac) 或 Control + Shift + P(Windows，Linux，Chrome OS) 打开命令菜单，键入 Undock ，然后选择 Undock into separate window 来执行此操作。
建立基准
基准记录是在进行任何性能改进之前网站的运行情况。
- 单击 Audits 选项卡。它可能隐藏在“更多面板”按钮后面。该面板上有一个 Lighthouse。
- 将您的审计配置设置与上图中的设置进行匹配。以下是不同选项的说明：
- **Device. **设置为 Mobile 会更改用户代理字符串并模拟移动视口。设置为 **Desktop **可以禁用 Mobile 的功能。
- **Audits. **禁用一个类别可防止 Audits 面板运行这些审计，并将这些审计项从报告中排除。禁用类别会稍微加快审计过程。
- **Throttling. **设置为 **Simulated Fast 3G，4x CPU Slowdown **可以模拟在移动设备上浏览页面的典型条件。之所以称为“模拟”，是因为 Audits 面板在审计过程中实际上并未节流。相反，它只是推断在移动条件下页面加载所需的时间。另一方面，Applied Fast 3G，4x CPU Slowdown 设置实际上会限制您的CPU和网络，需要权衡较长的审计过程。
- Clear Storage. 启用此复选框会在每次审计之前清除与该页面关联的所有存储。如果要审计首次访问者如何体验您的网站，请保留此设置。当您需要重复访问体验时，请禁用此设置。
- 单击 Run Audits。10到30秒后，Audits 面板将向您显示该站点的性能报告。