9个最佳实践，告诉你如何优化网站页面速度

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

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

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

这就解释问题的起因：

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

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

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

3.包括尾部的斜杠（／）

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

原因如下：

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

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

例如：（这是有影响的）

或

（这也是有影响的）

或

（这很好）

或

（这也是好的）

4.启用压缩

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

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

5.启用浏览器缓存

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

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

6.缩小资源

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

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

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

7.优先考虑内容

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

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

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

8.优化媒体文件

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

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

1）优化图片

2）优化视频

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

9.利用缓存和 CDN

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