9个最佳实践,告诉你如何优化网站页面速度_知乎_

作为数字营销人员，我们每天可以做的事情几乎是无穷无尽的，所以可能没有足够的时间去做这些事情。结果，有些事情被推到次要位置。

最常被推迟的事情之一就是优化网站页面速度。这很容易理解，因为大多数网站开发人员并没有真正理解这个经常被忽视的细节的重要性，所以他们没有看到投资时间和金钱在优化页面速度的价值。

页面速度是当今数字营销的一个关键因素。它对下面这些因素都会产生极大的影响：

访客停留在你的网站上多久。他们中有多少人转换成客户。在付费搜索中，你在 PPC 基础上支付多少钱。在有机搜索中的排名。

不过，大多数网站在页面速度方面表现不佳。这对他们的转换有直接的负面影响。

对于一些营销人员来说，这似乎是一个无关紧要的时间，包括那些只专注于搜索引擎优化的人，但页面速度优化已经被证明是具有里程碑意义的，不管是从行业巨头的数据还是我们自己的分析数据得出。

我假设你和我一样想要最大化你的转换。那么，跟随这 9 个页面速度优化最佳实践，让你的网站加载速度更快。

1.　不要省去网络主机的预算

我们现在都在努力省钱。很多人想要省钱的方法是选择一种便宜的共享主机，它是可以容纳很多网站，因为它们可以安装在一个服务器上，但这就像一群人挤在一辆车里一样，它的性能是糟糕至极的！

当然，你的网站大部分时间都可以和大多数网络主机一样使用，但它的加载速度会因此变得非常缓慢，可能会导致你的部分访客没有转换为客户，我想你也会因此感到失望。

也许原因在于你可能很难注意到页面速度这一细节，因为它是你花了很多时间、精力以及金钱搭建起来的，你会满意于最终呈现的网站效果。但访问者只在意是否能够尽可能快地访问你的网站。

人们想要在你的网站上停留足够长的时间来做他们想做的事情，无论是得到解决方案，购买产品，还是其他一些特定的目标。如果他们的访问速度受到影响，他们很可能会讨厌你的网站给他们带来的体验，或选择离开，或放弃转换。

根据一项研究数据显示，网站加载速度仅仅 100 毫秒的差别就足以使他们的销售额下降 1%。

如果这么小单位的时间对销售都会产生很大的直接影响，你认为要是有额外的第二个或更多的影响会有什么后果？不言而喻，这会产生更大的连锁反应。

但它并不局限于此，因为你的网站加载速度缓慢也会对有机搜索排名和点击付费的成本产生影响。换句话说，如果你的网站加载缓慢，你会是在间接地帮助你的竞争对手在这个关键区域分食你的利益。

因此，你不应该省去网络主机的预算。有很多网络主机都是为了速度而优化的，问问周围的人，做一些测试，然后投资一个性能强大的网络主机，满足访问者和搜索引擎的需要。

2.　减少 HTTP 请求的次数

网页的每个文件都需要被呈现以及运行，如 HTML、CSS、JavaScript、图像和字体都需要单独的 HTTP 请求。请求越多，页面加载就越慢。

你可能不会在你的网站上添加一堆“臃肿”的内容，但对于我遇到的 90% 的网站来说，它仍然存在这样的情况。

这是因为大多数网页设计师，不管他们的技术多强大或经验多丰富，都不会优先考虑页面速度。更有甚者，大多数人甚至不知道如何去做。

这就解释问题的起因：

大多数网站加载一个或多个 CSS 文件，以及几个 JavaScript 文件。一些，比如 Jquery 或 FontAwesome，通常从另一台服务器上远程加载，这极大地增加了加载页面的时间。

当你考虑添加的附加 CSS 和 JavaScript 文件的插件时，这将变得更加困难。仅从 CSS 和 JavaScript 文件就可能很容易地得到增加更多的 HTTP 请求。

当你在一个页面上考虑所有的图片时，每个页面都需要一个单独的 HTTP 请求，它很快就会失控。

将 JavaScript 文件合并到一个文件中。将 CSS 文件合并到一个文件中。减少或消除加载他们自己的 JavaScript / CSS 文件的插件。在某些情况下，如一些表单插件，你可以选择禁用它们。对经常使用图像使用 CSS 精灵。使用像 FontAwesome 或 Ionic 图标这样的字体而不是图像文件，因为只有一个文件需要加载。3.　包括尾部的斜杠（／）

忽略指向你的网站的链接，无论是站外来源（链接建设的努力）还是在你自己的网站内部链接，都有对加载速度的不利影响。

