优化网站速度的 8 个技巧

你的网站有多快？

我们都知道，缓慢的网站会对用户行为产生负面影响。 但是，您真的在尽一切努力将您的网站速度降到最低吗？

今天，我们正在与一个喜欢网络开发、岩石学、WordPress、科幻小说和杜松子酒的人讨论网站速度优化的八个技巧。 谁是最快乐的，当他们深入了解 PHP、在舞台上或阅读一本好书时。 他是数字战略家、数字营销技术专家和全栈开发人员，并且是 Yoast 的 SEO 负责人。

热烈欢迎 In Search SEO 播客 Jono Alderson。

这八个步骤是：

1. 核心网络生命力
2. Cloudflare
3. Chrome 开发者工具
4. 高级图像优化技术
5. 高级字体优化技术
6. CSS 和 JavaScript 技巧
7. 缓存和版本控制
8. 聪明的第三方工具包

快速网站的八个基本要素

J：嘿，很高兴来到这里。 感谢您的款待。 这非常令人兴奋。

D：太棒了，乔诺。 很高兴有你。 你可以在 jonoalderson.com 上找到 Jono。 那么，Jono，对于慢速网站实际上如何影响用户行为，您认为目前的立场是什么？

J：有很多研究。 我认为这些都不是新闻。 现在有研究可以追溯到几十年前。 所有这些都表明，你让人们等待多少毫秒，以及这对他们购买东西的可能性有多大影响之间存在着令人惊讶的直接相关性。 人们可能不会有意识地说：“哦，这花了 200 毫秒的时间太长了，我要和你的竞争对手一起购物。” 但在这段时间里，他们可能会看向窗外或打开另一个标签，或者想知道午餐吃什么。所有这些都削弱了他们停留在当下并转变或采取行动的可能性。

我最近从一家大型咨询公司德勤那里看到了一些非常有趣的研究。 他们研究了英国和美国电子商务和潜在客户生成以及不同行业中 50 个最大的不同网站的一个子集。 他们发现了大约 200 毫秒的延迟，也就是你眨眼的时间，从而降低了网站速度，增加了大约 10% 的收入。 这只是其中一项研究。 有很多这样的。 他们都说更快、更时尚、更容易获得、更实用，只是意味着更多的钱。 所以，是的，我们看这个是不费吹灰之力的。

D：我记得看过亚马逊的一项研究，我想那是 10 多年前的事了，但我还没有看到关于它的最新统计数据。 但这肯定也是比较的。 因为如果人们习惯于浏览其他网站，并且他们认为您的网站比其他网站慢很多，那么他们就不会停留太久。

J：是的，人们真的不考虑这个。 他们认为他们的网站可能足够快。 但是你的竞争对手的网站越来越快，Facebook 越来越快，Instagram 越来越快，并且对用户体验基线变化的期望。 因此，您必须比预期更快，否则，您会相对变慢。

D：所以今天，您将分享快速网站的基本要素，从第一名，Core Web Vitals 开始。

1. 核心网络生命力

J：我认为除此之外可能还有更多。 但这绝对是我的首选清单。 我相信现在每个人都听说过 Core Web Vitals。 但如果你还没有，我认为谷歌在 2020 年中期推出了这个。 他们试图创建某种标准化的通用指标来衡量 PageSpeed 是什么。 因为在技术上和概念上，它非常复杂。 页面加载，有各种不同的阶段和各种影响它的不同事物。 因此，他们将其简化为一组指标，您可以随着时间的推移对其进行监控、趋势和分析。

关于这一点的真正好处是，这只是第一步。 目前有三个指标，今年我们将增加两个。 指标本身正在发展。 这正在成为一个成熟的生态系统，用于将硬数字与这些衡量标准进行对比，这意味着作为一家在线企业，我们更容易说我们的得分不是很好，而我们的竞争对手得分更高。 我们知道所有的研究都与收入挂钩，所以我们应该专注于改进这一点。 突然之间，我们有一种方法可以让利益相关者相信，不仅页面速度很重要，而且我们有一个衡量标准，每个人都会同意，这不是固执己见，也不是角落里的 SEO 人说他不同意那个角落的开发人员，并且没有真正拥有共同的语言。 所以这作为一个商业工具真的很强大，更不用说只是一个技术措施。

