如何通过简单的网站优化加快页面加载时间

已发表: 2022-07-02

页面速度可以决定您在互联网上的成败。

更快的页面加载通常意味着您的网站速度总体上会获得更好的结果。网站成功的每个方面都与页面速度相关，从 SEO 到转化，再到用户体验等等。

从您选择的托管服务提供商到您决定使用的应用程序，有很多领域可以优化。有这么多需要考虑的领域，提高页面速度可能是一个复杂的过程。学习如何以易于实施的方式优化网页加载时间对于成功至关重要。

那么，你能做些什么来确保你得到优化呢？让我们看看一些使您的网页更快的方法，如何加快页面加载时间，以及页面加载时间和提高速度的其他最佳实践。

为什么页面加载时间很重要

在讨论如何加快页面加载时间之前，让我们先了解一下为什么它如此重要。

谷歌在 2010 年首次宣布网站速度将影响排名，并继续证明其重要性。 2018 年，谷歌将页面速度作为移动网站速度的排名因素。

搜索引擎优化专家很快开始尝试优化页面元素并削减搜索引擎。那些没有落后的。而现在，随着最近公布的核心网络生命体征，速度比以往任何时候都更加重要。

想了解更多关于如何提高页面加载速度的信息？以下是一些需要考虑的关键领域。

页面速度意义

页面加载时间一直很重要，原因很明显：转化。简而言之，快速网站会增加转化率，而慢速网站会降低转化率。

事实上，谷歌在 2020 年的一项研究中发现，移动网站速度每提高 0.1 秒，零售企业的转化率就会提高 8.4%。

网站速度也会影响您的跳出率。当用户遇到一个缓慢的网站时，他们就会离开。 Akamal Technologies 的一份报告发现，页面加载时间延迟两秒可能会使网站的跳出率增加 103%。

测试您的页面加载时间

要获取您网站的快照并在优化过程之前和之后创建基准，您要做的第一件事就是测试您当前的页面速度。您可以开始使用的几个工具是 Google 的 Page Speed Insights 和 Webpagetest.org。

确保运行多个测试并平均您的结果。网页测试允许您在设置菜单中自动执行此操作。选择一个靠近您的网站托管位置的测试位置始终是明智的，以确保您获得最准确的结果。

这就是我们通常设置webpagetest.org 进行基本速度检查的方式。

您可以在下面看到 Magento 演示网站上页面速度测试的平均结果。我们挑选了三个我们想用来优化网站的最重要和最重要的统计数据。

加载时间	第一个字节的时间	字节输入
2.264s	0.318s	927 KB

第一个统计数据是加载时间。这向我们展示了加载页面所需的完整时间。请记住，如果页面加载时间超过三秒钟，您可能会失去一半的潜在流量。这个数字对我们来说是最重要的改变。

第二个统计数据是第一个字节的时间 (TTFB)。虽然它可以帮助提供指导，但 TTFB 可以相对容易地操作，并且其重要性可能会有所不同。如果您使用 Google Lighthouse，您还可以跟踪 First Contentful Paint 和 First Meaningful Paint，它们会报告您的页面使用内容元素“绘制”屏幕的速度。

曾经加载过一个食谱，但其中一半没有赶上你滚动的速度，因为你试图绕过所有的广告和叙述？那是因为它的 FCP/FMP 时间很慢。

第三个统计数据是下载到页面的信息的大小。如果这个数字非常大，那么仔细查看不同的页面元素需要多长时间可能会很有用。

页面速度瀑布

如果您想了解如何加快页面加载时间，请找出哪些元素会降低页面速度并查看瀑布图。下面可以看到瀑布的外观示例。

看过瀑布后，您应该对可以改进的地方有一个更好的了解。上面，我们可以看到一些前端 .js 文件可能会稍微加快。

在瀑布下方（页面外），还有一些图像文件需要更长时间才能加载，应该进行优化。当您的重点是更快的页面加载时间时，了解哪些元素导致页面滞后是关键。

如何通过 Web 内容加快页面加载时间

压缩和优化图像

在查看如何加快页面加载时间时，图像压缩是一个很好的起点。网页设计师经常制作采用无用高分辨率的图像。高分辨率图像会占用服务器上更多的存储空间，并且会显着增加加载时间。

我们强烈建议适当地缩放图像。如果图像在您的站点上仅占用 100 x 100 像素空间，则无需将其设置为 1000 x 1000。如果您正在运行 WordPress 站点，我们建议使用 Smush 或 EWWW Image Optimizer 之类的插件。

如何在 WordPress 上转换为 WebP 图片 >>

图像类型扩展

保存图像时，知道使用哪个扩展很重要。应该是 .jpg 还是 .png？有人向您发送了 .svg 中的徽标吗？关于什么是最好的，有很多相互矛盾的信息。

