返回播客

成绩单

John Jantsch：这一集是 Duct Tape Marketing Podcast，由 pixelz.com 提供给您。 你必须让这些图像看起来很棒。 如果你想让它们流行，如果你想让它们代表你的产品，这是一项修饰服务，让你的图像看起来很棒。

您好，欢迎收听管道胶带营销播客的另一集。 这是约翰·詹奇。 我今天的客人是 Lukas Haensch。 他是前谷歌用户体验经理和 pathmonk.com 的 Pathmonk 创始人。

John Jantsch：我们将讨论页面速度、网站加载速度以及所有 UX 因素。 如果人们访问了您的网站并且加载速度很慢，那将是一种糟糕的体验，这就是为什么它如此重要的原因。 事实上，这是一个非常重要的因素，谷歌对外称其为 SEO 的排名因素。 卢卡斯，谢谢你加入我。

Lukas Haensch：谢谢约翰。 感谢您的款待。

John Jantsch：那么，我的意思是，很多时候人们都在谈论页面速度，并且有很多因素在起作用。 有人可能有一个加载速度很快的好网站，但有人却很慢，就像我以前说的拨号一样。 我们不再说拨号了，是吗？ 但是连接慢。 所以他们的经历很糟糕。 我的意思是，我们怎么知道我们的立场？ 我的意思是，我们如何衡量，我们的页面速度是多少？

Lukas Haensch：非常非常高兴你问到。 所以我认为也许首先，我认为要记住的一个关键概念是，我们为什么还要关心页面速度？ 非常非常简短，我们为什么还要关心这个？ 如果您将其与您的零售店进行比较，那么将其与您的零售店的滑动门进行比较可能是非常非常好的类比。 如果这是打开超级超级超级慢，有多少人会等待真正通过？

Lukas Haensch：只要你在今天经历了所有这些，就把这种类比留在你的脑海里。 因此，页面提要基本上是您对用户的开门器。 那里有很多指标，我知道有很多营销人员在倾听。 所以我基本上会给你一个指标，我们在与谷歌最大的客户合作时在谷歌内部使用，那就是速度指数。 因此，您可以拥有大量指标，加载时间，加载的第一口，何时开始渲染？

Lukas Haensch：但是如果你看一下速度指数，我会在一秒钟内告诉你你是如何得到它的，但是如果你看一下速度指数，你实际测量的是到第一个屏幕需要多长时间，以上折叠内容，需要多长时间才能完全绘制，这反过来意味着用户对您的网站有有意义的体验？ 因此，这就是我们在 Google 团队中真正真正专注于优化首屏渲染的内容。

Lukas Haensch：而且，所有其他行动都将从那里开始，因为行动号召已经存在，英雄形象已经存在，然后，其他一切都将从那里展开。 所以速度指数是你可以很容易得到的。 有一个名为webpagetest.org 的工具。 它实际上是在 Google 中构建的。 从这个意义上说，它不是官方的 Google 工具，但它是由 Google 内部的团队构建的，用于查看网站的页面速度。

Lukas Haensch：如果你把你的 URL 放在那里，你会得到一个称为页面速度指数的指标，它会告诉你 3000 或 4000，基本上是毫秒。 因此，如果您的页面速度指数为 3000，那么您就处于领先地位。 内容将在三秒后完全加载。 所以这是一件非常好的事情，请注意。

John Jantsch：再重复一遍，webpagetest.org？

卢卡斯·海恩施：正确。 Webpagetest.org 就像一个深蓝色的网站，您可以在其中放置几个​​参数，您可以选择网络，这非常重要。 您必须选择对您的用户群有很大意义的东西。 不是每个人都在使用 5G，甚至不是每个人都在使用 4G。 听起来可能很有趣，但是当我们大约在两年前，一年半前在 Google 内部这样做时，实际上，我们仍在快速测试 3G，因为如此庞大的用户群实际上速度较慢，而且低端设备。 因此，在您办公室的 wifi 中进行测试可能不是最好的选择。