D：我知道你的大脑在说你不能承诺说只有八项最重要的最快的事情是你实际上可以做的来改善你的网站。 我知道你的大脑目前实际上可以想到 1024 件事情，但我们只是分享你提出的八个初步想法，这些想法也是我们之前讨论过的。 所以排名第二的是 Cloudflare。

2. Cloudflare

J：如果我只有足够的时间和资源来做一件事来加快我的网站的页面速度，那么它将进入 Cloudflare。 Cloudflare 是巨大的。 他们是该领域最大的技术科技公司之一。 然而，可以理解的是，有大量的开发团队和企业从未听说过它们，因为它有点书呆子气。 Cloudflare 是一个内容交付网络。 它是位于您网站前面的基础设施。 他们有一个免费版本。 设置大约需要 10 分钟。 他们只是使用魔法来加速您的网站。 它们会自动缩小你的图像，缩小你的 JavaScript，改变加载方式，确保连接更有效地在全球范围内路由，以用于不同地方的不同用途，以及 1000 种其他事情。 这些都是理论上你可以做的事情，如果你有一个非常聪明且资源丰富的开发团队，你可以做一些事情。 但是，当 Cloudflare 免费产品完成大部分工作，而每月 20 美元的产品几乎完成其余所有工作时，您为什么还要这样做呢？

因此，如果您的网站评分可能不是很好，这可能有点慢，您可以通过单击几个按钮将一个需要 6 秒加载的网站缩短到 2 秒。 基础级别非常出色，但有了高级用户和高级案例，您可以走得更远。 您可以说我想将 Cloudflare 更深入地集成到我的网站的工作方式中。 我想卸载一些业务逻辑。 我想在靠近用户位置的云端边缘的谷歌分析中运行这个标记和跟踪。 对于难以让网站本身更快、或者它在旧硬件上运行、或者托管有点糟糕的情况，它是一个了不起的工具，你实际上可以让 Cloudflare 坐在所有这一切的前面，而且从来没有再次担心它。 这确实引发了一些有趣的问题，即他们负责多少不同的堆栈部分以及您希望卸载多少业务逻辑。 但作为一种快速破解，它是一个了不起的工具。

D：第三，使用 Chrome 开发者工具来发现性能瓶颈。

3. Chrome 开发者工具

J：是的，所以运行像 PageSpeed Insights 和 Web Page Test 这样的 Core Web Vitals 工具会给你顶级分数和一些通用的建议。 使用较少 JavaScript 等通用建议的问题在于，将其应用于您的网站和面临的挑战并不是一件容易的事。 您的网站是独一无二的，它以一种非常特定的方式内置。 如果您想真正发现机会所在的下一个级别，您需要查看您的网站的加载方式。 你可以使用的最好的工具之一是 Chrome 开发者工具。

我在 Windows 电脑上。 所以我在浏览器中按 F12，我确定有一个 Mac 等价物，我得到了 Inspect 概览。 您可以单击“网络”选项卡，然后您会得到一个瀑布图，该图会按照加载顺序和加载时间显示页面上加载的所有内容。 如果你点击刷新几次，你可以看到这种情况发生并且你开始看到模式。 而且您不必是一个非常深入的开发人员，就可以看到这一特定的事情所花费的时间是其他事情的两倍。 它拿着一堆东西。 而且它是一个大 JPEG，也许我们应该缩小这个 JPEG。 因此，作为一种诊断站点的方法，特别是逐页或逐个模板，它是查看最大违规者所在位置的有效方法。

是的，除此之外还有细微差别，但是知道如何解决最大的瓶颈意味着所有被阻止的东西都会加载得更快。 作为一种挑选和发现简单机会的方式，这是一个很好的方法。 找到阻碍其他事物的事物，并使其更快一点。 您可以截屏并将其传递给您的开发人员等。他们应该能够攻击任何内容。

D：第四，使用先进的图像优化技术。

4. 高级图像压缩技术