许多人说 .png（便携式网络图形）是更好的选择，因为它旨在尽可能压缩图像而不会降低质量。这是部分正确的。话虽如此，该规则也有例外。例如，.JPEG 文件在使用照片时实际上效果更好。

我们的建议是检查以几种不同方式保存文件如何影响页面预览时显示的大小和质量。如果您注意到明显的差异，请选择更好的扩展。

压缩网站内容

图像不是唯一需要挤压的页面元素。您还应该压缩网站上的 CSS、HTML 和 JavaScript 元素。 GZip 是一种强烈推荐的压缩工具，Google 建议在生产环境中实施之前对其进行测试。如果您打算这样做，我们建议您使用模拟您自己的生产环境的 Dev Site 环境。

压缩站点内容的问题在于，有一些证据表明它可以略微增加 Time To First Byte 持续时间。然而，它也显着增加了整体页面速度加载时间，一些 SEO 专家建议谷歌实际上可能会优先考虑这一点。我们建议在单个页面上测试压缩，而不是在站点范围内进行切换。

简化网页设计

如果你想要更快的页面加载时间，少即是多。与其向核心页面添加额外的功能，不如选择更简单、更快捷的东西怎么样？一个页面的 HTTP 请求越少，它通常加载的速度就越快。

除了提高页面速度之外，在许多情况下，简单的网页设计也被证明可以改善用户体验。在 Google 进行的一项 UX 研究中，发现用户倾向于在 1/50 到 1/20 秒内判断网站的美感，而且视觉复杂的网站几乎总是被认为不如简单的网站美观。

一个网站被认为越漂亮，用户体验和搜索引擎优化就会越好，转化次数也会增加。更简单的网站设计是在短时间内提高页面速度的最快方法之一。但是，我们建议运行 A/B 测试以了解更改的实际执行情况，而不是立即进行 100% 的更改。

如何通过您的主机加快页面加载时间

您的主机在页面加载时间中也起着重要作用。这里有一些方法可以让您的主机更快地加载页面。

启用缓存

缓存是重复访问者能够更快地加载您的网站的地方，这要归功于页面元素存储在他们的硬盘驱动器上的缓存或临时存储中。对于 WordPress 和 WooCommerce 网站，我们使用 Redis 对象缓存来管理缓存功能。当您通过 Nexcess 购买 WordPress 优化的托管计划时，这将预先安装和配置。

为了进一步优化页面速度，Nexcess Cloud 允许使用云加速器。只需单击客户端性能部分下的按钮，即可轻松打开和关闭此功能。

不确定是否应该打开 Varnish 或 NGINX？在我们的优化 Magento 2 权威指南中了解有关 Varnish 和 NGINX 之间区别的更多信息。

缓存和 CDN

使用 CDN（内容交付网络）进行缓存是一个更复杂的过程，可能需要高级设置。但是，使用 CDN 进行适当的缓存配置可以帮助您接触到全球受众，就像您使用本地主机一样。

为什么需要 WordPress CDN >>

对于 WordPress 和 WooCommerce，请查看我们的指南，了解如何使用 WordPress 和 CDN Enabler 配置 Nexcess CDN。

其他需要考虑的领域

你在优化什么页面？

在优化方面，您的网站结构会产生巨大的影响。考虑您正在优化的页面以及它与整个网站结构的相关性很重要。如果您更新一个页面，则还应考虑与之交互的页面。

比如我们只优化 Nexcess.net 是没有用的，我们还需要优化 Nexcess.net/magento/hosting 和 Nexcess.net/cloud/hosting。

在开始此过程之前，请制定一个计划，以确定哪些关键页面吸引了最多的转化并吸引了最多的投资回报率。从这里开始以获得最大的影响。

页面速度和 SEO

虽然页面速度和搜索引擎优化是内在联系的，但不要误以为它不是确定页面排名的决定性因素。谷歌自己表示，如果内容更相关并且人们愿意等待它加载，他们不会惩罚那个网站。

最终，页面速度是优化的重要组成部分，但内容、质量和用户体验应该始终是主要关注点。

使用正确的主机加快加载时间

从等待图像逐行加载，我们已经走了很长一段路。页面速度不仅仅是消费者抱怨的问题——它还可以决定转化率、排名等等。尽你所能提高页面速度总是一个好主意。

如果您投入时间和精力来改善页面加载时间，那么您就是在保护您的数字业务。将您的汗水资产与明智的投资相匹配。下一步，选择一个经过验证的可扩展性、安全性、速度和支持的主机——比如 Nexcess。

Nexcess 提供完全托管的 WordPress 托管服务，包括：

自动更新。
SSL 以确保安全。
内置CDN。
图像压缩。
缓存。
和更多！

两周免费试用，亲自体验。

开始我的免费试用