John Jantsch：你在哪里找到或者你发现了什么是最大的罪魁祸首，我的意思是，减慢网站速度？

Lukas Haensch：这与我们之前所说的概念完全相关。 我们正在查看上面的折叠内容渲染，并且只有一个非常高的级别。 有一个关键概念称为关键渲染路径，这意味着浏览器必须经过大量资源才能开始在屏幕上显示任何内容。 因此，如果您的网站在显示任何内容之前有很多空白，那么您通常会阻塞关键的渲染路径。

Lukas Haensch：如果您访问webpagetest.org，您会在视觉上看到这一点，您将能够准确地看到，因为它基本上是您的页面加载方式的减慢版本。 您将在第二个中看到，我们有一个白屏，在第二个 1.5 中我们有一个白屏，依此类推，直到您实际显示第一个内容。 因此，影响最大的因素是阻碍渲染的所有内容，因为如果您阻止渲染，您将拥有一个宽页面，这通常是几件事。

Lukas Haensch：默认情况下，这将永远是，因为它只是渲染阻塞。 这是您页面中的 CSS 和 JavaScript。 无需赘述。 但是，当你有一个包含大量 Java 脚本的东西并且可以是视频播放器时，它可以是一个轮播，在你的网站顶部有一些翻转的营销信息，这通常是由 Java 脚本驱动的.

Lukas Haensch：技术人员，您将拥有一个您可能不再使用的旧 AB 测试工具。 那将是Java脚本。 因此，即使屏幕顶部并不真正需要它，它也会阻塞，一旦你开始在屏幕上实际看到某些东西就会发生什么。 因此，关键练习之一是始终检查，是我们正在使用的所有 Java 脚本文件，是我们实际使用的所有 CSS 文件，或者你可以，它被称为，延迟它们或推迟它们技术术语，您可以延迟加载其中一些项目，然后解除关键渲染路径的阻塞，然后在不更改服务器站点上的任何内容的情况下更早地显示相同的内容，而不会改变您的任何戏剧性内容。

Lukas Haensch：所以我们一直在 Google 中学到和交流的关键是，你不必做那些大的改变。 基本上，您加载的每个文件都有改进的潜力。 它是一个 CSS 文件吗？ 它可能是，目前不需要。 它可以稍后加载。 它是一个 JavaScript 文件吗？ 可以延期。 是字体文件吗？ 也许这是一种旧的字体格式。 等等等等。 你可以浏览所有的事实和图片，我认为有一个重要的技巧对图片很有帮助。

Lukas Haensch：我可以深入探讨，但最终是关于浏览这些单独的项目以及作为营销人员的您，如果是这样，那可能是您一直没有使用过的东西，只需通过 URL 访问webpagetest.org你可以一步一步地看到，好的，实际加载的是什么，我可以在我的屏幕上看到什么？ 这将使您对页面上发生的事情有一个很好的感觉。 如果有大量的 Java 脚本，如果有大量的图像，如果有长时间加载喜欢的文件，所有这些。

John Jantsch：我的意思是，我知道它最终会起到什么作用，但是托管在减慢网站速度或提供更快的负载方面发挥了什么作用？

Lukas Haensch：我的意思是，它基本上会影响整个方程式的第一部分，即你发送的速度，你的第一口，基本上，你发送信息的速度基本上是在管道中。 我们虽然一次又一次地发现，显然它发挥了它的作用，但更重要的是，在优化单个文件方面取得的胜利要快得多，因为就像我们之前讨论的那样，阻塞了关键的渲染集群。 在完全接触该主机之前，您可以做很多小事。 因此，在切换任何主要设置之前，我会查看关键渲染路径以及您如何多次加载文件。

John Jantsch：你有没有发现，今天出现的一些内容管理系统，显然 WordPress 是迄今为止最受欢迎的。 尤其是当人们开始添加主题和插件之类的东西时，这些是问题的一部分吗？

