WordPress如何加快网页加载时间的非技术指南

虽然您已经搭建了自己的网站,通过推广获得了流量,但是你没有获得预期的各种好处。所以导致网站的重复访问率可能较低,用户在网站上花费的时间并不表示兴趣或参与度。

一个可能的罪魁祸首可能是您的网站速度或加载时间。

您愿意等待页面加载多长时间?在什么时候你说“足够了”,关闭标签,然后点击其他地方?

根据研究,页面加载时间增加一秒与转换和销售损失相关,即7%,而访问网站的人员如果加载时间超过三秒则会放弃。

定义

在开始之前,我们将在本指南中使用一些关键术语。让我们先介绍一下。

  • 第一个字节的时间(TTFB):访问者从您的网站接收第一部分信息所需的时间。这通常会受到主机以及在发送任何信息之前必须运行的代码量(插件+主题)的影响。
  • 开始渲染/第一个可见:当您的网站内容首次开始对访问者可见时(文本通常是第一个,然后是图像)。
  • 加载时间:加载时间是指站点完全加载所需的时间,包括所有文本,图像,字体和脚本。
  • 请求:请求是您的站点调用和加载的文件数。这些可以是内部的(托管在与您的站点相同的服务器上),也可以是外部的(例如来自Google的字体文件)。通常,较少数量的这些是优选的。

在我们开始之前

在开始之前,我建议为您的网站提供一个起始基准,以便您可以衡量改进。这些工具还将为您提供针对特定领域的反馈,以便进行改进。我们今天将使用以下三种工具:

通过其中每个站点运行您的站点,并为结果添加书签。

我还强烈建议您备份您的网站或尽可能在测试服务器上工作。与任何网站一样,如果您不小心,可能会导致错误,并且当前备份总是让您高枕无忧。

缓慢站点的常见原因(及其修复)

优化/调整图像和视频大小

网站上最大的文件,因此加载速度最慢,是图像和视频。您可以使用一些简单的提示来帮助您在处理图片时加快网站速度。

  • 调整图像大小。查看您的网站,了解您如何使用每张图片。您的徽标只是占据了网站的一个小角落吗?那你就不需要这么大的分辨率了。在任何照片编辑软件中打开照片,并调整为更合适的尺寸。这可以显着减少页面的加载时间。
  • 压缩和优化您的图像和视频。调整图像大小后,您可以优化它们而不会降低任何质量。有几个免费网站可以逐个图像优化图像,例如compress.io

您还可以使用几个插件自动处理此问题。其中许多是每月一定量的免费,之后相对便宜。我个人喜欢TinyPNG的Tiny Compress Images插件,因为它还包括已经在其免费版本中上传的文件的压缩。

CDN

如果您的网站具有全球覆盖范围,请考虑查看CDN,以加快远程加载速度。CDN通过将静态内容(图像,脚本和视频)的副本放在世界各地的服务器上来工作。当访问者访问您的站点时,资产将从最接近他们的服务器提供,从而减少文件传输时的延迟。

如果您希望在全球范围内阅读您的网站,CloudFlare的免费帐户非常适合刚开始使用。如果您的站点仅限本地站点,则实际上可能会增加站点加载时间,因此可能需要进行一些测试。

推荐使用七牛,或者腾讯CDN

优化您的代码和代码交付

删除膨胀

  • 首先,查看您当前安装的插件。有没有你可以没有?如果是这样,请删除它们。是否有任何插件只使用一小部分功能?那么用一个更小,更有针对性的插件替换它是一个很好的候选者。
  • 你的主题多么臃肿?如果您的WordPress主题有一个演示页面,请通过上面的测试站点运行该演示。如果得分极差,请考虑转换到另一个主题的权衡。
  • 你有没有外部资源?如果Facebook在您的页面上加载了15个脚本,那么有没有办法实现相同的目标?或者您可能希望使用本地托管的字体文件,而不是每次都从Google下载。

