如何提升页面加载速度以增加流量和转化率

• 访客在您的网站上停留的时间。
• 其中有多少人会转化为付费客户？
• 付费搜索中，每次点击费用是多少？
• 您在自然搜索结果中的排名。

遗憾的是，大多数网站的页面加载速度都很慢，这会对其收入产生直接的负面影响。

作为数字营销人员，我们每天可以做的事情几乎无穷无尽，但时间永远不够用。因此，有些事情只能被搁置。

页面速度优化似乎总是最常被搁置的事情之一。这很容易理解，因为大多数人并没有真正理解这个经常被忽视的细节的重要性，所以他们看不到投入时间和金钱去提升几秒钟甚至更少速度的价值。

对于一些营销人员来说，这似乎只是微不足道的时间，包括那些只专注于搜索引擎优化的营销人员，但从行业巨头到我们自己的分析数据都证明，这时间意义重大。

我猜你和我一样，都想最大限度地提高业绩，当然也包括收入，对吧？那么，让我们开始吧，让你的网站运行速度快如闪电！（这个比喻很形象，不是吗？）

1. 放弃廉价虚拟主机

如今我们都在努力省钱，毕竟，订阅 Raven、SEMrush、Moz 以及其他我们每天使用的工具，费用加起来可不便宜。这简直就像多养了个孩子一样。

很多人省钱的方法之一是选择价格低廉的共享汽车。 托管 这种方法把尽可能多的网站塞进服务器，就像一群小丑挤进一辆车里一样。性能什么的根本不重要！

当然，你的网站大部分时间都能访问，就像使用大多数网络主机一样，但是加载速度会非常慢，以至于你的访客会沮丧地离开，而不会转化为买家。

“但这几乎看不出来！”这些精打细算的购物者坚持说。

关键是——你可能几乎不会注意到这一点，因为这是你的孩子，你很爱它。

但其他人只想尽快访问和离开你的网站。

用户希望在你的网站上停留足够长的时间来完成他们的目的，无论是寻找答案、购买产品还是其他特定目标。如果你让他们停留的时间哪怕只有一点点，他们都很可能会感到不满，最终放弃购买而离开。

像这样思考：

大多数人都会无条件地爱自己的孩子。但如果别人的孩子尖叫、乱扔东西、扰乱他们在餐厅的用餐时光呢？他们就会讨厌那个孩子。你的网站也是如此。

这究竟有多大区别？

根据进行的一项研究 Amazon仅仅 100 毫秒的差异——这是人类甚至无法感知的时间单位——就足以使他们的销售额下降 1%。 沃尔玛 研究结果相似。

如果短短一秒钟就能对销售额产生如此大的直接影响，那么你认为多一秒钟或更长时间会产生什么样的影响？

但这还不是全部，因为网站加载速度快慢也会影响自然搜索排名和点击付费广告的成本。

换句话说，如果你的网站加载速度慢，那么那些在这个关键领域投入巨资的竞争对手就会抢占你的市场份额。

总之：别选低价虚拟主机。如果他们把主机当成商品来卖（主要靠价格），那他们也会把客户当成商品来对待。

有很多网络主机针对速度进行了优化，特别是针对 WordPress 网站，其中一些的价格与经济型主机类似。

所以，不妨四处打听一下，做一些测试，然后投资一个能够提供足够性能的网络主机，以满足访客和谷歌的需求。

2. 减少HTTP调用

网页渲染和运行所需的每个文件，例如 HTML、CSS、JavaScript、图像和字体，都需要单独的 HTTP 请求。请求越多，页面加载速度就越慢。

如果你和大多数我接触过的人一样，你可能会想：“哦，杰里米，我不用担心这个。我知道自己在做什么，我的网站上不会添加一堆冗余的垃圾内容！”

这或许有一定道理。你可能不会在网站上添加大量冗余的垃圾内容，但我遇到的90%以上的网站——这些东西仍然存在。

页面臃肿并非“臃肿仙子”趁你睡觉时偷偷塞进去的，而是因为大多数网页设计师，无论技术水平或经验如何，都没有把页面速度放在首位。可悲的是，他们中的大多数人甚至不知道该如何优化页面速度。

问题就出在这里：

大多数主题会加载一个或多个 CSS 文件和几个 JavaScript 文件。有些文件，例如 jQuery 或 FontAwesome，通常是从其他服务器远程加载的，这会显著增加页面加载时间。

如果考虑到插件添加的额外 CSS 和 JavaScript 文件，问题就变得更加严重了。仅仅 CSS 和 JavaScript 文件就很容易产生六个甚至更多的 HTTP 请求。

如果把页面上的所有图片都考虑进去，每张图片都需要单独的 HTTP 请求，很快就会变得难以控制。

• 将多个 JavaScript 文件合并成一个文件。
• 将多个 CSS 文件合并成一个文件。
• 减少或移除那些加载自身 JavaScript 和/或 CSS 文件的插件。在某些情况下，例如 Gravity Forms，您可以选择禁用它们的加载。
• 常用图像请使用精灵图。
• 尽可能使用 FontAwesome 或 Ionic Icons 等字体而不是图像文件，因为这样只需要加载一个文件。

3. 添加尾部斜杠

无论是来自外部来源（链接建设工作）还是来自您自己的网站，如果指向您网站的链接省略末尾的斜杠，都会对速度产生不利影响。