卢卡斯·海恩施：100%。 我认为您必须考虑什么是插件。 在许多情况下，插件基本上是一堆 JavaScript。 显然，这取决于它的功能，但如果它具有很多功能，是的。 例如，应用相同的逻辑，让我们从 WordPress 中获取插件逻辑。 所以你正在加载几个插件。 其中一些您实际上甚至不需要在此页面上。 其中一些您只需要在一个特定页面上。 或者其中一些您只需要在页面底部。

Lukas Haensch：所以你可以做的是，你可以，甚至还有一个用于这种元插件的插件。 但是您也可以通过代码运行它。 您可以有条件地加载插件。 因此，如果我的第一步，我的屏幕正在加载，如果我的页面正在加载，你可以做的只是使用插件的调节器加载器，然后选择何时实际加载哪个插件。

Lukas Haensch：如果您通过代码执行此操作，您将有更大的灵活性说，好吧，现在应该加载哪个？ 再一次，你提到了那里的主题，因为团队附带了很多 Java 脚本，所有这些都是在开始时加载的。 这反过来又会阻止渲染。 您可以再次通过检查逐个文件检查，好的，哪些可以延迟并稍后加载。

Lukas Haensch：所以这就是营销部门必须与开发人员坐在一起检查的地方，好吧，[听不清] 实际上是 Java 脚本文件，让我给你一个简单的例子。 您拥有结帐页面上需要的 Java 脚本。 在最初的几秒钟内根本不需要 JavaScript。 用户甚至必须到达那里。 所以这是一个组合。 真的，你看看插件，[听不清 00:10:52]，你看看 Java 脚本，你试着推迟一些，这就是你基本上一秒一秒地削减的方式。

John Jantsch：所以我已经使用您分享的页面测试以及 Google 的页面速度见解进行了测试。 移动负载与桌面负载似乎存在显着差异。 事实上，我已经测试了很多网站，但很少能找到在移动设备上获得 Google 好评的网站。 有没有我们应该做的事情？ 我的意思是，我们是否应该 [听不清] 几乎独立的网站或不同的移动体验？

Lukas Haensch：所以，这是一个非常好的问题。 我的意思是，我认为移动负载……我的意思是，移动设备的加载时间变得特别明显，因为设备和我们处于连接状态。 所以有更多的突破点，比方说，或者更多的点，有点危险，降低了性能。 这意味着，如果我正在查看我的移动页面，我确实认为，而且我认为即使使用 WordPress，您也可以将加载某些项目的条件设置为拒绝、不要在移动设备上显示或在移动设备上显示。

Lukas Haensch：其中包含某些元素。 让我们举个例子，我想也许可以给你一个旋转木马的例子。 如果顶部有不同图像的粉色轮播。 所以你可能在桌面上有这个，它并没有真正影响你的性能，但是你看一下移动设备，突然之间它会严重影响性能，因为你要加载五六张图片，这是相当多的东西加载。

Lukas Haensch：您正在加载 Java 脚本，正如我所提到的，它是随机阻塞的。 同样，这意味着现在你基本上必须有一个性能预算，你说，好吧，我有这个和那个预算可以发挥作用。 如果您正在查看您的移动页面，并且您已经在您的六张图片和您的 Java 脚本上花费了相当多的预算，那么您已经花费了相当多的时间来加载它，而您甚至需要查看在您的指标和分析中，人们甚至会与第五或第六张图像进行交互。

Lukas Haensch：或者仅仅是因为营销部门或其他人想要将这些信息传递出去？ 所以，我肯定会考虑，看特别重的东西，比如视频。 我并不是说不使用视频，但也有更聪明的方法来显示视频。 轮播，这些类型的项目非常严格，不要在移动设备上使用它们，因为它们通常没有强大的用户体验价值，而且肯定会从速度预算中占用很多。