原因如下：

当你访问一个没有末尾斜杠（／）的 URL 时，web 服务器将查找具有该名称的文件。如果没有找到具有该名称的文件，它将把它当作一个目录，并在该目录中查找默认文件。

换句话说，通过省略末尾的斜杠，你将强制服务器执行不必要的 301 重定向。虽然它可能看起来是即时的，但它确实需要稍长一点的时间，而且我们已经建立了，每一点都需要再次添加。

例如：（这是有影响的）

或

/services（这也是有影响的）

或

/（这很好）

或

/services/（这也是好的）

4.　启用压缩

启用 GZIP 压缩可以极大地减少下载 HTML、CSS 和 JavaScript 文件所需的时间，因为它们下载的压缩文件要小得多，一旦它们到达浏览器就会被解压。

不要担心，因为所有的现代浏览器都支持 GZIP，并且已经对所有的 HTTP 请求进行了自动处理，所以访客不必再做任何额外的事情。

5.　启用浏览器缓存

启用浏览器缓存后，一个网页的元素存储在你的访客的浏览器上，所以下次他们访问你的网站，或者访问另一个页面时，浏览器可以直接加载页面，而不必将另一个 HTTP 请求发送到服务器，以加载需要的缓存元素。

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

6.　缩小资源

缩小你的 CSS 和 JavaScript 文件，删除不必要的留白和注释，以减少文件大小，这样会帮助减少下载它们所需的时间。

这并不需要手动操作，因为有一些工具可以在线将文件转换成较小的、缩小版的文件。还有一些插件可以在你的网站上替换你的网站上的链接，你的常规 CSS 和 JavaScript 文件可以不修改你的原始文件。

这样做可能需要花费一些精力，因为缩小文件经常会破坏 CSS 和 JavaScript，所以一旦你缩小了所有的内容，一定要彻底测试你的网站。

7.　优先考虑内容

如果你的网站被编码成优先级以上的内容 —— 换句话说，在访问者滚动之前可以看到的内容，你的网站就会出现在访问者面前。

这意味着确保出现在折叠上方的任何元素都与 HTML 代码的开头差不多，这样浏览器就可以下载并呈现它们。

还需要包含任何 CSS 和 JavaScript，以内联方式呈现该区域，而不是在外部 CSS 文件中。

8.　优化媒体文件

因为带有高质量相机的移动设备是常见的，而现代的内容管理系统，可以方便上传图像，很多人只是简单地拍了一张照片，然后上传，却没有意识到，图像通常比必要的要大 4 倍。这大大降低了你的网站加载速度，特别是对于移动用户。

在你的网站上优化媒体文件有可能极大地提高你的页面速度，而且这样做相对容易，所以这是一个很好的时间投资。

1）优化图片

选择理想的格式。JPG 是完美的摄影图像，而 GIF 或 PNG 最好的图像有大面积的纯色。8 位 PNG 文件是用于没有 alpha 通道（透明背景）和 24 位文件的图像，它们是带有 alpha 通道的图像。确保图像尺寸正确。如果你的网站上只支持 800 像素的图片，那么使用 1600 像素的图片是没有任何好处的。压缩图像文件。

2）优化视频

选择理想的格式。MP4 在大多数情况下是最好的，因为它产生最小的文件大小。根据访问者的屏幕尺寸提供最佳尺寸。如果在背景中使用视频作为设计元素，记得取消自动播放功能。压缩的视频文件。我大部分时间都在使用 Adobe Premiere，但 Camtasia 也是一个可靠的选择。减少视频长度。考虑将视频上传至优酷土豆或腾讯视频，而不是在本地使用它们，并使用它们的 iframe 嵌入代码。

为了真正优化你的网站上的媒体，你需要根据屏幕尺寸提供合适大小的图片，而不是简单地调整大小。基于映像的实现，有两种方法可以处理此问题。

在你的网站的 html 中可以使用 src 设置，它允许浏览器选择，下载，并根据访问者使用的设备的屏幕大小显示适当的图像。通过 CSS 放置的图像 —— 通常作为背景图像，可以使用媒体查询来选择合适的图像，基于访问者正在使用的设备的屏幕大小。9.　利用缓存和 CDN

缓存使你的 web 服务器来存储你的网页的静态副本，这样他们可以更快地交付到访问者的浏览器。而 CDN 允许将这些副本分发到世界各地的服务器，以便访问者的浏览器从最接近他们的位置的服务器下载内容。这大大提高了页面加载速度。