加速 Tesla.com - 第一部分：图片和 JS 压缩

我喜欢特斯拉。我认为他们是一家很棒的公司，致力于创造更美好的未来。所以最近我访问他们的网站时，网速很慢，发现加载速度很慢。于是，我当然打开了 Firefox 开发者工具，开始仔细研究。

TLDR：最终，我通过删除不必要的内容和优化资产交付，成功将主页的交互时间从 17 秒以上缩短到 4 秒左右。

本系列文章分为两部分，旨在展示如何实现以下实际用例：

注意问题 - 在您的网站上运行网页测试/Lighthouse
确定需要改进的空间 - 查找占用大量资源、请求数量，并特别注意 CSS，因为它会阻塞
使固定
1. 删除不需要的内容
2. 将所需内容拆分成更小的块
3. 延迟加载不重要的内容
4. 按需加载至少一半用户未使用的内容

这些是最简单的技术，不涉及重写代码或更改页面的任何功能，这正是本审计/文章想要展示的。

问题

在网站上运行网页测试和 Lighthouse 后，我发现了以下问题：

主照片为 PNG 格式（7.7 MB）
非最小化的 Boomerang.js 库（http://www.boomerangjs.org/）
有些字体内联在 CSS 中但从未使用过
有些字体是内联的，但实际上不应该
大多数内联资产都是重复的（可以实现巨大的节省）
所有 44 种语言的部分资源都包含在主 CSS 文件中，尽管用户一次只能使用一种
大量的媒体查询，在这个大小下应该分成多个 CSS 文件
主 JS 文件很重，看起来可以将其分成几个小部分并延迟加载

我们不会解决其中一些问题，因为 JavaScript 的本质太复杂，而且我对这个网站不够了解，无法判断哪些脚本可以按需加载，哪些不能。这是特斯拉开发人员的任务，我只能通过我的建议来帮助他们做出决定。

解决方案

我采取了以下措施来加快网站速度：

压缩图像并使用 JPEG 格式 - 节省 6.7 MB + 通过使用渐进式 JPEG 提高感知性能
删除未使用的字体 - 使页面减轻了 150 KB，并且由于它位于 CSS 内部，因此不再阻止渲染
缩小 boomerang.js 库 - 120 KB → 40 KB

之前的表现

我使用pagepagetest.org（参见报告）和Lighthouse做了一些基线测量：

在 Web 页面测试中，最重要的一项是 Largest Contentful Paint。这意味着这张 7 MB 的 Hero Image 需要 16 秒才能加载完成。

在 Lighthouse 测试中，我特别关注交互时间和首次 CPU 空闲时间 - 这表明用户何时可以开始使用您的页面（意味着 JavaScript 不再阻塞主线程）。

头像解决方案

我们先解决第一个问题，因为它是最容易解决的问题，而且不需要任何技术知识。正如我在《网页图片优化》一文中所写，你基本上可以通过图片的内容来判断它应该使用哪种格式。在本例中，它应该是 JPEG 格式，我将使用 MacOS 预览功能将其保存为 JPEG 格式，然后使用 ImageOptim 进行压缩。

为了确保图片质量不降低（毕竟是产品页面，所以必须看起来美观），我使用了大于 90 的质量，这样可以最大程度地减少伪影。效果相当不错，单张图片就节省了超过 7 MB 的内存。此外，JPEG 是渐进式的，所以加载速度比 PNG 流畅得多。

未缩小的 boomerang.js 库

这也是一项简单的任务，只需将文件内容粘贴到 JavaScript 压缩工具中即可。如果您使用 DuckDuckGo 搜索引擎，只需输入“js minifier online”，它就会立即弹出。压缩后文件大小减少了 80 KB，从 120 KB 缩小到 40 KB。对于 20 秒的工作来说，效果还不错。