【译】使用 Chrome DevTools 优化网站速度

作者 | 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个重要作用：

• 它为您创建了一个基准，以衡量后续的改进。
• 它为您提供了可行的提示，说明哪些更改将产生最大的影响。

设置

首先，我们需要设置站点，以便以后可以对其进行更改：

1. 转到 chrome://version 查看您使用的Chrome版本。本教程是基于 Chrome 68。如果您使用的是早期版本或更高版本，那么某些功能可能看起来有所不同或不可用。 不过您应该仍然能够完成本教程，只需记住您的UI看上去可能与屏幕截图有所不同。
2. 打开该站点的源代码。这个选项卡我们称为编辑器选项卡。

3. 点击 tony，显示菜单

4. 单击 Remix This。项目的名称从tony更改为一些随机生成的名称。 您现在拥有了自己的可编辑代码副本。 稍后，您将修改这些代码。

5. 单击 Show Live 。这个 deom 将在新选项卡中打开。 此选项卡为 demo 选项卡。这个网址可能需要加载一段时间。

6. 按下 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 来执行此操作。

建立基准

基准记录是在进行任何性能改进之前网站的运行情况。

1. 单击 Audits 选项卡。它可能隐藏在“更多面板”按钮后面。该面板上有一个 Lighthouse。

2. 将您的审计配置设置与上图中的设置进行匹配。以下是不同选项的说明：

• **Device. **设置为 Mobile 会更改用户代理字符串并模拟移动视口。设置为 **Desktop **可以禁用 Mobile 的功能。
• **Audits. **禁用一个类别可防止 Audits 面板运行这些审计，并将这些审计项从报告中排除。禁用类别会稍微加快审计过程。
• **Throttling. **设置为 **Simulated Fast 3G，4x CPU Slowdown **可以模拟在移动设备上浏览页面的典型条件。之所以称为“模拟”，是因为 Audits 面板在审计过程中实际上并未节流。相反，它只是推断在移动条件下页面加载所需的时间。另一方面，Applied Fast 3G，4x CPU Slowdown 设置实际上会限制您的CPU和网络，需要权衡较长的审计过程。
• Clear Storage. 启用此复选框会在每次审计之前清除与该页面关联的所有存储。如果要审计首次访问者如何体验您的网站，请保留此设置。当您需要重复访问体验时，请禁用此设置。

3. 单击 Run Audits。10到30秒后，Audits 面板将向您显示该站点的性能报告。