速度杀手：如何审核和提高网站的速度和性能
已发表: 2017-10-17所以你已经在你的 WordPress 网站上完成了所有这些搜索引擎优化和转换优化。
你获得了反向链接，你的内容很棒，你的页面得到了优化，你正在吸引评论，你有一个引人注目的 CTA，并且你有很多准确的商业列表。 你的网站很漂亮。 一件艺术品，真的！
……但是针没有动。 为什么？ 解释可能比您想象的更直接。 您的网站可能很慢。
网站速度不佳实际上非常普遍。 甚至 Vendasta 的团队也亲身经历过这个问题。 一段时间以来，我们一直在与我们的网站速度问题作斗争，我们已经取得了进展……但我稍后会详细介绍。
我一直在营销人员和营销机构中看到这个问题。 我们是那些应该“明白”的人，并且是网站页面速度优化等最佳实践的早期采用者。 然而，Google 的 PageSpeed Insights 工具却对我们许多华丽的、SEO 优化的、内容丰富的网站提出了不同的看法。
我们都需要做得更好。
这就是您现在阅读本文的原因，让我们开始吧！
目录
什么是页面速度？
如何确定您的页面速度和分数
为什么页面速度很重要？
1. 速度扼杀用户体验
2. 速度杀死 SEO
3. 速度扼杀转化
如何使您的网站加载速度更快？ 8战术
4 个站点速度案例研究
如何进行审核和站点速度优化
1. 获取图表结果的基线
2. 完成 8 个步骤
3. 需要时寻求帮助
4. 继续致力于提高网站速度
如何利用网站速度来增加销售额
什么是页面速度？
页面速度是网站页面上的内容完全加载所需的时间。 在一个人们开始期待立竿见影的世界里，越快越好。
事实上，根据 Akamai 和 Gomez.com 所做的调查，将近一半的网络用户希望网站在 2 秒或更短时间内加载，如果网站未在 3 秒内加载，他们往往会放弃。
相关阅读： 58 个令人毛骨悚然的网站统计数据
所以 3 秒是一般访问者可以容忍的最低速度。 典型的网站能胜任这项任务吗？ Pingdom 使用他们自己的客户作为数据源，发现对他们来说，答案是否定的。
在 Pingdom 的客户端中，3Mb 网页的平均加载时间为 5 秒。 太慢了。
许多用于页面加载时间的标准来自 Geoff Kenyon 进行的一项研究，他将网站速度与网络的其余部分进行了比较：
- 如果您的站点在 5 秒内加载，则它比 web 的大约 25% 快
- 如果您的站点在 2.9 秒内加载，则它比大约 50% 的网络速度更快
- 如果您的网站在 1.7 秒内加载，则它比大约 75% 的网站快
- 如果您的站点在 0.8 秒内加载，则它比大约 94% 的 Web
那么，您如何确定您的网站的排名呢？
如何确定您的页面速度和分数
以下是衡量您的网站如何与我们上面讨论的当前用户期望相提并论的方法：
- 进入您网站的 Google Analytics 网站速度报告。 这将使您了解您的网站在不同时间段内的表现，以及每个页面的加载速度。
- 在 Google 的 PageSpeed Insights 工具中输入您网站的 URL。 这将为您提供一份关于您的网站在移动设备和台式机上的速度性能的成绩单。 该报告附带了一些建议操作，您可以采取这些操作来提高网站速度。
- 检查 Pingdom 的网站速度测试，找出比 Pingdom 测试网站的平均速度、排名和百分比更快
- GTMetrix 将全面了解您网站的速度优化状态。
注意：当您在 Pingdom 和 Gtmetrix 中看到不同的速度时序时，不要迷惑自己。 Pingdom 会向您显示加载时间（显示您网站的第一个结果所需的时间 - 这就是谷歌计算的时间，您也应该这样做），而 GTmetrix 会向您显示完整加载时间（显示完整页面所需的时间）功能运行）。 为了进一步理解，从这两种工具中看到速度瀑布总是好的。
作为网站速度审核的一部分（我将在下面详细介绍），您将使用这些工具来跟踪您的优化进度。
相关阅读：如何加速您的 WordPress 移动网站
为什么页面速度很重要？
弥合用户期望（2 秒）和平均网站加载时间（5 秒）之间的差距是页面速度优化的目标和我们稍后将概述的策略。 但是为什么页面速度很重要呢？ 归结为 3 个相互关联的主要原因：
1. 速度扼杀用户体验
用户体验可能是您应该关心网站速度的最重要原因，所以我们将从这里开始。
人们不再对加载缓慢的网站有耐心了。 一开始，仅仅连接到互联网就需要一种已经不存在的宽容。
你够大了还记得这甜美的声音吗？
今天，人们经常在线，您最多有 3 秒的时间来显示您的页面，否则他们就会消失。 超过 3 秒会造成糟糕的用户体验，而且未来的门槛只会越来越高。
在他关于“成功 Web 应用程序的 10 条黄金原则”的演讲中，企业家和博主 Fred Wilson 指出，
“速度是最重要的特征。 如果你的应用程序很慢，人们就不会使用它。 与高级用户相比，我在主流用户身上看到的更多。 我认为高级用户有时对构建真正快速的网络应用程序的挑战有一点同情的眼光，也许他们愿意忍受它，但当我看着我的妻子和孩子时，他们是我的主流观点世界。 如果事情很慢，他们就走了。”
考虑这一点的最简单方法是您浏览网站的方式以及您对大多数网站的期望。 你坐在那里容忍缓慢的加载时间吗？ 您对需要很长时间才能加载的网站有何印象？
相关阅读：创建小型企业网站的新手友好型 10 步指南
2. 速度杀死 SEO
用户体验实际上是网站速度对 SEO 影响背后的驱动力。
Yoast 的 Edwin Toonen 解释说，
“Google 的最新研究表明，当页面加载时间从 1 秒增加到 3 秒时，跳出的几率增加 32%。 1 秒到 5 秒会将机会增加到 90%，如果您的网站加载时间长达 10 秒，跳出的机会会增加到 123%。 这是令人难以置信的。 对于搜索引擎而言，更好的结果和性能是网站健康、取悦客户的标志，因此应该获得更高的排名。”
虽然谷歌迟迟没有正式透露速度慢的网站是否会导致排名下降，但那些日子似乎即将到来。 您需要确保您的网站和您管理的网站已准备就绪。
3. 速度扼杀转化
您的网站速度对转化的影响应该真正引起您的注意。 如果每一步都需要很长时间，你怎么能让人们通过你的漏斗？ 您的超级粉丝会这样做，但那些容易对购买者感到后悔的犹豫不决的新人会反弹。
例如，SOASTA 最近对他们的一个 mPulse 客户进行了一项研究，该客户是一家领先的在线零售商，拥有大量（450 万个会话）移动流量。
以下是他们的主要发现：
- 在转换方面，性能最佳点为 2.4 秒
- 仅快一秒的页面转化率提高了 27%
- 在 4.2 秒时，平均转化率下降到 1% 以下
- 到 6 秒时，移动转化率开始趋于平稳
图片来源： SOASTA
其含义非常清楚。 缓慢的页面加载时间会影响转化率。 因此，夏洛克式的演绎推理表明，专注于提高网站速度应该会提高转化率！
让我们看看我们是否能做到这一点。
如何使您的网站加载速度更快？ 8战术
加速您的网站并不一定是一件轻而易举的事。 如果你有一个小而轻的网站，你可能只需要尝试这个列表中的几个策略。
但是，具有大量代码和内容的大型旧站点可能需要一些持久性并实施以下列表中的几种策略。
从这里开始：
1.利用浏览器缓存：
当您访问网站时，您的浏览器通常会缓存网站上的页面以加快加载时间。
当用户访问网页时，浏览器缓存会将网页资源文件存储在本地计算机上，因此利用浏览器缓存就是您指示浏览器应如何处理其资源。
如果您的服务器的响应不包含缓存标头，或者如果资源被指定为仅缓存很短的时间，则速度可能会变慢。
利用缓存将为重复访问者更快地加载您的页面，共享这些相同资源的其他页面也是如此。
注意： SEO 内容策略师 Maddy Osman 指出“W3 Total Cache对此非常有用，但某些主机（如 GoDaddy）被禁止使用。 它需要专家来配置，这样你就不会破坏你的网站。”
这是怎么做的
2.优化图片：
如果图像加载速度更快，您的网站加载速度也会更快。 谷歌指出“......图像通常占页面上下载字节的大部分。 因此，优化图像通常可以最大程度地节省字节并提高性能。”
这意味着当页面上的图像可以优化以减小文件大小而不显着影响其视觉质量时，您可以获得一些重大改进。
这是怎么做的
3. 压缩 HTML、CSS 和 JavaScript：
缩小会删除代码执行不需要的任何不必要的字符。
您可以删除的冗余数据源包括代码注释和格式、删除未使用的代码、使用较短的变量和函数名称等。
这是怎么做的
4.启用gzip压缩：
当有人访问您的网站时，Gzip 压缩会大大减少从您的服务器发送的文件的大小。 这将大大加快速度。
根据 GTMetrix，
“gzip 在 Web 环境中运行良好的原因是 CSS 文件和 HTML 文件使用了大量重复的文本并且有大量的空白。 由于 gzip 压缩了常见的字符串，这可以将页面和样式表的大小减少多达 70%！”
这是怎么做的
5.减少服务器响应时间：
服务器响应时间是 Web 服务器响应浏览器请求所花费的时间。 这是一个需要解决的关键问题，因为如果您的服务器响应时间很慢，那么无论您的页面速度如何优化，您的页面都会显示得很慢。
Google 表示您应该将服务器响应时间减少到 200 毫秒以下。 那么你如何做到这一点？
这是怎么做的
6.避免着陆页重定向：
当您有多个从给定 URL 到最终登陆页面的重定向时，您的网站速度真的会变慢。 这会引发需要时间处理的重定向循环。
以下是一些可以减慢速度的重定向示例：
example.com → m.example.com/home - 移动用户的多次往返惩罚。
example.com → www.example.com → m.example.com - 非常慢的移动体验。
这是怎么做的
7.优先显示内容：
当需要额外的网络往返来呈现页面的首屏内容时，这就是您将从 Google 的 PageSpeed 工具获得的确切消息。
这种“首屏”内容是您访问页面时在桌面或设备上看到的内容。 因此，对可见内容进行优先排序是建议您对事物进行优先排序，以便首先（并快速）为用户加载页面上的基本元素，并推迟次要页面元素，如社交共享插件、分析 javascript 等。
这是怎么做的
8. 消除首屏内容中的渲染阻塞 JavaScript 和 CSS：
JavaScript 和 CSS 资源通常会阻止您的页面在完全加载之前显示。 这通常是个好主意，因为过早显示首屏内容可能看起来很奇怪。
然而，这是您从 Google 收到的关于站点速度的常见消息，处理它确实可以使您的页面速度提高几个档次。
这是怎么做的
注意：对于大多数人来说，这是最难解决的问题。 有一些 wordpress 插件可以做到这一点，但它们可以让您的网站在每次加载时看起来都像弗兰肯斯坦。
案例研究：加速 Vendasta 的博客
所以我正在写这篇关于网站速度的文章，即使 Vendasta 的移动速度为 44/100（更新：三个月后我们的速度为 77/100！），桌面速度为 60/100。
相信我，我知道这里可能存在关于街头信誉的问题。 然而，我们的故事远不止 Google 的洞察工具所能告诉您的。
在 Vendasta，我们在网站速度方面投入了大量工作，但显然我们仍未达到预期目标。 我们实际上已经做了很多改进，但我们的网站很大，内容很多，所以我们还没有达到移动和桌面 80/100 的目标。
然而，我们并不是唯一在网站速度方面苦苦挣扎的人！ 许多知名网站与我们面临同样的挑战。 事实上，根据 Google 的 PageSpeed Insights 工具，即使是 HubSpot 也需要改进其网站的性能：
这不是 HubSpot 的“射击”标注（尊重！），我只是用它们作为示例来说明提高网站速度可能是一个挑战，即使对于专业人士来说也是如此，我们都需要改进满足下一代互联网用户的需求。 通过该工具运行一些您最喜欢的网站，您就会明白我的意思！
正如我上面提到的，我们为加快速度所做的每一项改进都会产生指数级的结果。
Vendasta 营销技术专家 Adam Bissonnette 指出，
“对我们来说最大的变化是服务器端的东西——我们在 AppEngine 中运行我们的 wordpress 网站处于一个独特的位置（没有人这样做）并且巨大的性能提升是从 AppEngine Standard 切换到处于 Beta 阶段的 AppEngine Flex。我们也改变了我们的 php 版本从 5 到 7 这也有很大帮助。更新 php 带来了一系列问题，其中某些插件不再工作，我们不得不处理一两个月的后果，但速度比丢失的功能更有价值”
您可以从中得到的是，为您的特定情况找到最佳解决方案是关键。 您可能会发现我们在这里甚至没有提到的可以为您的网站带来积极影响的策略！
看看我们的博客在 2016 年 5 月开始提高网站速度后的增长情况：
这些改进为随后的所有 Vendasta 内容计划奠定了基础。 从那时起，我们就专注于制作大量有深度、高质量的内容。 如果没有我们同步的网站速度改进，您不太可能看到分析屏幕截图显示的流量激增。
随着我们不断优化我们的网站速度和改善我们的用户体验，性能只会提高！
要点：您无需获得 100/100 的分数即可体验网站的增长。
如果您是 40/100，请在时间允许的情况下进行一些改进，然后争取达到 60/100。 不要立即为 100/100 射击而筋疲力尽！
案例研究：iHeartRaves
iHeartRaves 是节日时尚的世界领导者，其使命是激发个人创造力并增强自我表达能力。 结合他们的另外两个姐妹品牌，他们的 Shopify 商店每年的总收入为 2000 万美元，并且他们已经连续四年入选 Inc. 5000。
作为电子商务网站，iHeartRaves 清楚地意识到网站速度和性能不佳的财务后果。
iHeartRaves 的数字营销策略师 Brandon Chopp 告诉我，
“作为电子商务品牌，我们意识到网站速度是巨大的！ 当我考虑转化时，我在考虑通过号召性用语让用户点击某些内容的最佳方式。 事情的真相是，更快的网站将永远获胜。 您的网站越快，用户转换的可能性就越大。”
布兰登知道他必须提高站点速度才能帮助企业实现收入增长目标。 他使用以下策略解决了 iHeartRaves 的速度增强问题：
- 优化图片：为了确保我们的移动网站快速加载，我们使用名为 Crush.pics 的 Shopify 应用程序。 这确保了我们所有的图像都针对站点速度进行了优化，同时仍保持图像质量。
- 缩减代码：我们还采取措施缩减所有流式代码和优化脚本加载顺序，同时减少被调用脚本的总数。
- 清理页面资产：删除某些页面上不必要的资产，同时减少其他页面上的图像资产，也有助于减少网站加载时间。 我们试图在速度和内容之间取得平衡，因为我们是一个电子商务网站。 确保我们的图像质量达到我们的标准，同时为我们的客户保持良好的用户体验对我们来说非常重要。
通过这些更新，页面加载速度和跳出率结果确实得到改善：“自从进行更改后，我们的网站速度同比从 10.25 秒减少到 6.86 秒（减少 65%），我们的跳出率也减少了 6%，”Brandon 解释说. “它最初是 40.34%，现在下降到 34%。”
这些改进也已转化为 iHeartRaves 的切实财务成果。 “我们从 Google 拥有一个快速的移动网站而受益，因为我们的转化率逐年增加，这在很大程度上要归功于我们网站速度的下降。 通过将客户的用户体验放在首位，我们能够留住我们的客户，并让各地的购物体验更加轻松。”
要点：重要的是要记住速度和用户体验是相辅相成的。
结合起来，这两者可以导致统领它们的一个指标的改进：转化！
案例研究：Jubaer 的 6 秒 40 点改进
Vendasta 自己的 SEO 专家 Jubaer Prodhan 分享了一个实例，他在自己的网站上使用了 Google 的 Pagespeed Insight Tool，并取得了一些不错的结果。
Jubaer 指出，“就我而言，我有一个 wordpress 网站，加载时间超过 8 秒，GPI（Google PageSpeed Insight）得分为 43。我做了以下事情来提高网站速度。”：
- 图像优化：如果操作正确，则可以大大减小页面大小和速度。 在我的例子中，页面大小从 3MB 下降到 1.6mb。 使用的插件：ShortPixel Image Optimizer（也可以用这个工具优化图片）
- 代码压缩：我们经常使用多个 wordpress 插件来满足我们的各种需求。 我们没有意识到的是，他们中的大多数会向您的站点添加额外的 CSS/HTML/Javascript。 这会增加加载时间和浏览器请求。 缩小（删除额外的行和代码）是一个简单的解决方案。 使用的插件：自动优化
- 浏览器缓存：大多数主要工具都推荐使用浏览器缓存。 它还减少了带宽、回访者的加载时间以及许多其他有用的东西。 使用的插件：WP Fastest Cache
Jubaer 的网站现在加载时间为 1.9 秒，GPI 得分为 83！ 与 8 秒和 43 分的 GPI 相比，这是一个很大的进步。
要点：较小的网站只需进行一些关键更改即可显着提高速度。
尝试通过 Jubaer 的列表开始工作，看看在继续下一个策略之前会得到什么结果。
相关阅读： 7 个 WordPress SEO 插件：您的新本地堆栈
案例研究：一家公司如何在 Google 的 PageSpeed 工具上达到 100/100
获得 100/100 表明您的网站已尽可能优化速度。 这是最终目标，与我交谈过的一家公司解释了一些帮助他们实现目标的内部策略。
Bret Bonnet，Quality Logo Products 的共同所有者/创始人，这是一家位于伊利诺伊州芝加哥的价值 4000 万美元的促销产品分销商。 解释说，
“页面速度是我们组织的主要关注点。 尽管它很小，但它仍然是一个排名信号。 研究表明，页面速度会对转换性能产生巨大影响。 改善网站加载时间的最有效方法是使用资产加载，允许“首屏”内容在加载 CSS/JS 之前完全显示。 不优化“首屏”内容的加载可能会导致 Google Page Speed Insights 整体得分减去 10 分。”
[clickToTweet tweet="不优化首屏内容的加载会导致 Google #PageSpeed Insights 整体得分减去 10 分。" quote="不优化首屏内容的加载会导致 Google #PageSpeed Insights 整体得分减去 10 分。"]
这 10 分的扣分显示了 Google 认为优化首屏内容的重要性。 布雷特接下来的解释是令人吃惊和自相矛盾的：
“除了资产管理之外，任何在其源代码中包含 Google AdWords 或 Google Analytics 等通用跟踪代码的网站都无法获得满分。 这些 JS 文件直接由谷歌提供——无论出于何种原因，谷歌不遵循他们自己的质量指南——并且未压缩地传输到浏览器。 这种糟糕的优化——这又是你无法控制的——完全在谷歌这边，可能会让你损失多达 5 分。”
Quality Logo Products 能够使用以下策略加快速度并实现 100/100：
“为了克服这个问题，我们记录了谷歌抓取的 IP 和这些工具的源 IP，并让我们的服务器有意为我们页面的谷歌版本提供服务，而没有安装跟踪代码。 这有点奇怪，但 Google 正在损害我们自己的 Google Page Speed Insight 得分。 因此，为了克服它，我们有意不向 Google 提供其自己未优化的代码，从而使我们的页面速度得分平均提高了 5 分。”
要点： 100/100 分是可以达到的！
令人困惑的是，谷歌自己的产品将速度放慢到如此程度，但本案例研究中的解决方法应该有所帮助。
如何进行审核和站点速度优化
1. 获取图表结果的基线
审核和优化过程的第一步应该是了解您的网站目前代表几个指标的基线。
如果您记录您的起点，您将能够更好地跟踪您的优化工作是否成功。 任何时候您以任何方式优化您的网站以提高速度，请确保您根据这些相同的指标记录您的进度。
以下是您应该跟踪的一些事项：
- 网站加载时间：转到您的 Google 分析报告菜单→行为→网站速度→概述（和页面计时以查看各个页面）。 记录平均网站页面加载时间和您要跟踪的任何关键页面。 您还可以使用上面提到的 Pingdom 和 GTMetrix 工具。
- 您网站的 Google PageSpeed 分数：只需单击此处并输入您网站的 URL 并检查您的移动和桌面分数。 记录这些。
- 跳出率：看看您的跳出率是否有所提高，这表明在仅查看一个页面后离开网站的人数减少了。 您可以在许多地方查看它，例如行为 → 概览。
- 转化率：改进后访问者的转化率是否更高？ 跟踪很重要！ 前往转化 → 目标 → 概览以查看和记录您当前的转化率。
在电子表格中记录您的进度，并确保通过为每次更新创建注释来在 Google Analytics 中记录网站的更改。
2. 完成 8 个步骤
开始审核的最佳起点是 Google 的 PageSpeed Insights 工具提供的建议。 如果您还没有达到 100/100，您会看到来自 Google 的一些关于从哪里开始的提示。
正如我所提到的，通过我们强调的 8 个步骤来提高网站速度需要一些时间和坚持。
Yoast 的 SEO 专家 Meike Hendriks 指出，
“加速您的网站并不难。很多网站的图像太大，可以轻松优化。此外，拥有来自世界各地的访问者的网站绝对应该使用 CDN 来确保图像作为每个人都尽可能快！在 .htaccess 文件中添加一些代码行，可以轻松加快您的网站速度。例如，您可以为较小的文件启用浏览器缓存和 gzip 压缩，这些文件可以更快地加载到访问者的计算机上。”
你必须设定一些现实的目标和期望。 当您拥有像我们 Vendasta 和 Hubspot 那样包含大量（很棒！）内容的大型多方面网站时，将需要更多时间才能实现与页面较少的小型灵活网站相同的目标。
3. 需要时寻求帮助
嘿，我们不都是开发人员和设计师。 如果您的 DIY 开发工作破坏了您的网站或即将进行治疗，您可能需要寻求专家帮助。
我们都知道并羡慕技术奇才。 让他们为您做这件事！
Digitimatic 的 Pius Boachie 告诉我，全栈开发人员是帮助解决站点速度问题的关键：
“当谈到击败谷歌页面速度洞察工具时，开发人员通过保持代码清洁、优先考虑内容来完成繁重的工作。根据经验，在为客户设计时，我们设计速度，所以我们选择像 Duda 这样的网站建设者（快速产品）或建立在 CMS 上或从头开始（昂贵），与经验丰富的全栈开发人员一起投资良好的 CDN 和托管（非常重要）。”
您已经设置了基准指标，因此很容易跟踪您的进展和未来的成功。 如果您在多个站点上为客户工作，您将希望能够复制您的成功并停止任何不起作用的东西。
推荐阅读：无需开发人员：为什么需要白标网站生成器
4. 继续致力于提高网站速度
您可能会敲出一些容易实现的成果，例如图像优化、代码缩小和浏览器缓存，并立即看到一些不错的结果。 然而，要实现您的目标，您可能需要付出更持久的努力，逐步消除我强调的 8 种策略。
不要试图一次完成所有操作！ 为避免精疲力尽，请制定一个逐渐减少的计划，同时监控您的努力结果。
以下是如何利用网站速度来增加销售额
最后的想法
获得真实世界的网站速度改进总是比它在博客文章中出现的更混乱。 在此过程中，您将面临一些挑战，但请专注于结果，因为从长远来看，它们将改善用户体验、SEO 和转化率。
这才是最重要的； 为在线浏览的快速未来做准备。
如果您需要帮助，请致电您的技术朋友或告诉我们如何提供帮助！
如果您有任何经验或建议要分享，请随时在这篇文章的评论部分发表意见......