John Jantsch：如果你有一个网站，如果你今天在网上销售产品，你就会知道图片对于人们如何对你的产品和服务发表意见至关重要。 pixelz.com that's pixel with a z.com 是一种图像修饰服务，可以拍摄您的所有图像。 他们可以修饰它们，增加形状和对称性，抚平凸起，对齐肩膀，诸如此类的东西，可以减少皱纹，可以减少和去除棉绒标签，所有看起来并不适合的东西。 找人帮你做。 加快您的上市时间，因为他们会在第二天早上为您提供修饰过的图像。 访问pixels.com，即PIXELZ.com，了解他们令人印象深刻的图像服务。

John Jantsch：您能否在不让人目瞪口呆的情况下，谈谈这个方程式中的 AMP，加速移动页面。 这是人们应该使用的东西，以获得更好的负载，更好的体验，但是你的图形更少，你的控制更少？ 那你怎么看？

Lukas Haensch：所以就个人而言，我的意思是，我如何看待它基本上是一个普通的网站，所有规则都已经预先给出。 它已经为您的 Java 脚本提供了很多限制。 它已经为您提供了，然后显然 HTML 中还有进一步的优化。 所以在某种程度上，它采用了我们刚刚讨论过的这类规则，并以某种方式将它们推给你。 所以，这就是为什么这就是这些页面加载速度非常快的原因之一。

Lukas Haensch：我不认为自己是 AMP 专家，但我绝对认为纯粹从它的本质来看，它基本上只是一个网站，一个普通的网站，里面有很多规则，基本上阻止你过度使用您的速度预算，因此它们是快速页面。 因此，如果它适合您的内容类型，我认为这对某人来说是一个很好的方式，如果您可以通过它传达您的信息，我认为这是一个很好的方式。

John Jantsch：所以我知道，如果什么都没有发生，我会给一个网站三四秒的时间，我可能会点击离开，尤其是在我的移动设备上。 是否有统计数据明确表示，是的，X 人会等待 X 时间，但如果您的网站在这段时间内没有加载，不仅是一种糟糕的体验，而且他们会离开？

卢卡斯·海恩施：是的。 只有大量的指标。 我们在团队中使用的几个指标可能会变得更糟，至少他们的状态或者我们正在变得更糟，就像，如果网站花费的时间超过三个，53% 的消费者会离开网站秒加载。 因此，根据这些指标，如果您的加载速度没有更快或在三秒内没有加载，那么您的一半流量已经在移动设备上发生了。

Lukas Haensch：当我说三秒速度指数为 3000 时，能够在三秒内将其绘制成屏幕，因为这样一个人就没有理由离开了。 因为我认为当我们谈论速度索引或页面速度时，也许还有一个关键因素，我们也在谈论一个人看到有意义的东西。 通过查看大量不同的指标来将其与人类体验分开可能不是一个好主意。

Lukas Haensch：比如你能不能向一个人展示一些有意义的东西，这意味着他们不会因为看不到东西而离开。 他们可能会因为其他原因离开。 所以 53%，还有很多其他的指标是关于如何有一个指标的，如果你加载速度快一秒，转化率就会增加大约 20% 或更多。 我很难发布，这实际上取决于用例和您获得的流量。 但我认为，如果你的学习速度不低于三秒，那么这 53% 是一个非常好的想法。 至于你的情况是否是 100%，那是另一个故事。

John Jantsch：我认为它说明了这些原因，很多时候，一些企业、营销人员只有这么多的预算注意力跨度、时间来做事情。 我认为，我认为让他们意识到为什么这应该是优先事项很重要。 我认为这是一个很好的衡量标准。

卢卡斯·海恩施：100%。 就像你在经营一家零售店，如果你的门打不开，你会立即跳上去。

约翰·詹奇：没错。 我认为部分问题是很多营销人员实际上并没有访问他们自己的网站。 不幸的是，他们实际上并没有与他们的客户或潜在客户相同的体验。