就是这样：

当您访问一个不带尾部斜杠的 URL 时，Web 服务器会查找同名文件。如果找不到，它会将该 URL 视为目录，并在该目录中查找默认文件。

换句话说，省略末尾的斜杠会强制服务器执行不必要的 301 重定向。虽然对你来说可能感觉是瞬间完成的，但实际上会稍微慢一些，而且正如我们之前提到的，积少成多，时间就是金钱。

https://example.com (this is bad)

or

https://example.com/services (this is also bad)

与

https://example.com/ (this is good)

or

https://example.com/services/ (this is also good)

4.启用压缩

启用 GZIP 压缩可以显著减少下载 HTML、CSS、JavaScript 文件所需的时间，因为它们会以更小的压缩文件形式下载，然后在到达浏览器后进行解压缩。

不用担心——您的访客无需做任何额外操作，因为所有现代浏览器都支持 GZIP，并且会自动处理所有 HTTP 请求。

5.启用浏览器缓存

启用浏览器缓存后，网页元素会存储在访问者的浏览器中，这样下次他们访问您的网站或访问其他页面时，他们的浏览器就可以加载页面，而无需向服务器发送任何缓存元素的 HTTP 请求。

第一个页面加载完毕并将其元素存储在用户缓存中后，后续页面只需下载新元素即可。这可以大幅减少典型浏览会话期间需要下载的文件数量。

6.尽量减少资源

压缩 CSS 和 JavaScript 文件可以删除不必要的空格和注释，从而减小文件大小，并缩短下载时间。

幸运的是，这并不一定需要手动操作，因为网上有很多工具可以将文件转换为更小的压缩版本。

此外，还有一些 WordPress 插件可以将网站头部中指向常规 CSS 和 JavaScript 文件的链接替换为它们的压缩版本，而不会修改原始文件，其中包括一些流行的缓存插件，例如：

• W3总缓存
• 可湿性粉剂超高速缓存
• WP Rocket

可能需要花些功夫才能把设置调整到最佳状态，因为压缩经常会破坏 CSS 和 JavaScript，所以一旦压缩了所有内容，一定要彻底测试你的网站。

7.优先处理首屏内容

如果您的网站代码优先显示首屏内容（即访客滚动页面之前可见的内容），那么访客会感觉您的网站加载速度更快。

这意味着要确保出现在首屏的任何元素也尽可能靠近 HTML 代码的开头，以便浏览器可以首先下载并渲染它们。

此外，务必将渲染该区域所需的任何 CSS 和 JavaScript 代码以内联方式包含，而不是放在外部 CSS 文件中。

8. 优化媒体文件

由于配备高质量摄像头的移动设备很普遍，而且像 WordPress 这样的现代内容管理系统上传图片也很方便，许多人只是拍了一张照片就上传，却没有意识到，通常情况下，图片的大小至少是实际需要的四倍。

这会显著降低网站速度——尤其是对于移动用户而言。

优化网站上的媒体文件可以极大地提高页面加载速度，而且操作起来相对容易，因此这是一项值得投入时间的好方法。

优化图像

• 选择合适的格式。JPG 格式非常适合照片图像，而 GIF 或 PNG 格式则最适合大面积纯色图像。8 位 PNG 文件适用于没有 Alpha 通道（透明背景）的图像，而 24 位 PNG 文件适用于带有 Alpha 通道的图像。
• 确保图片尺寸合适。如果图片在网站上的显示宽度为 800 像素，那么使用 1600 像素宽的图片没有任何意义。
• 压缩图像文件。Adobe Photoshop 不仅是顶级的图像编辑程序，还拥有强大的图像压缩功能，起价为每月 9.99 美元。您也可以使用免费的 WordPress 插件，例如： WWW图像优化器, Imsanity还有 TinyJPG——它可以自动压缩上传的图片。

视频优化

• 选择理想的格式。大多数情况下，MP4 是最佳选择，因为它生成的文件最小。
• 根据访客的屏幕尺寸提供最佳尺寸（规格）。
• 如果视频用作背景设计元素，则应移除音轨。
• 压缩视频文件。我通常使用 Adob​​e Premiere，但 Camtasia 也是个不错的选择。
• 缩短视频时长。
• 考虑将视频上传到 YouTube 或 Vimeo，而不是在本地播放，并使用它们的 iframe 嵌入代码。

但你不应该就此止步，因为这只是冰山一角。

要真正优化网站上的媒体，你需要根据屏幕尺寸提供合适尺寸的图片，而不是简单地调整图片大小。

根据图像的实现方式，有两种处理方法。

• 网站的 HTML 中的图像可以通过设置 src 属性来提供，这样浏览器就可以根据访问者所用设备的屏幕尺寸选择、下载和显示相应的图像。
• 通过 CSS 放置的图像（通常作为背景图像）可以使用媒体查询来根据访问者所用设备的屏幕尺寸选择合适的图像。

9. 利用缓存和 CDN

缓存使您的网站服务器能够存储网页的静态副本，以便更快地将网页内容传递给访问者的浏览器；而内容分发网络 (CDN) 则允许将这些副本分发到世界各地的服务器，以便访问者的浏览器可以从离其位置最近的服务器下载网页。这可以显著提高页面加载速度。

___
by 杰里米·纳夫
来源： SEJ