如何优化页面加载时间并改善您的 SEO？

我们生活在一个极度缺乏耐心的世界中。 几年前，快速提供优质内容是一项令人羡慕的成就。 今天，它是任何企业的基本要求。

您让人们等待访问您的网站的时间越长，他们反弹的可能性就越大。 缓慢的网站是一个需要立即关注的严重问题。

为什么？

假设您有 3% 的转化率。 每 100 次点击，您将获得三个潜在客户。 现在，如果所有这三个都因为您的登录页面在恐龙年代加载而反弹怎么办？ 想象一下对您的底线的影响。

在这篇文章中，我们将向您展示如何避免这种情况。 优化页面加载时间有 5 个步骤。

第一步：找到您当前的页面加载速度。

Google PageSpeed Insights 和 GTMetrix 是计算页面速度的有用工具。 两者都列出了阻碍速度的因素。 但是，GTMetrix 会告诉您页面加载需要多少秒。

在 GTMetrix 中插入您的域 URL，让该工具运行它的魔力。

几秒钟后，它将填充数字并为您分配成绩。

它还将映射页面的每个元素加载的时间。 例如，根据上图，加载 FCP 或 First Colorful Paint 需要 5.5 秒。 总页面加载时间是懒惰的 7.3 秒！

该工具还列出了提高页面加载速度的建议列表……

……还有一些提示：

下一节将详细介绍如何在 GTMetrix 上获得更快的速度分数。

第二步：优化您的网站以提高页面加载速度。

SEO图像优化技巧

如何减小图像尺寸？

每个网站都是根据请求从服务器加载的文件。 您希望文件大小最小以促进快速加载。

图像通常很大！ 他们需要大量的时间来加载。

但如果使用得当，它们会增加巨大的价值。 例如，GTMetrix 的图像帮助我更好地表达了我的观点，同时给你一个参考。

我们不应该消除图像，但我们可以优化它们的使用。 这是减小图像大小的 4 种方法。

• 图像压缩
• 裁剪图像
• 调整图像大小

图像压缩

使您使用的图像尺寸更小。 这种文件大小减小的过程称为图像压缩。 图像是一堆层； 每一层都增加了一种味道。 压缩通过删除锐化图像的图层来减小页面大小。

这确实会影响图像质量，但它不仅可以通过赢得 SEO 积分来弥补。

首先将图像保存为 JPG 格式，因为它们占用的磁盘空间更少。 一些博客推荐 JPEG2000 或 WEBP，但我的主题在这种格式下存在渲染问题。 通常，JPG 效果很好。

从这里开始，有两种方法可以实现更多压缩。

1. 在线压缩图像

继续 compressjpeg 并上传您的 JPG 图像。 该工具会压缩您的图像并告诉它被压缩了多少。 下载压缩图像并将其用于您的网页。

2. 使用插件压缩图像

我不是使用插件的忠实粉丝。 当然，如果您不会编码，它们会使工作变得容易。 但它们阻碍了您网站的现有代码。 但是，这是一个值得考虑的选择。

有大量插件可以帮助您压缩图像； 你被宠坏了。 无论如何，在使用任何插件之前，请检查“与您的 WordPress 版本兼容”复选标记。

在有损/无损压缩之间进行选择

压缩可以是有损/无损的。 它说明了您压缩图像的程度。

我对大量文本的图像使用无损压缩。 有损图像文本往往太模糊而无法阅读。 我对其他所有内容都使用无损压缩。

试验哪一种最适合你。

裁剪图像

这似乎是减小图像大小的一种明显方法——实际上是在减小图像大小——但许多人倾向于忽略它。

记下适用于您的博客的图像尺寸。 主图和特色图尺寸必须一致。 但是，可以裁剪支持的视觉效果以显示必要的内容。

例如，这篇文章中的屏幕截图都没有多余的视觉效果。 没有地址栏或页脚。 每个像素都会增加页面加载时间。 删除不必要的。

在 MS Paint 上调整图像大小

这种听上去很明显的方法隐藏在明显的视线中。

1. 在 MS Paint 中打开您的图像。 您将看到调整大小的选项。
2. 设置您的调整大小百分比，现在您有一个尺寸和大小要小得多的版本。 它可以节省文件大小的负载！