卢卡斯·海恩施：是的。 如果他们这样做，它通常是一个缓存版本。 缓存版本或 wifi 上的版本。 所以真的要努力。 继续使用类似的工具，或者您甚至可以使用 Chrome 进行操作，但要继续在 webpagetest.org 上进行测试，只是为了自己看看，大多数人对您的网站的实际体验是什么。

John Jantsch：我知道 Google 不一定会列出他们用于排名的所有因素。 但我认为，页面速度或缺乏页面速度是您的页面是否排名的变量，这一点已被广泛接受。 你能谈谈吗？

Lukas Haensch：我的意思是，显然我对影响排名的所有事情都没有全部见解。 如果是这样，我可能会，不必再工作了。 但我认为有一件事很重要，也许要记住。 这一切都是有一定原因的。 因此，越来越多的流量正在移动。 所以移动流量明显超过了桌面流量。 因此，越来越多的流量来自移动端的谷歌搜索，而不是桌面端，因此更多的是访问者，也就是更多的市场。 在这些渠道中有更多的营销机会。

Lukas Haensch：但我们普遍看到的是移动端的转化率低于桌面端。 因此，显然对提高页面速度非常感兴趣，因为它是影响用户体验的一个方面。 因此，在某种程度上，它对排名很重要的原因也是它对用户有利的原因，这就是它对转化有利的原因，这反过来又对在该频道上投放广告的人有利。 所以，我真的不能，我对排名因素没有任何进一步的见解。 我只能说这一切都来自一个很好的理由。

John Jantsch：我一直告诉人们的就是你所说的。 加载缓慢的页面是一种糟糕的体验。 所以谷歌不希望人们有糟糕的体验。 所以他们不会显示该页面。 我认为这就是看待它的方式。 我认为这一直是他们的意图。 因此，事情会随着算法而改变，不仅仅是因为他们更好地理解页面的所有因素都在网站上。

John Jantsch：所以我认为毫无疑问，事实上，测试这一点的最简单方法之一是，当我们的客户的移动体验非常糟糕时，无论是设计还是加载速度，我的意思是，我们无法让他们出现在移动搜索中。 他们只是不会。 所以我认为这是一个明确的指示，因为有人需要表明，无论你如何将它放在排名中的哪个位置，它都是一个因素。

Lukas Haensch：我想我想说的是，我在谷歌工作的所有时间里最大的收获是，很多团队高估了即使是很小的修复也需要付出的努力。 所以移动页面的页面速度优化是一个大项目。 但正如我之前试图强调的那样，没有很多事情可以做很多小事情来提高。

Lukas Haensch：就像给我一两个例子，可能会非常突出这一点。 很多人试图优化他们的英雄形象。 你可以做的事情就像你可以做的那样非常简单，你把你的英雄形象，你可以把它转换成比如说一串代码。 它在编码中称为 base 64，突然之间，您可以在 HTML 文件中的第一个请求中发送您的英雄图像。 我只是想说的是，没有大的改变要做。

Lukas Haensch：你会拍摄一张图像，然后将其转换为另一种格式，现在将它与你的第一个文件一起发送，并且你的第一个折叠内容的很大一部分已经可以绘制。 所以，我认为这可能是我最大的收获，有很多小事情可以做而不是做，把它作为一个大项目不必要地炸毁。

John Jantsch：那么有人会在哪里，比方说一个听众在那里思考，他说了一些很有意义的话，但我不知道该怎么做。 你在哪里找到这样的人，因为再次，如果你只是谷歌页面速度顾问，你会得到非常技术的人，你会得到那些只是说他们知道的人，但他们是真的，他们想要做的就是将您转移到新的托管或其他东西。 我的意思是，您如何找到合适的资源来帮助您解决这些小问题？

Lukas Haensch：我认为这是一个非常好的问题。 我可以说的是，如果您的团队合理地逐一检查文件，那么其中很多内容已经可以被发现。 您的字体文件可能只是旧字体文件格式吗？ 有字体文件格式是TTF。 如果您将其转移到 [听不清]，它会缩小 30%。 字体显示更大、更快。 所以我唯一不能说的就是一个地方，我能说的就是和你的团队一起穿过你网站的瀑布。 我认为这是诚实的最佳来源。