J：是的，我以大 JPEG 为例。 这仍然很常见。 许多网站运行缓慢的一个重要原因是有人将 10 兆字节的 GIF 上传到他们的主页上，或者他们用手机或相机拍了一张照片，然后把它放到了 CMS 中。 而且没有任何逻辑可以说，也许我们应该缩小一点。 也许我们应该适合它的大小。 很多时候，当您查看 Chrome 开发人员工具和 Cloudflare 时，您会发现瓶颈在于加载此图像需要很长时间，因为它很大。 您可以使用各种工具来解决这个问题。 最重要的是你用来生成这些图像的任何过程，可能有一个工作流程。 如果您在 Photoshop 中制作内容，则在导出内容时，请确保您正在为 Web 导出内容。 考虑一下这个 JPEG 是否真的需要完美的像素质量，或者我们可以稍微降低质量并节省文件大小。 如果这有点技术性，请访问 squoosh.app。 Squoosh 是由一些 Google 开发团队构建的工具。 他们是超级书呆子，他们真的很喜欢图像空间。 您将图像拖放到其中。它为您提供了可以单击的选项，您可以在其中将 PNG 更改为 JPEG。 您拖放时，您可以看到图像中的质量变化。 我对这种权衡感到满意吗？ 还有一大堆高级复选框，我可以单击并查看会发生什么，并在这里和那里再减少几千字节。 只需几秒钟的拖放和使用设置，您就可以非常轻松地获得 2 MB 到 200 KB 的图像。 它不是很融入您的工作流程，但作为缩小一些大瓶颈图像的快速修复，它真的很酷。

D：是的，我需要了解图像优化，因为我不想承认，但我实际上仍在使用 Macromedia Fireworks 来制作软件。

J：哦，我想念Fireworks。 大约有十年左右的时间，那是我的玩具。

D：我知道。 我创建了一个图像，然后以大约 80% 的质量将其导出为 JPEG，然后说：“这对网络来说没问题。” 也许这在 10 年前是遥远的事情。

J：这可能是很多人的工作流程，他们只是将其投入到 80% 就可以了。 在大多数情况下，这会很好，但偶尔会有一些事情发生。 而且，如果您想做到消除瓶颈和畅通无阻，真的值得花时间查看每张图片并说：“我对尺寸上的这些权衡感到满意吗？”

D：当然。 对于一个必须与最好的网站竞争的超高速现代网站，我刚刚描述的肯定无法做到这一点。 所以这将我们带到第五个，即使用高级字体选择优化技术。

5. 高级字体优化技术

J：我提到过大的 JPEG 通常是一个阻塞问题。 最大的罪魁祸首之一是字体，尤其是 Google 字体，或者实际上是您从第三方域加载的任何字体。 这些通常是页面上最慢的东西，也是页面上最大的东西，作为用户，您会一直看到这一点。 当你加载一个页面时，需要几秒钟来整理，然后字体就会闪入。这是一个非常糟糕的用户体验。 Core Web Vitals 在很多方面都非常糟糕，但有一些修复。 所以谷歌字体和类似字体的问题之一是你进行跨域连接，这需要一点时间。 您要连接的东西会查询一大堆需要一段时间的后端系统。 它吐出字体，然后你必须下载该字体，然后你必须渲染它。 这个过程大概有五个步骤，只需要几秒钟，而且没有办法让它更快。

因此，最简单的胜利之一就是本地化这些字体。 不要从 Google Fonts 加载它们，忽略 Google Fonts 为您提供的有关复制和粘贴 CSS 的说明。 做一些谷歌搜索，找到一些关于如何自托管这些字体的指南。 这会因您的设置和 CMS 而异。 通常，有一些插件和流程可以使这变得非常简单。 这消除了所有这些。 然后你想做的另一件事是看看我正在加载的这个字体到底是什么以及我是如何加载它的。

在现代字体加载 CSS 中，您可以定义特定的字符集。 因此，例如，如果您知道您的网站主要是英文的，那么您可能不需要为一大堆扩展的拉丁字形加载字体字符，这实际上是默认情况下发生的。 因此，您正在加载的字体，您只使用 AZ，1 到 9，但实际上，您正在加载 200 个从未出现在您的页面上的奇数字符。 因此，如果您可以将其分割，那会快得多。 您还可以说，“我是否希望此字体快速加载，但可能不被缓存？或者在权衡取舍的情况下，我要等待它加载多长时间？我是否要退回到其他东西？还是我只是在它应该在的地方显示一个空白空间？” 您可以修改不同的设置，也可以使用 Google 工具对其进行优化。同样，作为您想要查看每一位的图像，请真正询问您是如何加载这些字体的。csstricks.com 有一些很棒的指南对于一大堆方法，你可以去挑选它。但是，再看看你的 CMS 和你的堆栈，会有插件和购买来简化这个。