优化和服务您的内容

我们将首先合并和缩小剩余的CSS和JavaScript文件。组合文件可减少站点请求的数量,缩小文件可减少需要下载的文件的大小,从而加快总页面加载速度。

为此,我们将安装并激活Autoptimize插件。启用后,转到仪表板中“选项”菜单下的页面,并启用HTML,CSS和JavaScript优化。

您还需要从静态资源安装删除查询字符串,以允许缓存所有脚本和CSS文件。只需安装并激活此一个,无需配置。

注意:自动优化有时会导致某些基于JavaScript的插件或功能出现问题。如果某些东西在安装后停止工作,请不要惊慌,因为这里的任何东西都不是永久性的。如果是这种情况,请在插件设置页面上单击“显示高级设置”,然后将相关文件添加到JavaScript下的“排除”列表中。这部分可能需要一些试验和错误。进行任何更改时,请务必单击“保存并清除缓存”。

接下来,我们将把JavaScript推迟到页脚。这会导致JavaScript在页面内容之后加载,以便用户可以在后台加载脚本时开始阅读。为此,我们将使用Async Javascript插件

安装并启用后,应确保将所有内容设置为“延迟”,并在底部确保启用自动优化支持。同样的注释适用于Autoptimize:如果出现问题,您可以将其添加到排除列表中。这可能需要反复试验。

我们要在这里采取的最后一步是设置一个缓存插件。有了访问您网站的访问者后,缓存插件会构建您网页的静态副本。此静态副本将提供给未来的访问者,绕过所需的所有源代码计算并加快后续页面加载。这里有很多选择,都有各自的优缺点。我个人喜欢Cachify,您可以在其中安装并激活,默认设置效果很好。

注意:由于所有内容都已保存(默认情况下为12小时),因此您有时会希望尽早强制重新加载缓存,尤其是在执行编辑或发布文章等操作时。发布页面时,Cachify会自动刷新缓存,但是当您进行编辑时,可能需要通过单击管理栏右上角的垃圾桶来清除它。如果您有经常更改的内容(例如WooCommerce结帐等),您还可以在Cachify设置页面中从缓存中排除单个页面。

优化您的服务器设置

此部分高度依赖于您的个人托管情况。并非所有这些选项都适用于所有主机。如果您不确定,我会联系您的托管服务提供商。这些将主要影响到第一个字节的时间,以及一些选项,如gzip和文件到期设置。如果您的主持人无法满意地回答这些问题,或者在完成其他步骤后仍然无法获得缓慢的TTFB(WebPageTest),则可能需要考虑迁移到新主机。

我会确保您的主机运行至少PHP 5.6,或者最好是PHP 7(速度提升超过5.x)。PHP 7默认启用opcache PHP服务器端缓存(这适用于Cachify)。您需要确保在服务器级别启用了gzip。还有其他选项可以加速服务器本身的站点负载,使用诸如Varnish缓存之类的设置以及超出本文范围的其他配置。

如果您使用Apache作为Web服务器,则可以在主WordPress站点文件夹中放置(或修改).htaccess文件。以下是为所有网站内容启用过期标头的设置。这些告诉访问者的计算机在一段时间过去之前不会重新下载图像,脚本等内容。这对于不会发生变化的事情非常有用,以便后续访问加载得更快。

总结

 这些是可能会降低网站速度的主要问题。总是有进一步改进的空间,但这些应该会给你一个良好的开端。

我们之前使用过的速度测试网站上有几点需要注意:

  • 在任何特定的速度测试站点获得100%通常是不可行的(甚至是可取的),而不会严重削弱您想要提供的功能。相反,在不牺牲质量的情况下拍摄最快的速度。
  • 每个站点都测试不同的东西,并以不同的方式测量。不要担心字母等级或百分比。相反,请检查并确保您已尽可能多地处理类别。真正重要的部分是TTFB,Start Render和Load Time,因为这些是访问者最终会看到的。
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论