John Jantsch：所以我们，在介绍中我提到你最近成立了一家名为 Pathmonk 的公司。 你想告诉我们一些关于 Pathmonk 的工作。

卢卡斯·海恩施：当然。 因此，绝对在 Pathmonk 中，我们更加关注移动设备和桌面设备的转化率。 我们意识到，营销人员实际上很难回答诸如用户实际转化需要多少访问量之类的问题？ 或者你在页面上有多少秒来真正说服他们？ 而且我不是在谈论跳出率，我是在谈论某人在注册之前平均花费的秒数是多少？ 或者哪些用户操作表明访问者已准备好进行转换？

Lukas Haensch：所以我们已经看到，在能够回顾性地理解某种匿名信息方面存在很大差距，比如谷歌分析数据或查看热图视频，比如某人的行为方式。 但是我们发现存在一个实时的差距，人们很难立即对此做出反应。 如果用户 X 一直在页面上并且一直在做看起来像是正在转换的人的行为，你能对市场做出反应吗？ 我们发现大多数市场都是最新的。

Lukas Haensch：所以我们构建了基本上称为智能卡的技术，它基本上是在帮助自动基于人工智能，了解用户在页面上所做的事情，以及可能的转换模式。 那么用户在页面上时有哪些意图。 然后我们向他们展示有关您的产品的内容，例如常见问题、推荐、关于我们所谓的从底部或顶部滑动的智能卡的案例研究。 这基本上就是我们如何让网站实时响应每个给定访问者页面上发生的事情，直至他们感兴趣的产品类型或功能。

John Jantsch：而且我认为，用最简单的术语来说，如果有人正在访问某个页面，他们可能对该主题感兴趣。 确实如此，而不只是给他们通用的幻灯片，这确实是一种个性化他们在几乎每一页或每次访问或如你所说的整个路径上的体验的方式。 因为很多时候在网站上，人们会做五六件事，这肯定表明他们正在探索某个主题或有某种意图。 因此，正如您实时所说，能够对此做出反应，我认为不幸的是，人们开始期待的行为正在成为一种行为。 我说，不幸的是，因为它肯定会提高营销人员的门槛。

Lukas Haensch：有趣的是，我们看到的是，有元素，有预期的元素，显然有人正在下载某个白皮书。 但是还有其他事情，例如有人深入关注您的页面。 我们看到有人深入关注您的页面，然后再次提交其中一个重新关注的内容之间存在很强的相关性。 这就是数据在某种程度上揭示的东西，然后智能卡可以自动做出反应。

John Jantsch：我再次认为，因为我访问了该工具并观看了它的运行情况，我认为智能卡在交付方式方面非常优雅。 他们不只是接管屏幕或真的，进入某人的脸。 但是因为它们有点个性化，我认为它们会被看到，我怀疑它们会更受欢迎。

Lukas Haensch：这很有趣。 我们进行了大量的用户体验测试和用户体验工作，因为聪明人必须克服许多先入为主的观念。 它的拍摄和感觉不像聊天机器人，因为聊天机器人有很多先入为主的观念。 很多人甚至不与聊天机器人开始对话，因为他们认为这是正确的，它是一个机器人，他们不想与它交谈。

Lukas Haensch：所以指标清楚地表明很多人不会开始对话。 或者，如果它看起来像一个 cookie 横幅，我们在 cookie 横幅上点击了 1 亿次。 因此，基本上，我们将智能卡作为您网站的一部分使用，使其外观和感觉成为您网站的一部分，因此它们完全可以根据您网站的风格和主题进行定制。 然后基本上只是通过上下滑动与从无处弹出来成为网站的一部分。

John Jantsch：嗯，Lukas，非常感谢您加入我们并谈论页面速度，希望我们很快会在路上遇到您。

Lukas Haensch：非常感谢。 感谢您的款待。