D：第六，使用 CSS 和 JavaScript 技巧。

6. CSS 和 JavaScript 技巧

J：所以下一个最常见的问题是样式和脚本的加载方式。 如果你的网站有很多复杂的视觉内容，并且可能有移动、交互、小部件和你可以点击并使用的东西，那么几乎可以肯定的是 CSS 和 JavaScript 过去常常需要一段时间以不同的方式加载页面并与之交互。 当您查看阻碍其他事物的事物时，您会在 Chrome 开发人员工具报告中看到这一点。 JavaScript 是一个非常糟糕的罪犯。 如果我有一个脚本可以为页面顶部的轮播提供动力，我不想在轮播开始滚动之前等待该脚本加载。 所以你可以用这个做一些事情。 一个是你可以把它们变小。 Cloudflare 非常擅长这一点。 如果它更小，它的字节数更少，它的页面加载时间就会更快。 但是你可以做的另一件事，真的很强大，就是说对于这个JavaScript文件，我不需要立即加载，我可以等到页面完成。

有不同的方法可以做到这一点。 您可以异步加载，也可以延迟加载。 延迟通常是当今的最佳实践。 人们会做各种奇怪的事情，将异步和延迟结合起来会弄得一团糟。 但是，只需在您不需要的 JavaScript 文件上使用 defer 属性，就可以使您的页面变得更快。 因此，如果我有一些 JavaScript 来控制页脚中的某些内容，我真的不需要等待它来加载页面的其余部分，尤其是当您考虑到 JavaScript 和 CSS 交互的方式变得非常混乱时。 如果我有很多脚本，我的页面上有很多样式，其中一些要等到 JavaScript 被加载。 所以你的东西在整个地方都阻碍了其他东西。 因此，真正的战术并说我不需要立即使用它可以释放巨大的性能提升。 同样，这真的很容易在 Chrome 开发者工具中看到这些违规者的位置。 而且，如果您有开发资源，那么执行此操作非常容易。 您实际上只是向标签添加一个属性，它会自动完成。

D：第七是充分利用缓存和版本控制。

7. 缓存和版本控制

J：Cloudflare 做得非常好的一件事是，当它第一次遇到资源时，无论是图像、一段 JavaScript 还是一种样式，它都会将其保存到 Cloudflare，然后任何人在未来需要它获取缓存版本。 这从某个地方对他们来说是超级本地的。 太高效了，真好。 许多网站的工作方式使这变得非常棘手。 例如，您希望确保对样式表和脚本进行版本控制。 因此，当您发布最新版本的 JavaScript 时，您想说这是第六版。 然后，Cloudflare 可以为所有访问者很好地缓存它。 当您对其进行更新时，您想要更改该文件类型，更改文件名，所以这是版本 7。 然后你所有的缓存都过期了，人们正在请求不同的资源，他们开始很快回来。

当您开始缓存实际网页本身时，这开始变得非常强大。 所以默认情况下，Cloudflare 只会缓存一些 JavaScript 和 CSS。 您想要缓存网页。 但是您希望以一种不会意外缓存已登录的人或购物车中有东西的人的方式来执行此操作。 如果您使用的是 WordPress，Cloudflare 提供了一项名为自动平台优化的服务，它会自动执行此操作。 因此，现在您可以从距离您的用户最近的 Cloudflare 数据中心为您的网站提供服务，并且他们将在 50 毫秒而不是 600 毫秒内获得它的缓存保存版本。

如果您有一个更复杂的网站设置，您可以使用 Cloudflare 和 Workers 产品来完成此操作，该产品在 Page Rules 产品下允许您为此定义一些自己的逻辑。 但基本上，前提是，您不希望您的网站做任何事情。 如果有人正在打开您的页面，您希望该页面、JavaScript 的每一点以及样式的每一点都可以从离您最近的数据中心的任何地方提供。 我想我的服务器在挪威。 但是，如果你现在打开我的网站，上面的所有内容都来自曼彻斯特，因为那是 Cloudflare 拥有数据中心的最近的地方。 你可以修改这个。 您可以在 Chrome 开发人员工具中查看此内容，您可以在视图中添加一个额外的列，说明这是否正在缓存 Cloudflare。 而且您可以开始挑选和调整这些设置，以确保没有任何东西击中后端。