延迟加载图像

您所有的网站数据都存储在数据中心，并在需要时检索； 图像没有什么不同。 延迟加载技术将检索过程延迟到访问者滚动到视觉对象的时间。

只有这样，系统才能获得为所述图像提供服务所需的资源。 这种技术通过排队元素仅在需要时加载来减少系统的初始负载。

这不仅节省了初始加载时间，还节省了带宽。

在此页面上尝试一下：向下滚动并查看图像在您到达时如何加载，而不是之前。

如何在您的网站上实施延迟加载？

a3 延迟加载插件可以帮助您快速实现延迟加载。

选择 apt 字体。

字体通常属于设计范围； 它很少被视为性能因素。

但它会影响页面大小。 前面讨论的 GTMetrix 的报告显示，Font 在图像之后占据了最大的尺寸。

为了获得快速的加载速度，您必须选择加载速度快的字体。

我在我的网站上使用 Open Sans，因为我不需要为我的业务类别花哨。 如果您拥有一家创意企业，您可能希望为美观方面牺牲一点页面速度。 此外，如果您想要一种有助于您的品牌形象的时尚字体，那就去吧。 品牌 >> 页面速度。

夯实代码

JavaScript（JS）和级联样式表（CSS）是支持您看到的每个网页的代码片段。 两者都会以两种方式影响页面加载速度——它们会增加页面大小并向服务器发出一组需要时间来处理的请求。

但是他们需要为您的网站添加一些风格和魅力。 例如，请注意下面我的订阅框——当你向下滚动到它时它会点头。 如果您错过了效果，请重新加载此页面并重试。

效果会吸引注意力，但如果过度使用，就会分散注意力。

样式和页面速度之间存在折衷。 不要消除页面速度的样式。 但是，优化代码将提高您的页面加载速度。

我就是这样做的：

缩小 JS/CSS

缩小消除了不必要的代码块，减小了文件大小。 这使浏览器能够更快地下载和执行代码，从而节省带宽。

利用缓存

缓存是保存网站副本的存储单元，无需在每次调用时加载。 使用缓存，第一次加载后，您的网站将在再次调用时加载得更快。

我使用LiteSpeed Cache插件来缩小代码和缓存。

第三步：考虑更换您的网络托管服务提供商。

空气动力学跑车会在煤油上运行吗？ 没有。

同样，如果服务器仅在下一个冰河时代响应，则优化良好的网站将具有较慢的页面加载速度。

我犹豫要不要做出改变，主要是因为不确定性。 但是我做了一些研究并最终选择了Hostinger，我并不后悔。

许多其他网络主机为您完成这项工作。 根据您的预算和位置确定适合您的方法。

这是更改 WebHost 的完整指南。

第四步：使用内容分发网络 (CDN)。

地理距离对页面速度的影响很大。 访问者离您的网站托管地越远，页面加载时间就越长。

CDN 是位于全球多个数据中心的全球服务器的集合。 它使访问者能够连接到地理上更近的服务器而不是家庭服务器。 它通过利用不同网络之间交换点的服务器来实现这一点。

缩短的距离有助于更快地为您的网页提供服务。

我使用 Cloudflare CDN，它已经很长时间地达到了它的目的。

第五步（可选）：使用 Accelerated Mobile Pages (AMP) 提高移动页面加载速度

请记住，我们讨论过缩小代码。 HTML 是一种比 CSS/JS 更轻量的代码形式。 它不允许样式化，但 HTML 是服务器加载您的网站所需的基本代码。

AMP 页面是您网页的 HTML 形式。 这些是主要用于移动设备的第二版页面。 它们的代码被精简到最低限度，因此页面在几分之一秒内加载。

使用 AMP 意味着从您的页面中消除样式。 但是，它们对新闻页面和博客有益。 我简单地使用了它们，但又重新决定，因为前三个步骤即使对于我的移动页面速度也足够了。

我写了一份关于决定是否要实施 AMP 的详细指南。

结果

上述步骤为我的页面加载速度带来了奇迹。 回到 GTMetrix，这就是我今天的网站所在的位置。

它在 1.2 秒内加载。 大约增加了 6 倍。

但是，证据就在布丁中。 尝试一下，并在评论中告诉我它是如何进行的。