页面速度和搜索引擎优化

什么是页面速度？

页面速度是加载网页所需的时间。页面的加载速度取决于几个不同的因素，包括站点的服务器、页面文件大小和图像压缩。

那说：

“Page Speed”并不像听起来那么简单。

那是因为有很多不同的方法可以测量页面速度。以下是最常见的三种：

完全加载的页面：这是加载页面上 100% 资源所需的时间。这是确定页面加载速度的最直接方法。

Time to First Byte：衡量页面开始加载过程所需的时间。

如果您曾经登陆一个页面并盯着白色屏幕几秒钟，那就是 TTFB 在起作用。

First Meaningful Paint/First Contextual Paint：页面加载足够的资源以使用户能够阅读该页面上的内容所花费的时间。

例如，假设您有一篇博文需要 10 秒才能完全加载。

那是很长的时间……如果你只看加载整个页面需要多长时间。

另一方面，关注 First Meaningful Paint 有时可以更好地代表用户在页面加载时与页面的实际交互方式。

例如，让我们再看一下加载所有页面资源需要 10 秒的页面。

尽管整个页面加载需要一段时间，但当用户首次登陆页面时，他们会在 1.5 秒后获得“First Meaningful Paint”。

这意味着他们几乎可以立即开始与您的页面进行交互。所以对于用户来说，你的页面很快。

有许多不同的方法可以测量页面速度。并且没有“正确”的指标可以击败所有其他指标。他们都有优点和缺点。

相反，专注于提高您找到的所有指标的页面加载速度。

为什么页面速度对 SEO 很重要？

自 2010 年以来， Google 一直将页面速度作为排名因素。

2018 年，谷歌通过“速度”更新提高了页面速度的重要性。

简而言之：

加载缓慢的网站会损害您的 Google 排名。

问题是：Google 如何确定您网站的加载速度？他们会查看 100% 的页面加载需要多长时间吗？还是TTFB？

他们还没有就此发表任何官方声明。但考虑到他们在PageSpeed Insights 工具中报告了所有这些指标，我知道他们可能使用了不同页面速度测量的组合：

有了这个，这里是提高网站加载速度的方法。

最佳实践

压缩图像

我把它放在第一位，因为它通常是最大的胜利。

毕竟，图像通常占页面大小的 50-90%。

（和加载速度）

例如，从我网站上的某个页面查看此页面速度报告：

如您所见，页面大小的 86.2% 是由于图片造成的：

因此，您可以压缩图像的次数越多，页面加载的速度就越快。

如何？

如果您的网站在 WordPress 上运行，那么我强烈推荐一个名为WP Smush的插件：

它会自动压缩您上传到 WordPress 媒体库的任何图像。至少根据插件的创建者的说法，这可以将您的图像文件大小减少 14.2%。

不使用 WordPress？仍然有很多图像压缩选项，例如Cesium 和Mass Image Compressor。

与过去不同，现在大多数压缩工具要么使用无损压缩，要么仅将图像质量降低到几乎察觉不到的程度。

例如，我们在 Backlinko 压缩了 100% 的图像。而且它们看起来仍然漂亮而锐利：

清理并压缩您的代码

换句话说：缩小页面上的资源。

这包括：

• HTML
• CSS
• JavaScript
• 以及在您的页面上找到的任何其他代码

您的第一步应该是清理页面上所有臃肿的代码。这些额外的代码可能来自您网站上不再拥有的功能。或者来自劣质的开发人员工作。

无论哪种方式：你的代码越干净，加载的速度就越快。

（是的，押韵🙂）

然后，使用GZip等程序压缩您的代码。

升级主机

这是一个我没有看到足够多的人谈论的技巧。

您可以整天清理代码和压缩图像。但是，如果您每月在托管上花费 4.99 美元，您的网站加载速度将不会很快。

那是因为您与一百万个其他网站共享服务器。

那里有一百万个网络主机。所以我不能特别推荐一个。

但我可以说，作为一般规则：在托管方面，一分钱一分货。

因此，如果您真的想提高网站的加载速度，可能是时候升级到高级主机或专用服务器了。

激活浏览器缓存

这允许用户将部分页面存储在他们的浏览器缓存中。

因此，下次他们访问您的网站时，加载速度会快得多。

不幸的是，这不会帮助您的页面为首次访问者更快地加载。但这对于提高以前访问过您网站的人的加载速度非常有用。

您可以在 .htaccess 文件中设置浏览器缓存。或者使用 WordPress 插件。

实施 CDN

内容分发网络 ( CDN ) 是提高站点加载速度的最简单方法之一。

CDN 的工作原理是确定访问者的物理位置……然后从靠近他们的服务器提供您网站的资源。

使用多个页面速度测试工具进行测试

现在您已经实施了这些步骤，是时候看看您的表现如何了。

我建议使用两种不同的工具测试您的页面速度。

第一个是Google PageSpeed Insights。

Google 的工具会扫描您页面的代码以查找问题……

……和机会。

他们最近添加了一项功能，可以报告您的网站加载给实际人类用户需要多长时间（使用 Google Chrome 浏览器数据）。

这非常有用。

一句警告：您有时会发现该工具的建议对您的站点没有意义。

例如，Google 的工具建议我“以下一代格式提供图像”。

但是，大多数浏览器（包括 Safari 和 Firefox）不支持这些“下一代”格式。因此，如果您切换到这些下一代格式，您网站的用户体验将会一去不复返。

也就是说：此工具中有大量有用的见解。我建议尽可能多地实施。

接下来，我们有WebPageTest.org。

WebPageTest 的出色之处在于它可以在实际浏览器中加载您的页面。它可以让您了解页面的特定部分需要很长时间才能加载。

了解更多

移动速度案例研究——推动更快的页面加载：3 个深入的案例研究，展示了提高速度如何转化为更高的排名和更多的自然流量。