D：这将我们带到最后一个。 第八，使用聪明的第三方工具包。

8. 聪明的第三方工具包

J：有一大堆东西，你可以用这些来作弊。 目前我有两个真正的最爱。 一个是 Instant Page，它位于 instant.page，它有一个有趣的域。 这真的很酷。 因此，它不会立即使您的网站更快，但会使后续导航更快。 因此，当用户将鼠标移到您页面上的链接上时，它会在您的浏览器背景中预加载它，以便在他们单击时，它已经可用。 他们有一大堆研究表明，在实际点击之前，普通人将鼠标移动到链接上 16 毫秒。 所以那里有一点缓冲时间。 在这 16 毫秒内，这刚好足够开始在后台加载页面。 所以感觉是瞬间的。

这真的很好有几个原因。 一，这是一个很好的用户体验。 第二，它会影响您的 Core Web Vitals，即使它不是初始页面加载，Core Web Vitals 也会在您的 URL 中汇总整个站点的速度和加载时间。 因此，如果这些导航是超级即时的，那将为您的整体得分创造奇迹，这可能会让您更接近提高 Google 排名的圣杯。

对于技术含量更高的人来说，我现在真正喜欢的另一个玩具是派对小镇。 前提是您在网站上加载的某些内容是第三方的。 这通常是跟踪像素和谷歌标签管理器，也许还有其他零碎的东西。 您不希望这些内容与对您的网站至关重要的主要重要内容竞争。 因此，如果我有一堆 JavaScript 来支持页面加载，我不希望 Google 跟踪代码管理器加载它并窃取资源然后进行战斗。 我想将这些东西分开，以便我在浏览器中的页面知道它应该优先考虑关键的东西，并且第三方的东西可以在后台发生，它可以单独发生。 从技术的角度来看，它会将所有这些第三方资源加载到一个单独的工作程序中，这意味着它发生在正常流之外，它不会影响性能，并且它在后台安静地发生。 我已经从这类东西中看到了一些令人难以置信的性能提升。 我认为这是性能优化的主要方向。 设置起来有点棘手，它并不适用于所有东西。 但是，如果您真的想在竞争中领先，这是一个非常酷的玩具。 所以它有点测试版，但值得探索。

D：我试图查找 Party Town 的 URL，因为如果你在 Google 上搜索它会很难找到，但它在 GitHub 上。

J：是的。 我刚刚向您发送了一个可以共享的链接。 这是非常测试版。 这是非常 GitHub。 目前它非常书呆子和开发人员。

帕累托泡菜 - 做 100 个小改变

D：让我们以 Pareto Pickle 结束。 所以帕累托说，你可以从 20% 的努力中获得 80% 的结果。 您会推荐哪一项 SEO 活动，以适度的努力提供令人难以置信的结果？

J：我能给出的最好建议是忽略 SEO 的帕累托最优。 我认为这不再是这样了。 如果您是我们 100 年前经营实体零售店的祖父母，我认为这是一个很好的建议。 我认为我们的生态系统是不同的。 我认为特别是对于搜索引擎优化，你获胜的方式是你做 100 个小改变，今天和明天一次一个地迭代，直到你死。 否则，您的竞争对手会走得更快。 这一切都与质量、品牌和业务有关。 任何你可以在战术上说“哦，就这样做”的事情，你的竞争对手也可以这样做。

所以，是的，可能会有一些聪明的答案，比如让你的品牌声誉翻倍，因为那肯定会做得很好。 但这是一件非常复杂的事情。 我认为更好的思考方式是今天下午，我可以改进哪十件事？ 就去做吧。 而且它们不必很大或很聪明，只需迭代并变得更好。

D：你不必优先考虑事情。 但肯定有些事情比其他事情有更大的影响。

J: 是的，但大事都会变成更好的解决方案，拥有更好的内容，与产品市场更加一致，或者打动并帮助你的观众，但这些都不是你能做的有形的、战术性的事情。

你知道吗，我改变主意了。 你能做的 80% 的事情就是去获取 Cloudflare。

D：我一直是你的主持人大卫·贝恩。 Jono，非常感谢您参加 In Search SEO 播客。

J：谢谢你邀请我。 这是令人愉快的。

D：谢谢你的聆听。