标签: 网站性能

  • 利用Query Monitor插件调试WordPress并提高网站性能

    Query Monitor

    想象一下这种情况:您正在处理WordPress开发项目并安装了十几个或更多插件。但是,您的网站并没有像您希望的那样嗡嗡作响。您已经排除了所有常见的疑点:托管已经足够,没有明显的JavaScript或PHP错误,也没有其他明显的错误。您怀疑您安装的一个或多个插件是罪魁祸首,但您如何确定是哪个插件导致了问题?

    识别麻烦插件的常用方法是逐个停用插件,直到您尝试解决的行为停止。但是,安装正确的插件后,您可以更快、更准确地查明和调试WordPress问题。这是Query Monitor旨在解决的那种场景。

    什么是Query Monitor?

    Query Monitor是一个免费的WordPress调试和开发插件。您可以使用它来识别和调试缓慢的数据库查询、AJAX调用、REST API请求等等。此外,该插件还会报告网站详细信息,例如脚本依赖项和依赖项、在页面生成期间触发的WordPress钩子、托管环境详细信息、当前页面满足的条件查询标签等等。

    WordPress插件-Query Monitor

    WordPress插件-Query Monitor

    该插件由John Blackbourn开发,他是WordPress的核心提交者,目前是Human Made的一名开发人员,之前受雇于WordPress.com VIP — 换句话说,他是真正了解WordPress的人。Query Monitor于2013年被添加到WordPress插件目录中,目前拥有超过10,000次活动安装——对于开发插件来说,这是一个令人印象深刻的总数。该插件的用户评分为五颗星,这有助于解释它在开发人员中的受欢迎程度。

    Query Monitor有什么作用?

    很多。

    我们不会花时间列出Query Monitor提供的每个功能,但如果您想深入了解细节,请查看GitHub上的Query Monitor。在高层次上,Query Monitor所做的是在生成WordPress网页的同时监视服务器上或服务器与访问者浏览器之间发生的每个WordPress事务。然后,它将报告附加到网页的页脚,详细说明它收集的所有信息。它适用于每个页面,包括 /wp-admin/ 页面,因此您可以使用它调试任何前端或后端页面。

    该插件以核心功能命名:数据库查询监控。每个查询都受到监控、计时,并绑定到生成它的函数。因此,您可以根据查询的处理时间对查询进行排序,并查明有问题、加载缓慢的查询。

    Query Monitor还跟踪并列出生成页面的WordPress钩子和条件标签应用程序。作为开发人员,您可以使用此信息来确定添加新插件或主题功能时要使用的正确挂钩或条件标签。

    Query Monitor提供了很多附加信息。处理Query Monitor生成的所有内容的最佳方法是将其安装在测试站点上并查看报告。

    如何使用Query Monitor

    使用您喜欢的方法安装Query Monitor:它位于GitHub上,也可从WordPress插件目录获得。安装插件后,您会注意到的第一件事是管理栏中添加了一个新菜单项:

    Query Monitor管理栏

    Query Monitor管理栏

    新项目上的标签显示了一些指标:

    • 页面生成时间,
    • PHP内存使用高峰,
    • 数据库查询时间,以及
    • 进行的数据库查询总数。

    将鼠标悬停在管理栏上,将出现一个下拉菜单。Query Monitor生成的所有数据都包含在添加到页面底部并分为多个部分的单个报告中。单击下拉菜单中的任何项目以转到查询监视器报告的相应部分。例如,下面是页面上运行的整体“queries”的屏幕截图。

    Query Monitor查询

    Query Monitor查询

    如果发生任何PHP错误,或者任何查询花费的时间过长,其他项目将添加到下拉菜单中,突出显示这些问题。单击它们以查看更多详细信息。

    您可能会注意到列表中的最后几项从一页更改为下一页。这些以绿色显示的项目是当前页面满足的条件查询标签。

    滚动整个报告以查看Query Monitor生成的大量数据。花点时间尝试可用于过滤报告中包含的数据的下拉菜单以及包含“+”符号的框,可用于查看有关许多报告详细信息的更多数据。

    如果您想从Query Monitor中获取更多数据,请查看第三方Query Monitor附加组件,以查看是否存在可生成所需调试信息的插件。

    如何以注销用户的身份查看查询监控数据

    当您以管理员身份登录时查看WordPress网站时,该网站包含一个管理栏和其他脚本,注销的访问者看不到这些。Query Monitor可以在注销时查看站点并且仍然可以访问调试信息。但是,第一次使用此功能可能会有些棘手。

    要以注销的访问者身份查看Query Monitor数据,请执行以下步骤:

    • 以管理员身份登录时转到WordPress管理区域,然后单击管理栏中的查询监视器项。
    • 滚动报告数据的最底部并查找显示Set authentication cookie的链接。请注意,您必须在管理区域才能看到链接。如果您在前端页面上查找链接,您将找不到它。
    • 单击该链接会将身份验证cookie添加到您的浏览器。这样,即使您未登录,Query Monitor也会知道显示测试结果。
    • 设置身份验证cookie后,退出站点或使用User Switching等插件切换到非管理员用户配置文件。
    • 导航到要查看调试信息的页面并滚动到页面底部。在那里,您将看到Query Monitor报告的精简版本。单击任何项​​目以展开报告。

    小结

    作为WordPress开发人员,拥有合适的工具可以让您的工作更轻松。Query Monitor是一款免费工具,有可能为您节省大量时间。您可以将其用于:

    • 查明慢查询和触发它们的函数,
    • 生成WordPress生成页面时遇到的WordPress钩子列表,
    • 确认哪些条件标签适用于当前页面或帖子,
    • 识别JavaScript资源之间的关系,
    • 查看服务器配置详细信息,以及
    • 更多

    如果您尝试使用Query Monitor,它很有可能会立即成为您的WordPress开发环境的永久补充。

  • 分析WordPress网站上的第三方服务性能

    分析WordPress网站上的第三方服务性能

    许多优化文章都关注如何加快WordPress网站的速度,例如优化图像或迁移到更快的主机。虽然这些都很重要,但今天我们想与您讨论第三方性能的影响以及它如何影响您的WordPress网站。基本上,您从站点外部调用的任何内容都会产生加载时间后果。使这个问题更加严重的是,其中一些只是间歇性地缓慢,使得问题的识别更加困难。今天我们将探索识别和分析第三方服务和性能问题的方法。

    什么是第三方外部服务?

    第三方外部服务可以被认为是从您自己的服务器外部与您的WordPress站点通信的任何东西。以下是我们经常遇到的一些常见示例:

    • 社交媒体平台,如Twitter、Facebook和Instagram(小工具或转换像素)
    • 第三方广告网络,如Google Adsense、Media.net、BuySellAds、Amazon Associates
    • 网站分析,例如Google Analytics、Crazy Egg、Hotjar
    • A/B测试工具,例如Optimizely、VWO、Unbounce
    • WordPress评论系统,例如Disqus、Jetpack、Facebook评论
    • 备份和安全工具,例如 VaultPress、Sucuri、CodeGuard
    • SumoMe、HelloBar等社交分享工具
    • CDN网络,例如KeyCDN、Amazon CloudFront、CDN77和StackPath
    • 外部托管的Javascript

    外部服务如何导致问题

    外部服务通常会带来两个问题。一个是由纯粹的体积带来的,另一个是等到它们加载。

    • 如果您有很多外部服务,则需要加载所有这些服务,并在每次页面加载时等待来自它们的信息。您的呼叫越多,等待的时间越长,您自己的服务器上的负载就越高,您遇到第二个问题的机会就越大。
    • 在某些情况下,页面加载将等到您的站点和外部服务之间的数据传输完成。如果在标头中调用服务并且服务中断,您的页面将简单地拒绝加载。

    当然,可以做一些事情来加快速度,例如异步加载脚本,但我们稍后会介绍他。在大多数情况下,庞大的体积是调试3rd方性能问题时必须处理的最大问题之一。

    识别外部服务

    识别这些服务并不难。最简单的方法之一是打开网站速度测试工具,无论是PingdomGTmetrix、WebPageTest还是Chrome Devtools,并通过它运行您的网站。您应该会看到已加载的资源列表。将鼠标悬停在资源上,如果它在开头不包含您的域名,则它是您正在调用的外部服务或外部资产。

    您可以在下面看到缩小版的jQuery是从外部源 (https://ajax.googleapis.com) 加载的。

    外部服务——JavaScript

    外部服务——JavaScript

    如果您不知道外部服务的用途,您可以随时尝试浏览主域或在Google中搜索其名称,因为应该会出现相关的开发人员或公司。这是确定服务是否合法的好方法。正如您在下面看到的,搜索jQuery文件会导致一些知名公司(如jQuery和Google)描述托管此文件。所以你可能是安全的。

    jQuery外部脚本

    jQuery外部脚本

    分析持续的第三方性能问题

    如果您的网站总是很慢,那么您需要弄清楚是什么让它变慢了。如果您的网站有间歇性问题,那就有点困难了。让我们从持续缓慢开始。我们在这里假设您的网站由于外部服务而运行缓慢。虽然许多速度问题可能是由外部服务引起的,但还有大量其他问题,因此这可能无法解决您的问题。

    首先,您需要确定是否有任何服务需要很长时间才能加载,以及它如何影响您网站的性能。所以我们建立了一个测试站点,其中包含以下内容:

    • 2个AdSense广告
    • 脸书点赞框
    • Instagram小工具
    • Disqus评论
    • Facebook转化跟踪像素
    • 谷歌分析

    WordPress测试站点

    WordPress测试站点

    这将使我们能够一项一项地删除每项服务,并向您展示它们对您的整体网站负载的影响程度。我们还将分享一些加载它们的替代方法的策略。然后,您可以将相同的策略应用于您自己的WordPress网站。我们通过Pingdom运行测试站点,您可以看到的第一件事是“按域的内容大小”和“按域的请求”。如果您看到请求,而不是来自您的域名,则这些请求很可能是外部服务或外部资产。这是一个很好的起点。正如您在下面看到的,static.xx.fbcdn.net有37个请求,这不好!

    Pingdom外部服务——(速度测试)

    Pingdom外部服务——(速度测试

    站点加载时间也是1.94秒,这真的很糟糕,因为正如您在上面看到的,测试站点上没有任何内容。这是一个较小规模的测试,可帮助您更好地分析第三方性能。WordPress网站越大,问题就越大。但从根本上说,大多数问题都可以通过类似的方式解决。

    处理Google AdSense

    我们首先要解决的是Google Adsense。通常,当您运行速度测试时,您可以将鼠标悬停在每个条上,以查看加载过程的每个部分花费了多长时间。您应该寻找超长的条(与其他条相比)以及仅在特定条完成后才开始加载条的地方——这些是您的瓶颈。一旦您发现某个特定元素的加载时间过长或阻止其他资源加载,您就需要弄清楚它为何存在以及它来自何处。

    这可能有点困难,对服务的调用可以在您的主题中编码,也可以来自插件。但是,正如我们之前提到的,还有绝对数量的问题。如果我们查看下面来自pagead2.googlesyndication.comtpc.googlesyndication.com的请求,我们可以看到这些条相当短,这意味着它们不会造成那么大的延迟。不过,其中一些确实有更长的接收时间(绿色条),这是Web浏览器从服务器接收数据所需的时间。最大的问题是一旦将所有请求加在一起。

    我们喜欢将Google AdSense称为可变的3rd-party服务。这是因为每次加载页面时都会加载不同数量的请求和资产。这使得很难确定是什么导致了性能问题,因为每次运行速度测试都会有所不同。以下只是广告生成的一些第3方请求的片段。它们还生成重定向,它们有自己的延迟。

    Google AdSense外部请求

    Google AdSense外部请求

    您可能认为仅仅两个广告就产生如此多的请求是很疯狂的,但这就是它们的工作原理。

    选项 1 – 异步加载

    您的第一个选择是确保它们异步加载。async属性基本上告诉浏览器立即开始下载资源,而不会减慢HTML解析速度。一旦资源可用,HTML解析就会暂停,以便可以加载资源。默认情况下,从Google AdSense新生成的代码将具有此属性,但如果您的代码还有几年的历史,我们建议您检查它。

    <script async src=“//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
    <!– nogluten-top-right-page-300×250 —>
    <ins class=“adsbygoogle” style=“display: block;” data-ad-client=“ca-pub-xxxxxxxxxxx” data-ad-slot=“9805695044” data-ad-format=“auto”></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
    <!– nogluten-top-right-page-300×250 –>
    <ins class=”adsbygoogle” style=”display: block;” data-ad-client=”ca-pub-xxxxxxxxxxx” data-ad-slot=”9805695044″ data-ad-format=”auto”></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- nogluten-top-right-page-300x250 -->
    <ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="9805695044" data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    请务必查看我们关于消除渲染阻塞JavaScript和CSS的另一篇文章。这可以帮助您更好地了解脚本如何在您的WordPress网站上加载和运行。

    选项 2 – 删除它们

    您的另一个选择是完全删除Google AdSense。显然,对于一些依赖第三方广告收入的网站来说,这不是一个选择。但是我们已经看到电子商务网站在他们的网站上投放AdSense广告,只是想快速赚钱。您应该意识到这方面的性能问题。如果您销售产品或服务,则一个Google AdSense广告可能弊大于利,并损害您的主要收入来源。对于博客作者,您还可以查看联属网络广告与AdSense。很多时候,您可以从CDN加载联属网络广告,并且只会有一个请求。

    在此示例中,我们将删除广告,以向您展示仅两个小广告如何影响您的WordPress网站的整体性能。因此,我们在移除它们后进行了另一次速度测试,您可以看到我们的加载时间从1.94秒下降到909毫秒!我们的请求从185减少到138,我们的整体页面大小从2MB 减少到1.7MB。

    删除Google AdSense后(速度测试)

    删除Google AdSense后(速度测试

    那就对了!两个小广告为我们的整体加载时间增加了大约一秒钟。这就是为什么除非您的收入模式围绕第三方广告,否则不要将它们放在您的WordPress网站上。如果您的广告网络有问题,并且您有一个插件可以为您处理广告网络,那么禁用该插件很可能会解决该问题。如果它在主题中编码,则需要修改主题文件。如果您是开发人员,我们建议您执行以下两项操作。

    解决Facebook Like框

    接下来要看的是导致所有这些static.xx.fbcdn.netscontent.xx.fbcdn.net请求的Facebook类似框。我们可以看到这些条相当短,这意味着它们不会造成太多延迟。但是,一旦将它们全部加在一起,这就是问题所在。同样,这是一个绝对数量的问题。

    Facebook小部件请求

    Facebook小部件请求

    我们建议每位网站所有者远离Facebook点赞框!它不仅会向外部JavaScript生成大量请求,还会加载大量图像。这里有三个建议可以更好地处理这个问题。

    选项 1 – 异步加载

    要使用Facebook点赞框,您或开发人员必须将以下代码添加到您的WordPress站点的标题中。还有一些WordPress小工具也添加了该框。

    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js. id = id;
    js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976”;
    fjs.parentNode.insertBefore(js, fjs);
    }(文档, ‘脚本’, ‘facebook-jssdk’));</script>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js. id = id;
    js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976”;
    fjs.parentNode.insertBefore(js, fjs);
    }(文档, ‘脚本’, ‘facebook-jssdk’));</script>
    <script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js. id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(文档, '脚本', 'facebook-jssdk'));</script>

    上面代码的问题是它没有异步加载。async属性基本上告诉浏览器立即开始下载资源,而不会减慢HTML解析速度。一旦资源可用,HTML解析就会暂停,以便可以加载资源。我们不确定为什么Facebook没有将此属性添加到脚本中,但您可以在下面看到修改后的版本,它将异步加载它。

    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js. id = id; js.async=true; js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976”;
    fjs.parentNode.insertBefore(js, fjs) ;
    }(document, ‘script’, ‘facebook-jssdk’));</script>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js. id = id; js.async=true; js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976”;
    fjs.parentNode.insertBefore(js, fjs) ;
    }(document, ‘script’, ‘facebook-jssdk’));</script>
    <script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js. id = id; js.async=true; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976"; 
    fjs.parentNode.insertBefore(js, fjs) ; 
    }(document, 'script', 'facebook-jssdk'));</script>
    

    如果您在Pingdom中检查它,您可能不会注意到加载时间有太大差异,但您的访问者肯定会注意到,因为它会影响脚本和资产的加载方式/时间。

    选项 2 – 改用图片横幅

    下一个建议是用一个简单地链接到您的Facebook页面的横幅图像替换Facebook点赞框。这会立即将40多个请求减少到1个,并且您将不再拥有外部依赖项。你可以通过这种方式变得非常有创意,并且在设计和性能之间取得了很好的平衡。

    选项 3 – 摆脱它

    最后,最后的选择是完全摆脱它。我们在测试站点上就是这样做的,如下所示,它将我们的加载时间从909毫秒降低到786毫秒。它将整体页面重量从1.7MB 降低到1.0MB,将请求总数从138降低到78。这里要真正指出的一件事是页面重量降低。Facebook点赞框增加了700 KB!这很糟糕。

    删除Facebook点赞框后(速度测试)

    删除Facebook点赞框后(速度测试

    处理Instagram小部件

    接下来要看的是Instagram Widget。在我们的示例中,我们使用的是免费的Instagram Feed插件。该插件实际上不是问题,而是生成的来自scontent.cdninstagram.com的请求。我们可以看到这些条相当短,这意味着它们不会造成太多延迟。但是,一旦将它们全部加在一起,这就是问题所在。同样,这是一个绝对数量的问题。您可能会看到这里形成了一种模式。WordPress网站上的许多3rd-party性能问题不是来自单个请求的延迟,而是那些不关心性能的开始。

    Instagram外部请求

    Instagram外部请求

    我们还建议人们远离Instagram小部件,除非你真的需要它,因为它会产生大量请求。这里有一些建议可以更好地处理这个问题。

    选项 1 – 改用图片横幅

    就像Facebook的点赞框一样,除非您真的需要动态Instagram小部件,否则请创建一个横幅,而不是链接到您的Instagram页面。这会立即将20多个请求减少到1个,并且您将不再拥有外部依赖项。你可以通过这种方式变得非常有创意,并且在设计和性能之间取得了很好的平衡。

    选项 2 – 摆脱它

    当然,您可以完全摆脱它。我们在测试站点上就是这样做的,如下所示,它将我们的加载时间从786毫秒降低到690毫秒。它将整体页面重量从1.0MB 减少到814.3KB,请求总数从78个减少到57个。

    删除Instagram小部件后

    删除Instagram小部件后(速度测试

    处理Disqus评论

    接下来要看的是Disqus评论。在我们的示例中,我们使用免费的Disqus评论系统插件。Disqus的最大问题是它会产生大量请求,并且必须为每个评论的人加载gravatar。我们在有关如何加快WordPress评论速度的文章中对此进行了详细介绍。

    您可能还想完全禁用WordPress上的评论

    如果您是大型商业网站,您可能还需要付费才能删除Disqus广告,如果您不这样做,最终会在您的网站上生成更多请求。您可以在下面看到它生成的一些请求的一小段。

    Disqus外部请求

    Disqus外部请求

    在处理评论方面,这里有一些建议。

    选项 1 – 延迟加载Disqus评论

    延迟加载是在用户向下滚动页面之前不加载资产和脚本的过程。这确保了首页加载速度更快。您可以使用Joel James提供的免费Disqus Conditional Load插件轻松延迟加载Disqus评论。我们在测试站点上安装了该插件,如下所示,它将我们的加载时间从690毫秒降至603毫秒。它将整体页面重量从814 KB降低到366.1KB,将请求总数从57降低到24。需要指出的一件事是大幅降低页面重量!

    延迟加载Disqus后

    延迟加载Disqus后(速度测试

    选项 2 – 延迟加载原生WordPress评论

    您的另一个最佳选择是延迟加载原生WordPress评论。延迟加载Disqus插件的开发者Joel James也有一个名为Lazy Load for Comments的免费插件。这以与上述方式非常相似的方式工作。我们在测试站点上安装了该插件,如下所示,它减少了几乎相同的加载时间。

    延迟加载原生WordPress评论后

    延迟加载原生WordPress评论后(速度测试

    处理Facebook转化跟踪像素

    最后,我们来看看Facebook转化跟踪像素。显然,大多数人使用它来收集有关访问其网站的人的数据,或在投放Facebook广告时跟踪转化。因此,删除它可能并不总是一种选择,而且您确实无法做任何事情来提高它的性能。正如您在下面看到的,它负责生成5个不同的HTTP请求,不幸的是,它们并不是最快的。

    分析WordPress网站上的第三方服务性能-1

    Facebook转化跟踪像素外部请求

    我们将简单地删除它以向您展示它对您网站性能的影响程度。将其从我们的网站上取下后,我们的加载时间从611毫秒降至429毫秒。它将整体页面重量从367.5 KB减少到343.2KB,请求总数从27减少到22。

    去除FB像素后

    去除FB像素后(速度测试

    以上示例只是您可能在WordPress网站上运行的数千个外部服务中的一小部分。查看每一项并确定它对您网站性能的影响程度非常重要。如您所见,只有一个坏苹果会引起巨大的问题!

    外部服务可以帮助提高绩效

    虽然大多数外部服务会损害您网站的性能,但也有一些可以帮助它。CDN(例如KeyCDN或Cloudflare)可以极大地加快您的网站速度,而只需进行最少的设置工作。在下面的示例中,我们将KeyCDN添加到我们的测试站点。如您所见,它使我们的加载时间又减少了100毫秒。

    CDN后

    CDN后(速度测试

    进一步优化

    然后,我们对WordPress网站进行了一些额外的优化,使我们的性能等级得分达到100分,加载时间为270毫秒。这些优化包括:

    以下是一些优化的更深入的教程:

    优化后

    优化后(速度测试

    如您所见,我们的加载时间从 1.94 秒缩短到了 270 毫秒!当然,您可能需要一些外部服务,每个企业都需要。但重要的是不要忘记分析每一个。如果您发现加载时间过长,请联系负责它的开发人员或公司并提出问题。

    防止停滞加载

    更大的问题是脚本在完成自身加载时阻止加载。如果像这样的脚本包含在标题中,它可以使您的网站无限期地保持空白。因此,页眉中并非绝对必要的任何内容都应放在页脚中。这将允许您的网站在有问题的脚本甚至开始加载之前完全加载。如果你使用wp_enqueue_script()函数(你应该),你可以使用第五个参数来指示它应该加载到页脚中。

    如果您发现插件无缘无故地在页眉中加载了资产,您可以使用wp_dequeue_script()将其从页眉中删除,然后wp_enqueue_script()以相同的方式注册它,但在页脚中。

    使用谷歌标签管理器

    帮助解决第三方性能问题的另一种方法是使用免费工具,例如Google Tag Manager。这使您可以在一个地方管理所有脚本和标签。这样做的一些好处是它们将异步加载,管理变得更容易,并且您可以为加载脚本的页面设置触发触发器。

    Google跟踪代码管理器触发触发器 Google跟踪代码管理器触发触发器

    但是,这样做也有一些缺点:

    Google跟踪代码管理器不会减少您网站或应用程序上的代码数量,但它确实简化了管理它们的任务。对于网站,Google跟踪代码管理器异步执行,并且可以配置为仅在需要时触发代码,从而帮助您的页面更快地加载。(来源

    如果您使用Google跟踪代码管理器,您还将有另一个HTTP请求和对googletagmanager.com的DNS查找,即使它非常微不足道。

    googletagmanager.com请求

    googletagmanager.com请求

    我们建议您使用Google跟踪代码管理器来查找具有大量第三方服务和集成的大型未优化网站。对于拥有开发人员的小型网站,您很可能不会看到使用GTM带来的性能提升。

    分析间歇性第三方性能问题

    解决间歇性问题的方式与解决持续性问题的方式相同,但找出罪魁祸首更加困难。实施上述解决方案可能已经有所帮助,但知道导致问题的原因仍然很高兴。我们喜欢使用的工具是New Relic。您可以在下面看到一些 3rd 方广告网络的示例以及一段时间内与它们相关的大量加载时间。

    New Relic Monitoring – 外部广告网络

    New Relic Monitoring – 外部广告网络

    但具有讽刺意味的是,New Relic也可能导致性能问题。在这种情况下,我们建议将其用于故障排除和零星监控,而不是持续使用。您还可以使用GTMetrix之类的工具在您的站点上安排每小时速度检查。几天后,您可以查看并在一个漂亮的小图表中查看结果:

    GTmetrix报告时间

    GTmetrix报告时间

    这会告诉您您的网站何时比平均速度慢。我们将首先单击最右侧的尖峰以进入该时间点创建的报告。然后,我们将查看瀑布以查看是哪个资源造成了问题。请务必查看我们关于如何使用GTmetrix诊断您网站上的问题的深入文章。

    GTmetrix瀑布图

    GTmetrix瀑布图

    那里有一个资产似乎会阻止后续资产,看看中间附近的绿色条。原来这是来自Google Recaptcha。632ms看似一瞬间,但实际上却是很多。一个页面真的应该在2 seconds-ish内加载。其中超过三分之一仅由这一资产占用。资产应该稍后加载,或者应该放弃它以支持其他验证方法。

    小结

    正如你所看到的,仅仅几个外部服务就可以产生巨大的影响。第三方性能不容忽视,它与现场和后端优化齐头并进。值得庆幸的是,有很多事情可以做,特别是如果您涉及开发人员。抛弃服务,调整它们以以不同的方式(例如异步)加载,以另一种方式(例如横幅)提供相同的东西,所有这些都可以大大提高您的网站速度!

  • 提高WooCommerce加载速度的17种有效方法

    提高WooCommerce加载速度的17种有效方法

    对于电子商务网站来说,速度就是金钱。您的网站加载速度越快,购物体验就越好。更好的用户体验转化为改进的SEO、增加的投资回报率和更快乐的客户。这最终会带来更大的收入和利润。

    今天的购物者期待高分辨率图像和视频、实时聊天、用户评论、实时库存、个性化以及许多其他动态工具。

    网上购物者的注意力很短。因此,如果您没有正确执行这些功能,他们希望拥有更快、更顺畅的购买体验的所有功能都会减慢您的电子商务网站的速度。

    WooCommerce是世界上最受欢迎的电子商务平台,可根据您的要求免费使用和调整。

    WooCommerce引领电子商务

    WooCommerce引领电子商务(图片来源:BuiltWith)

    迄今为止, WooCommerce的下载量已超过8800 万次。截至目前,它已在超过500万个网站上使用。

    WooCommerce插件下载和使用统计

    WooCommerce插件下载和使用统计

    与其他流行的购物平台不同,如果您使用WooCommerce,则无需支付一定比例的收入。不过,运营一家由WooCommerce提供支持的商店会产生一些间接费用。

    但是有一个问题!由于WooCommerce在有限的支持下是免费的,因此您有责任将其保持在最佳状态。好消息是,如果您知道自己在做什么,就很容易照顾它!

    想了解如何可靠地加速您的WooCommerce网站吗?

    1. 为什么速度对在线商店很重要
    2. 衡量WooCommerce商店的速度
    3. 如何加快WooCommerce
    4. 优化WooCommerce管理面板
    5. WooCommerce速度始于优质托管

    为什么速度对在线商店很重要

    第一印象很重要,速度是用户首先会注意到您的网站。在Google的一项研究中,如果加载时间超过3秒, 53%的移动用户会离开网站。

    3秒是最佳实践

    3秒是最佳实践(图片来源:Think with Google)

    2秒是电商网站接受度的门槛。在Google,我们的目标是不到半秒。– Maile Ohye,谷歌技术主管

    在另一项全球研究中,80%的用户表示他们发现加载缓慢的网站比暂时关闭的网站更令人沮丧。同一项研究还发现,如果网站加载速度太慢, 73%的用户会切换到竞争对手的网站。

    即使页面响应时间延迟100毫秒,也会损害用户体验和在线收入。根据Akamai的说法100毫秒的延迟会影响转化率7%,而2秒的延迟会提高跳出率高达103%

    如果您的网站每天产生1000美元的收入,那么页面加载时间延迟100毫秒可能会使您每年损失25,550美元的销售额。

    业务越大,跌幅越大。例如,如果页面加载时间仅降低一秒,亚马逊预计每年将损失16亿美元的收入。

    页面加载时间至关重要

    页面加载时间至关重要(图片来源:Think with Google)

    上述数据表明,如果您的网站加载时间为6秒或更长时间,那么您失去的用户数量是您的网站加载时间少于 3 秒时的两倍。

    除了用户体验,您网站的速度也会影响SEO。网站速度和性能在Google的网站排名算法中起着重要作用。

    谷歌已将其搜索结果中显示的超过50%的页面转向移动优先索引。尽管如此,来自HTTPArchive.org的数据表明,运行WordPress的移动网站的平均加载时间在去年有所恶化。

    顶级WordPress网站的表现如何

    顶级WordPress网站的表现如何(图片来源:HTTPArchive.org)

    在网络星期一和黑色星期五等流量高峰期,让您的网站尽可能快地运行更为重要。随着优惠的爆发,确保购物者不会放弃您的网站对于完成销售至关重要。

    鉴于这些统计数据,加快您的WooCommerce商店可以让您在竞争中获得显着优势。

    衡量WooCommerce商店的速度

    你无法衡量的东西,你无法改进!

    现在您已经了解了为什么速度对您的WooCommerce商店很重要,是时候学习如何衡量它了。当您尝试加快WordPress网站速度时,了解如何衡量改进至关重要。

    网站速度测试是测试WooCommerce商店响应能力的完美工具。但是,如果您没有正确执行此操作,您的网站在进行更改后可能看起来更慢,而实际上它更快。

    一份网站速度测试报告

    一份网站速度测试报告(图片来源:Pingdom)

    我建议您开始使用以下网站速度测试工具之一:WebPagetestPingdomGoogle PageSpeed InsightsGTMetrix

    您还可以使用免费的WordPress插件查询监视器来查明表现不佳的主题、插件和功能。它可以帮助您调试低效的数据库查询、臃肿的函数、PHP错误、HTTP API调用等。

    没有速度测试工具是完美的,但选择一个并坚持下去。您可以稍后再尝试其他选项。

    Gary Illyes,Google网站管理员趋势分析师

    Gary Illyes,Google网站管理员趋势分析师

    实际表现和感知表现之间存在差异。用户体验比网站的技术魅力更重要。

    因此,使用下面提到的技术来增强您网站的整体用户体验,而不仅仅是获得高速分数。

    如何加快WooCommerce

    速度测试报告将为您提供一个可行的计划来优化您缓慢的WooCommerce网站。

    1.优化WooCommerce设置以提高性能

    让我们通过优化WooCommerce插件设置从基础开始。

    首先,更改您的登录页面URL。默认情况下,每个WordPress站点的登录URL都是domain.com/wp-admin/。虽然这很容易记住,但它带来了一个主要问题:每个人也都知道它,包括机器人和黑客。

    将您的登录URL更改为独特的内容将保护您免受来自恶意行为者的暴力攻击。它还可以帮助您对抗限制速率的HTTP错误,例如429 Too Many Requests

    WPS Hide LoginRename wp-login.php等免费插件使这项任务变得超级简单。

    如果您的电子商务网站也托管博客,您可以限制博客提要上的帖子数量。WordPress默认将此限制设置为10个帖子,但您可以设置下限。

    虽然这看起来微不足道,但如果您运行一个高流量的博客,性能节省就会加起来(这里是如何为您的网站增加流量)。您可以在WordPress仪表盘 → 设置 → 阅读下找到此选项。

    限制博客Feed中的文章数量

    限制博客Feed中的文章数量

    接下来,禁用您网站上的pingback。它们通常会产生毫无价值的垃圾邮件。您的网站生成的查询越少越好。

    优化讨论设置

    优化讨论设置

    如果您的帖子或页面上有很多用户评论,那么WordPress还为您提供了将它们分成更小的块的选项。同样的设置也适用于分解产品页面上的评论。

    将此数字保持在10到20之间,以优化您的产品页面加载时间。

    如果您不喜欢将产品评论放在您的商店中,您可以在WooCommerce → Setting下禁用产品评论。这将有助于加快您的网站,因为它消除了加载一些脚本和小部件。

    禁用评论

    如果您不需要产品评论,请禁用它们

    最后,从您的站点中删除任何不必要/过时的主题和插件。您安装的主题和插件越少,维护它们和解决性能问题就越容易。

    2. 获得一个快速的WooCommerce主题

    使用正确的WooCommerce主题很重要。那里有成千上万的主题,因此选择适合您的主题始终是一个挑战。

    WordPress.org上的特色主题

    WordPress.org上的特色主题

    具有惊人内置功能的漂亮主题在纸上听起来很棒,但在实际使用中可能会失败。对于电子商务网站,您需要确保它与WooCommerce完全兼容。

    过滤您的电子商务主题搜索

    过滤您的电子商务主题搜索

    WP Rocket测试了一系列流行的WooCommerce主题的速度,并得出以下结果。

    选择快速的WooCommerce主题

    选择快速的WooCommerce主题(图片来源:WP Rocket)

    Astra、OceanWP和GeneratePress也是非常优秀的主题,正如WordPress加速文章中所建议的那样。它们是超快速、轻量级的WordPress主题。您将在本教程中找到10多个额外的非常快速的主题

    与Elementor或Beaver Builder等页面构建器配合使用时,它们可以帮助您创建几乎任何网站。

    Storefront是WooCommerce的官方主题

    Storefront是WooCommerce的官方主题

    Storefront是WooCommerce提供的免费主题,而ShoptimizerDiviWoondrShop是高级主题。由于这些主题是为运行电子商务网站而构建的,因此无需安装第三方插件即可获得所需的所有功能。

    如果您预算不足,最好先从免费主题开始,然后再升级到高级解决方案。

    我建议留下页面构建器以减少臃肿。相反,选择支持WordPress区块编辑器Gutenberg的主题。

    要确定一个主题,我建议您列出您在线商店中需要的所有功能。然后选择一个涵盖您大部分功能要求的主题。这将帮助您减少对臃肿的多功能主题和第三方插件的依赖。

    这给我们带来了下一个建议。

    3. 轻松使用插件和WooCommerce扩展

    WordPress在其存储库中有54,000多个免费插件。野外还有更多高级插件。因此,很容易被带走并安装数十个。

    几乎可以找到任何你想到的功能插件

    几乎可以找到任何你想到的功能插件

    许多流行的插件,尤其是与性能和安全相关的插件,在某些托管环境中不能很好地工作。

    如果您发现很难决定安装哪个插件,请查看闪电博平日推荐的各种用途的WordPress插件我们自主开发的原创插件。从SEO到图像压缩,您一定会在其中找到一些宝石。

    WooCommerce功能可以通过其广泛的免费和高级WooCommerce扩展来丰富和增强网站功能。它们的工作方式与插件相同。

    WooCommerce扩展增强了您商店的功能

    WooCommerce扩展增强了您商店的功能

    与流行的看法相反,您安装的插件数量并不总是会导致性能问题。但这仅适用于使用最佳编码实践构建的插件。

    当插件太多时,审查您安装的每个插件的质量会变得很麻烦。那是考虑到您拥有彻底审查他们的技能和专业知识。

    一些插件甚至会与其他插件产生冲突。当您的网站上有数十个插件时,发生插件冲突的可能性会呈指数级增长。

    因此,请注意您安装的插件类型和 WooCommerce 扩展。

    4.增加WordPress内存限制

    WordPress默认为PHP分配32MB内存。如果遇到任何问题,它会自动尝试将此限制增加到40MB(对于单个站点)或64MB(对于多站点)。

    在大多数情况下,这个内存限制对于WooCommerce网站来说是不够的。您甚至可能会在仪表板上收到错误消息,例如:

    “ xxxxxx字节的允许内存大小已用尽”

    建议将此限制增加到256MB。在编辑任何文件之前,请务必对其进行备份。如果出现问题,您可以将编辑后的文件替换为原始文件。

    5.压缩图像并优化交付

    图片占任何网站页面大小的大部分,对于电子商务网站来说更是如此。WooCommerce网站加载了产品图片和横幅。

    如果您不针对尺寸和交付优化图像,它们可能会使您的网站龟速爬行。

    HTTPArchive跟踪许多流行网页的大小和数量。他们在2021年做的WordPress网站状态调研直观表示:

    图像是一个网站的大头资源

    图像是一个网站的大头资源

    虽然视频是比图像更重的资源,但在大多数情况下,它们是按需加载的。因此,它们不会像图像那样影响感知的页面加载速度。

    根据HTTP Archive的图像状态报告,您可以通过延迟加载隐藏和屏幕外图像每页节省545KB

    通过将JPEG压缩级别设置为85或更低,每页可以进一步节省40.3KB 。该指标直接来自Google的移动网站速度测试工具Lighthouse

    请遵循以下5条规则来优化您的WooCommerce商店(以及一般网络)的图像:

    1. 为您的图像选择正确的格式(JPEG、PNG、SVGWebP)。
    2. 使用正确的工具有效地压缩图像。
    3. 使用响应式图像优化各种设备的交付。
    4. 延迟加载屏幕外和隐藏图像。
    5. 将图像交付给CDN处理。

    WooCommerce 3.3引入了图像大小改进,例如动态缩略图调整大小、模糊图像修复和背景缩略图大小调整。所有这些功能都使得使用插件(例如为WooCommerce相关图像重新生成缩略图)变得多余。

    自定义WooCommerce的产品图片

    自定义WooCommerce的产品图片(图片来源:WooCommerce)

    如果您从全新安装开始,您可以在将图像上传到您的站点之前对其进行压缩。以下是一些顶级的在线图像压缩建议:

    以最小的质量损失压缩图像

    以最小的质量损失压缩图像(图片来源:Compressor.io)

    您的网站上是否已经有很多图片?然后您可以使用WordPress插件来自动优化图像。以下是在我的经验中一直表现最好的那些:

    这些插件中的大多数还启用了图像的延迟加载。WordPress核心团队正计划将延迟加载图像添加为内置功能。这将利用<img>标签的新loading HTML属性。

    不过,关于图像优化的最后一件事。尽量避免使用图片压缩插件,尤其是那些使用服务器资源压缩图片的插件。

    相反,请使用将图像压缩任务卸载到外部服务器的服务。或者更好的是,在将图像上传到您的网站之前调整大小并压缩它们。

    对于深入的教程,关于Web和性能的图像优化的文章是一个很好的入门资源。

    6. 通过CDN交付静态资源

    内容交付网络 (CDN) 是一组战略性地分布在世界各地的服务器。这些服务器位置称为存在点 (PoP)。

    CDN的主要功能是缓存和交付静态资源,例如图像、JavaScript、CSS等。更强大的CDN还可以托管和交付动态内容,例如音频和视频。

    即使您的站点在地球上最快的服务器上运行,它仍然受到其地理位置的限制。WordPress CDN将缩短个人用户与站点资源之间的距离,从而减少网络延迟和首字节时间 (TTFB)

    CDN网络全球分发示意图

    CDN网络全球分发示意图

    根据请求的来源,它会自动分配最近的CDN PoP来交付缓存的资源。结果是更快的网站和更好的用户体验。

    例如,如果您的WooCommerce商店托管在美国的服务器上,并且来自印度的用户试图打开您的网站,则CDN将从最近的PoP提供网站资源,它将来自班加罗尔(印度)。

    CDN非常适合交付静态内容

    CDN非常适合交付静态内容(图片来源:Seobility)

    作为一般规则,PoP的数量越多,其全球传播范围越广,您的网站对您的用户来说就越快。

    对于远离托管服务器的地理位置的用户,使用CDN可将站点加载时间减少50%以上。

    除了缓存之外,许多CDN还包括其他性能增强功能,例如卓越的动态图像压缩、HTTP/2支持、防盗链保护和额外的安全性。

    对于更快的WooCommerce商店,我们建议您获得快速CDN。您可以查看的一些流行的CDN是:

    7.去除未使用的脚本和样式表

    大多数WordPress主题和插件会在您网站的所有页面上加载脚本和样式表。即使页面上没有使用它们,它们也会加载这些资产。

    例如,Contact Form 7在每个页面上加载其脚本和样式表。它的表单只能在联系页面上使用,但资产会加载到所有页面上。完全没必要!

    从页面中剥离这些未使用的资产将帮助您减少臃肿并加快页面加载时间。WooCommerce及其扩展(例如Smart CouponsFollow-Ups)容易受到此问题的影响。

    例如,无需在商店的主页或商店页面上加载与支付网关相关的脚本。您可以将此类脚本限制为仅在结帐和订单确认页面上加载。同样,从结帐页面中删除滑块和轮播的脚本和样式。

    如果您想知道要消除哪些资产,请查看网站速度测试报告中的瀑布图。它会让您了解正在加载的不必要的资产。

    GTMetrix的瀑布图

    GTMetrix的瀑布图

    Chrome浏览器的DevTools下的Network选项卡也是一个很好的开始。它会让您全面了解网页加载的方式和内容

    使用Google Chrome DevTools中的网络标签

    使用Google Chrome DevTools中的网络标签

    去除页面运行所不需要的脚本和样式。首先优化您的主页和登录页面,因为这些是大多数用户的第一个入口点。

    您可以使用wp_dequeue_scriptwp_dequeue_style函数来删除不需要的脚本和样式。一个简单的方法是通过一个名为Asset CleanUp: Page Speed Booster的插件。

    清理您的WordPress资产

    清理您的WordPress资产

    Asset CleanUp扫描将加载到页面上的所有脚本和样式表。您可以禁用页面上未使用的那些。完成更改后,测试页面的正确设计和功能。

    使用Asset Cleanup卸载Stripe支付网关脚本

    使用Asset Cleanup卸载Stripe支付网关脚本

    该插件的专业版允许您为资产设置async 或 defer属性。应用此设置会从页面的关键呈现路径中删除JavaScript。它应该有助于改善您网站的感知页面加载时间。

    消除不必要的CSS和JS资产的另一个好处是您的网站会发出更少的HTTP请求

    对于免费的替代方案,您可以结合使用Autoptimize和Async JavaScript插件来获得相同的结果。如果您使用Autoptimize插件,这里是我们关于最佳设置的完整分步教程

    8. HTTP/2非常重要

    如果我们在几年前写这篇文章,我们会将此部分命名为“减少HTTP请求的数量”。由于浏览器与网站通信方式的显着改进(反之亦然),这种优化的需求现在已经过时了。

    HTTP 1.1是HTTP协议的第一次重大更新,它于1997年完成。那是在社交媒体、流媒体服务、智能手机应用程序甚至WordPress之前。从那时起,网络呈指数级增长。

    HTTP/2在HTTP 1.1协议的基础上进行了改进,并于2015年进入以跟上互联网不断增长的需求。它在速度、效率和安全性方面带来了惊人的改进。

    HTTP 1.1与HTTP/2

    HTTP 1.1与HTTP/2(图片来源:Cloudflare)

    HTTP/2的性能提升有多种原因:

    • 通过单个TCP连接实现更好的多路复用和并行性。
    • 使用Huffman编码算法对标头进行HPACK压缩。
    • 用于更快加密的ALPN扩展。
    • 主动服务器推送而不是等待请求。

    所有这些爵士乐构成了一个关键优势:使网站加载速度更快,即使它们托管各种类型的资源。

    通常,WooCommerce商店提供大量资源密集型资产,例如图像、样式表和脚本。切换到HTTP/2将使此类网站受益匪浅。

    您可以使用KeyCDN的HTTP/2测试工具来检查您的站点是否配置为使用HTTP/2。截至目前,所有主流浏览器都支持HTTP/2。您没有理由不利用其巨大的性能优势。

    如果您的托管服务提供商还不支持HTTP/2,那么可以考虑换一家了。

    此外,HTTP/3指日可待,旨在让网站加载速度更快。

    9.缓存WooCommerce以加快速度

    缓存是临时存储来自一个请求的资源(缓存),以便可以快速执行后续请求。缓存既可以存储在服务器上,也可以存储在用户的设备上。

    这是加速WooCommerce商店的最简单方法之一。这也是最重要的一个。

    Web缓存的工作原理

    Web缓存的工作原理

    1. 用户通过浏览器向网站发出请求。例如,他们在浏览器中输入www.wbolt.com
    2. 然后,浏览器请求向用户显示网页(HTML文档)。DNS服务器处理此请求,这会导致显示托管服务器的IP。
    3. 返回网页由托管在Web服务器上的应用程序(例如WordPress、Joomla等)处理。对于静态网站,甚至可能不需要应用程序。
    4. 应用程序运行脚本(例如PHP、JavaScript等)并(5)查询数据库(例如MySQL、MongoDB等)以构建网页。然后它将网页返回给浏览器,浏览器将其呈现并显示给用户。

    如果一切顺利,上述所有步骤最多需要几秒钟才能执行。

    但这只是来自单个用户的一个请求。如果同时有来自数千个用户的多个请求怎么办?这会给服务器带来巨大的负载,最终导致网站速度变慢。

    这就是缓存的用武之地。它减少了生成页面浏览量所需的工作量,从而减少了WordPress对PHP和数据库的依赖。缓存使WordPress的执行速度几乎与静态网站一样快,如果不一样的话。

    有 2 种主要类型的Web缓存,每种都有自己的子集:

    服务器端缓存

    客户端缓存

    缓存不仅使网站加载速度更快,而且还减少了服务器上的负载。阅读关于WordPress缓存的深入文章深入了解这方面的知识。

    如果您的托管服务提供商不处理服务器级别的缓存,那么您需要依赖第三方缓存插件来为您完成这项工作。虽然它们不是理想的解决方案,但总比没有好。

    以下是我推荐的顶级WordPress缓存插件:

    有关更多选项,请查看关于WordPress缓存插件的帖子。

    10. 清理你的WooCommerce数据库

    数据库是您网站所有数据的有组织的集合。在WooCommerce商店中,它包括:

    • 站点内容,例如产品页面、类别、标签、用户数据、评论、站点范围的设置、主题、插件等。
    • 交易数据,例如订单详情、付款、库存等。

    每次用户访问您的商店时,他们都会请求您的网站内容,这些内容大多是静态的,不会发生太大变化。但是当他们下订单时,他们会发出动态请求。

    如果您不优化商店的数据库,处理这些请求可能需要很长时间。最终,缓慢的服务器响应时间会导致网站运行缓慢。因此,您必须通过删除不必要的垃圾来清理和优化数据库。

    这里有6种方法可以加快和微调您的WooCommerce数据库。

    删除旧版本

    如果您的WooCommerce商店已经运行了很长时间,它的页面、帖子和产品将积累很多历史版本。是时候清理这些了。

    最简单的方法是通过WP-SweepWP Rocket等插件。

    使用WP Rocket删除历史版本

    使用WP Rocket删除历史版本

    如果您对WP-CLI很方便,那么您还可以通过SSH连接到您的服务器并运行一些简单的命令来执行相同的操作。这是你如何做到的。

    限制存储的修订数量

    您可以通过限制帖子和页面的修订数量来避免大量旧修订。如果您倾向于经常更新您的网站内容,这将帮助您防止修订失控。

    设置限制的一种简单方法是将下面的代码片段添加到您的wp-config.php文件中。确保在定义ABSPATH的行之前添加它。

    define(‘WP_POST_REVISIONS’, 15);
    define(‘WP_POST_REVISIONS’, 15);
    define('WP_POST_REVISIONS', 15);

    我在上面的代码中将限制设置为15。您可以将其更改为您想要的任意数量的修订版,但请尽量将其保持在15以下。

    或者,您可以使用免费插件(例如WP Revisions Control)来做同样的事情。

    使用WP Revisions Control设置修订数

    使用WP Revisions Control设置修订数

    完全禁用修订(如果没有必要)

    您可以完全禁用站点的修订。您需要做的就是将以下代码添加到您的wp-config.php文件中。和以前一样,确保将此代码段添加到定义ABSPATH的行上方。

    define(‘WP_POST_REVISIONS’, false);
    define(‘WP_POST_REVISIONS’, false);
    define('WP_POST_REVISIONS', false);

    或者您可以使用免费插件,例如Disable Post Revision,只需单击一下即可。

    在禁用修订之前,我建议您删除所有仍然存在的旧修订。这样,您网站的数据库将完全免于修改。

    清理过期的瞬态

    瞬态是使用自定义名称和到期期限存储的缓存数据。它们通常存储在wp_options表下的WordPress数据库中。

    瞬态类似于Options,除了它们具有到期时间的附加属性。它们对于存储临时数据很有用,例如来自远程API的响应或大型查询。

    WordPress Transients API定义了如何自动处理瞬态和删除过期的瞬态。然而,事情并不总是按计划进行

    有时,损坏的瞬态缓存可以创建近百万个垃圾条目,而且看不到尽头。客户会话可能会随着时间的推移而增加,从而在您的数据库表中创建数千个不必要的行。在这种情况下,臃肿的数据库会使您的网站瘫痪。

    免费的Delete Expired Transients插件是摆脱所有过期瞬态的简单方法。

    轻松删除所有过期的瞬态

    轻松删除所有过期的瞬态

    清理你的数据库表

    您的WooCommerce数据库存储运行您的电子商务商店所需的一切。随着数据在数据库中的表中被添加、删除和移动,它变得低效并最终存储了许多对运行商店并不重要的东西。

    您需要通过清理数据库表来清除这些不必要的数据。特别是wp_options表容易变得臃肿并损害数据库性能。

    WordPress数据库中的wp_options表

    WordPress数据库中的wp_options表

    数据库管理是让您的WordPress网站尽可能快速运行的关键。

    手动优化数据库是一个耗时的过程。您可以使用免费的WP-Optimize插件来检查哪些数据库表有不必要的数据并删除那些浪费的空间。它还可以检索因数据碎片而丢失的存储空间。

    您可以安排WP-Optimize定期清理和优化您的数据库。

    禁用对数据库造成负荷的非关键功能

    WooCommerce主题和插件带有许多很酷的功能,这些功能从一开始就看起来很棒,但最终会破坏数据库。

    一个这样的例子是使用“热门产品”和“相关产品”插件。这些功能可能会导致大量的网站范围内的查询,尤其是在您拥有许多产品的情况下。如果您需要这些功能,请尝试将它们手动插入到您的页面中。诸如高级自定义字段之类的插件可以在这里提供极大的帮助。

    手动插入其“相关内容”帖子

    手动插入其“相关内容”帖子

    另一个例子是图像优化插件,它在托管站点的同一台服务器上压缩图像,而不是在外部进行。这最终会使用大量服务器资源。

    Social Warfare插件可以对服务器资源造成负荷

    Social Warfare插件可以对服务器资源造成负荷

    此外,请远离向您的网站添加计数器的插件。例如,在用户名旁边添加视图/帖子/评论的数量。与涉及的多个用户进行长时间的讨论将使您的数据库处理这些数字。

    这个建议也适用于使用社交计数器。尽量减少使用自动生成的计数器以最大限度地提高数据库性能。

    像管家一样,微调您的WordPress数据库是一个持续的过程。

    这里有一些数据库优化插件可以让您的工作更轻松:

    提醒:在编辑数据库或WordPress核心文件之前,请务必进行备份

    11. 优化您的商店以获得移动优先体验

    截至2020年1月,全球互联网用户超过40亿。移动互联网用户几乎一样多。预计到2024年将增长到5亿以上。

    数十亿互联网用户

    数十亿互联网用户(图片来源:Statista)

    2019年,移动设备在全球网站流量中超过台式机,占总浏览量的52.6%。在印度和尼日利亚等一些国家,手机占网页浏览量的70%以上

    来自Google Analytics的移动流量统计

    来自Google Analytics的移动流量统计

    根据一项涉及37个国家/地区的500多万在线购物者的研究,智能手机占网站访问量的65%和电子商务订单的46%

    移动购物具有巨大的增长潜力

    移动购物具有巨大的增长潜力(图片来源:Statista)

    令人惊讶的是,手机的转化率还不到台式机的一半。这里有惊人的增长空间。

    对于移动购物者来说,速度非常重要

    对于移动购物者来说,速度非常重要(图片来源:Think with Google)

    您可以先让您的WooCommerce商店适合移动设备。您可以使用Google的移动友好测试工具来检查您的网站是否通过了最低移动可用性标准。

    谷歌的移动友好测试

    谷歌的移动友好测试

    该测试将向您展示您的网站在移动设备上的外观快照。如果发现任何问题,它还会列出任何移动可用性问题。

    使您的 WordPress 网站适合移动设备的最简单方法是使用响应式主题。本文前面提到的所有主题都是开箱即用的响应式,并且在移动设备上看起来很棒。

    移动购物者不喜欢无休止地滚动。因此,请保持您的商店页面尽可能精简。不要用太多的内容过度拥挤它们。

    如果您的商店中有大量产品,请让您的移动购物者更容易通过搜索找到它们。您可以安装WooCommerce Product Search插件,以帮助您的客户使用实时产品过滤器快速找到产品。

    使用筛选器简化产品搜索

    使用筛选器简化产品搜索(图片来源:WooCommerce)

    最后,简化在线购物者的结账体验。下订单的步骤越少,购物体验就越好。以下是一些可以帮助您解决此问题的WooCommerce扩展:

    • WooCommerce Social Login– 无需耗时的帐户创建或登录过程。让您的用户使用他们的社交帐户登录,例如Facebook、Twitter、Google等。
    • Variation Swatches and Photos——告别烦人的下拉菜单来选择产品变体。相反,为您的用户提供所有产品选项的易于点击的按钮。
    • One Page Checkout——不要让您的客户轻易放弃您的网站。让他们无需额外步骤即可立即购买他们想要的东西。如果您认为访客结账非常适合您的商店,那么您可以考虑启用它。
    • Checkout Field Editor– 从结帐页面添加、删除或更改字段。例如,如果您只销售数字产品,则不需要收集送货地址。
    • Bolt/Stripe/Amazon Pay/PayPal——支付是移动购物体验的祸根。您可以从不同的WooCommerce支付网关扩展中进行选择,以更轻松地收款。

    使用Bolt轻松移动结账

    使用Bolt轻松移动结账

    最终,移动购物不仅仅是购买。许多用户主要使用它来查找产品信息和检查/比较价格。为您的移动设备上的用户提供出色的在线商店体验。

    12.禁用Get Refreshed Fragments AJAX请求

    当用户对其购物车进行任何更改时,WooCommerce使用Get Refreshed Fragments AJAX请求来动态更新购物车内容。从用户体验的角度来看,在不重新加载的情况下刷新购物车页面似乎很棒。

    但大多数时候它会减慢网站的速度,主要是那些托管在共享服务器上的网站。另外,很多网站最终都没有使用此功能。

    为了验证,我在Pingdom Tools上测试了一个最新的WooCommerce商店,结果如下:

    请求等待时间很长的例子

    请求等待时间很长的例子

    尽管大小只有1.1KB,但wc-ajax=get_refreshed_fragments请求需要0.76秒才能执行。如果您的网站加载时间不超过3秒,则超过页面加载时间的25%。该测试站点托管在云VPS上,因此您可以想象更便宜的托管计划的加载时间。

    WebNots的这篇文章更详细地介绍了这个问题。您可以使用免费的Disable Cart FragmentsDisable Cart Fragments by Optimocha插件来禁用此征税请求。

    如果您禁用此请求,则建议在您的WooCommerce → Products设置面板中启用“Redirect to the cart page after successful addition”选项。

    启用重定向至购物车页面设置

    启用重定向至购物车页面设置

    启用此行为将确保用户在将产品添加到购物车后被重定向到购物车页面。

    优化WooCommerce管理面板

    速度不仅仅是您商店前端的重要因素。一个活泼的后端对于轻松管理您的商店并在需要时进行快速更改同样重要。

    在您的WooCommerce管理面板上高效工作是提高生产力的关键。它还可以让您腾出时间为WooCommerce商店的成功做更多重要的事情,例如在线营销。

    以下是修复缓慢的WooCommerce仪表盘的几种方法。

    前端优化第一,后端优化第二

    问题是否仅出现在WordPress管理仪表盘而不是整个网站上?如果是后者,则首先应用前面列出的所有优化。

    为什么?因为在大多数情况下,让您的WooCommerce商店在前端加载更快也会优化后端。我们可以将此归因于释放服务器上的资源。

    如果您的管理仪表板在优化前端后仍然滞后,请继续执行以下建议。

    13. 消除臃肿并定期更新所有内容

    确保经常更新WordPress、WooCommerce、插件、扩展和主题。如果开发人员不再支持某个主题或插件,那么是时候考虑放弃它们了。

    同样,如果主题/插件给您的仪表板增加了不必要的膨胀,请开始寻找更好的替代方案。例如,您可能需要考虑替代在仪表盘中投放激进广告的插件

    WordPress管理中的横幅广告示例

    WordPress管理中的横幅广告示例

    这个问题非常普遍,以至于有一些插件专门用于从一些最流行的WordPress插件中消除臃肿。

    14.禁用对象和数据库缓存

    缓存插件是加快WordPress网站速度的好方法。但是,如果配置不正确,它们可能会导致意外结果。这包括减慢您的后端。

    例如,W3 Total Cache是 WordPress 最流行的缓存插件之一。它是免费的,支持大量缓存选项,进行JS和CSS缩小,与CDN集成,并被超过1万个网站使用。

    W3 Total Cache中的缓存选项

    W3 Total Cache中的缓存选项

    W3 Total Cache具有以下缓存选项:

    • 页面缓存。
    • 操作码缓存。
    • 数据库缓存。
    • 对象缓存。
    • 浏览器缓存。
    • 片段缓存。

    有很多选项令人困惑,尤其是对于不了解每种缓存类型的初学者。

    对象和数据库缓存通过减少数据库查询的数量来加速网站,但这样做的代价是将工作卸载到服务器的内存中。

    理想情况下,如果您的托管服务器足够智能或功能强大,这应该不会造成问题。

    不幸的是,并非每个托管服务提供商都是如此

    在这种情况下,您需要依赖第三方缓存插件,例如W3 Total Cache。其简单的设置使得只需单击一下即可启用所有类型的缓存变得超级容易。

    W3 Total Cache → General Settings面板中,禁用对象缓存和/或数据库缓存。然后检查您是否发现管理面板的响应能力有任何改进。

    禁用数据库和对象缓存

    禁用数据库和对象缓存

    尝试缓存并不像在插件设置中勾选或取消选择选项那么简单。您还应该在进行更改并刷新旧缓存后检查您的网站是否正常工作。

    15.删除资源使用率高的插件

    一些WordPress插件在你的网络服务器上是一个很好的资源占用。它们最终会使用您服务器的大部分CPU和RAM。

    您可以使用免费的Query Monitor插件来查找麻烦的插件。它将向您显示您的网站正在加载的所有脚本、样式和HTTP API调用,以及它们的大小和加载时间。寻找具有最多请求和最慢加载时间的请求。

    在下面的测试站点上,经典编辑器插件在管理端加载最慢。其他插件,如LoginizerAll-in-One WP MigrationWP Bakery(以前称为 Visual Composer)也显示为潜在的膨胀。

    Query Monitor可帮助您解决性能问题

    Query Monitor可帮助您解决性能问题

    我发现迁移和经典编辑器插件是不必要的。删除这两个插件大大提高了管理速度。

    拥有国际受众的WooCommerce商店使用WPML等翻译插件以多种语言动态地为网站提供服务。这是一个很棒的插件,有很多功能,但它也会大大降低你的后台管理速度

    通过切换到Polylang等精益翻译插件,您可以获得一些性能优势。它没有那么多功能,但适用于大多数用例。

    具有大量正在进行的进程/扫描的插件会减慢您的WordPress后端。一些示例包括站点地图生成器、分析图表和图表、页面构建器和聊天插件。

    Tips: 如果您安装Query Monitor,请记住在完成后将其卸载,因为它使用大量服务器资源来执行扫描。

    16. 为WordPress使用正确的CDN设置

    CDN有助于以闪电般的速度为您的WooCommerce商店服务于世界各地的用户。它通过保存站点资源的快照并将它们从最近的服务器传送给用户来实现这一点。

    大多数CDN默认禁用WordPress后端的缓存。但是有些CDN没有,这会大大降低商店的管理面板速度。在这种情况下,您需要从CDN的缓存中排除您的管理仪表板以提高其性能。

    如果您使用Cloudflare,您可以设置页面规则以禁用WordPress管理页面上的Cloudflare功能。以下是如何做到这一点:

    1. 转到Cloudflare仪表板下的Page Rules部分。
    2. 在URL字段中添加*example.com/wp-admin/* 。
    3. 在设置字段中,选择Cache LevelBypass选项。
    4. 您还可以添加额外的设置,例如Disable PerformanceDisable Security(不推荐)。这些设置是可选的。
    5. 然后单击Save and Deploy

    Cloudflare页面规则绕过WordPress管理员

    Cloudflare页面规则绕过WordPress管理员

    设置生效大约需要3分钟。

    如果您使用KeyCDN,那么您可以使用他们的WordPress Cache Enabler Plugin来做同样的事情。对于其他CDN,请联系他们的支持以解决此问题。

    17. 简化WordPress心跳API

    WordPress Heartbeat API通过保持浏览器和服务器之间的定期连接来实现近乎实时的更新。API每15-60秒向服务器发送一次请求,然后在接收到数据时触发事件(或回调)。

    它允许一些惊人的功能,例如自动保存文章、锁定文章和登录过期警告。但是,当您以管理员身份登录时,每分钟向服务器发送一些请求可能会减慢您的管理面板。

    WP Rocket的免费Heartbeat Control插件允许您在仪表盘、前端和文章编辑器上管理这些API请求的频率。它甚至为您提供了完全禁用API的选项。

    修改或禁用WordPress Heartbeat API

    修改或禁用WordPress Heartbeat API

    从增加时间频率开始。如果这不能解决您的WooCommerce后端的速度问题,请考虑禁用心跳API。

    如果应用上述所有优化仍然不能解决您的WooCommerce商店的速度问题,那么……

    WooCommerce速度始于优质托管

    就像开一辆轮胎漏气的汽车一样,无论您进行多少优化,如果您的网站托管在糟糕的服务器上,它都不会变得更快。您网站的很大一部分性能取决于您的托管服务器质量。

    WordPress网站有不同类型的托管,分为两大类:托管和非托管。第一个对于大多数用户来说是完美的,因为托管服务提供商会处理 WordPress 的所有服务器优化。后者更适合能够自行调整和管理服务器的技术熟练的用户。

    对于WooCommerce网站,如果您没有专门的服务器运维技术人员,请选择WordPress托管服务器。但一般情况下,托管主机往往比非托管主机更昂贵。

    您可以从4种主要类型的WordPress托管主机中进行选择。每个都有自己的优点和缺点,所以选择一个符合你的预算和目标的。我在下面的信息图中比较了它们的各种功能。

    托管WordPress主机的4种主要类型

    托管WordPress主机的4种主要类型

    每种类型的托管都可以在多个计划下以不同的价格提供。因此,在您的预算范围内寻找主机时,请查看提供的功能以确定它是否满足您的要求。

    WooCommerce网站本质上是令人难以置信的动态。它们会生成大量无法缓存的数据和请求。

    例如,结帐页面对每个用户都是唯一的,不能从缓存中提供。因此,服务器需要足够强大才能顺利运行您的网站,即使您的网站吸引的流量较低。

    在决定WooCommerce托管计划时应注意的推荐功能是:

    • 具有WooCommerce特定缓存规则的服务器级缓存。
    • 2到4个PHP worker来处理WooCommerce的未缓存请求而不会超时。
    • WordPress内存限制为128MB或更多。
    • 可扩展的基础架构,可处理流量和负载的激增。
    • 每日自动备份(首选每小时),以确保您的电子商务数据安全可靠。
    • 一个完全安全的托管平台,具有定期恶意软件扫描、IP地理定位和滥用IP阻止、免费SSL、SFTP、SSH、HTTP/2和TLS 1.3等安全功能。
    • Nginx或LiteSpeed网络服务器软件。
    • 支持开发人员友好的功能:PHP 8、LXC容器、WP-CLI、Git、MariaDB、暂存环境等。
    • 数据中心的正常运行时间长,分布在世界各地。选择一个服务器靠近目标受众的地方。
    • Cloudflare集成以提高性能和安全性。
    • 可靠的24/7支持团队可快速解决任何问题。
    • 出色的用户评论和出色的业绩记录。

    考虑到这些要求,您可以安全地消除共享主机。

    虚拟专用服务器 (VPS)类似于共享主机,只是您在共享服务器中拥有一个专用于您的虚拟空间。如果您的预算有限,您可以开始使用中档VPS计划。但是,如果您的网站吸引了更多流量,那么您将不得不尽快升级。

    这给我们留下了云托管专用服务器选项。如果它们满足您的要求,两者都非常适合WooCommerce网站。

    与云托管计划相比,专用服务器计划的价格偏高,其范围从每月50美元到每月数千美元不等。

    如果您在营销上花费了大量资金,那么如果您的网站速度很慢,那么您将推销所有潜在客户,因此非常值得选择最快的WordPress托管解决方案。

    最终,您最好每月在优质托管上多花几美元,而不是花费数小时拉扯头发并想知道为什么您的网站仍然有很高的跳出率。

    小结

    对于电子商务网站来说,时间就是金钱。快速的WooCommerce商店可提升用户体验、SEO、收入和投资回报率。

    虽然您不必遵循本文中列出的所有速度优化技巧,但我建议您阅读所有这些技巧。这将帮助您识别站点中的任何瓶颈。没有人喜欢等待网站加载。通过缓存等方式优化WooCommerce,获得最佳WooCommerce速度,提升电商网站性能!

  • 为什么WordPress慢?让我们弄清楚问题的根源!

    为什么WordPress慢?让我们弄清楚问题的根源!

    弄清楚WordPress速度慢的原因可能具有挑战性。WordPress网站涉及许多部分,从其Web服务器和相关设置到各种主题和插件。这也可能是由于未优化的内容,例如图像、视频和嵌入。

    但是你怎么能找出导致性能问题的原因呢?很难马上说问题出在哪里——有多种可能性,我们将在这篇文章中探讨它们。

    我们不会仅仅停留在找出您的WordPress网站运行缓慢的原因。您还将学习许多加快慢速WordPress网站的方法。

    1. 为什么WordPress慢?
    2. 确定WordPress网站是否运行缓慢的4个步骤
    3. 改善WordPress网站速度的17种方法

    为什么WordPress慢?

    一些Web开发人员完全忽略了WordPress,理由是它有多慢。虽然以前可能是这种情况,但现在已经有一段时间了,这并不是一个准确的说法。如今,许多大品牌都使用WordPress来托管他们的网站。

    但是,许多因素会影响您的WordPress网站的性能。一些最常见的包括:

    • 您网站的网络托管服务提供商
    • 服务器端优化(PHP版本、缓存、压缩等)
    • 缓慢的WordPress主题
    • 缓慢的WordPress插件
    • 未优化的内容(主要是图片)
    • 外部HTTP请求过多
    • 不使用专用资源来提供内容(CDN、视频托管等)

    典型WordPress网站的各种元素

    典型WordPress网站的各种元素

    除了由您的网络托管服务提供商实施的适当的服务器优化之外,您还可以进行许多优化以确保您的网站超快。我们将在本文后面讨论这些,但首先,让我们弄清楚是什么让您的网站变慢。

    确定WordPress网站是否运行缓慢的4个步骤

    1. 第 1 步:运行页面加载速度测试
    2. 第 2 步:对网站进行负载测试
    3. 第 3 步:查看您的WordPress主题和插件
    4. 第 4 步:使用应用程序性能监控 (APM) 工具

    在您的网站上运行测试是确定是什么导致您的网站变慢的好方法 – 无论是您的网络托管服务提供商、网站本身,还是两者兼而有之?让我们来看看您可以运行的一些网站测试。

    第 1 步:运行页面加载速度测试

    您的网站加载速度有多快?任何加载时间超过两秒的网页都不利于用户体验。理想情况下,您的目标应该是加载时间低于1秒——介于两者之间的任何时间都可以,但您应该始终考虑进一步优化它。

    您可以为此目的使用不同的网站速度测试工具 ——GTmetrix、Pingdom Tools、Google PageSpeed Insights和WebPageTest都是不错的选择。

    我将使用GTmetrixPingdom工具 来演示此步骤。

    首先,让我们启动GTmetrix并测试一个网页。选择离您(或您网站的访问者)最近的服务器位置以获得更好的结果(提示: 注册一个免费的GTmetrix帐户以获得更多服务器位置选项)。

    GTmetrix主页

    GTmetrix主页

    在这里,我们正在测试WordPress网站的主页,因为这是大多数用户会访问的地方。此外,主页包含大量内容,因此非常适合测试。

    测试完成后,您将看到如下GTmetrix性能报告。

    GTmetrix报告示例

    GTmetrix报告示例

    GTmetrix根据许多指标对网页进行评分。它还提供了测试期间页面加载方式的可视化时间线。要详细了解它,您必须向下滚动。

    GTmetrix报告的“Summary”选项卡

    GTmetrix报告的“Summary”选项卡

    Summary选项卡突出显示了影响您网站性能的所有主要问题。在这种情况下,最重要的问题是服务器的响应时间。这几乎总是意味着考虑升级您的托管计划或迁移到更好的主机。但是,在你得出这个结论之前,最好先解决所有其他问题并重新审视这一点。

    下一个主要问题是“避免过多的DOM大小”——这是使用页面构建器时的常见问题。另一个问题——“避免大的布局变化”——也可能与页面构建器或主题有关。

    “避免巨大的网络负载”是指负载重的资产,例如图像、脚本和CSS文件。Page Details部分对此进行了快速概述 。在这里,您可以看到总页面大小和页面请求数非常高。

    不使用CDN在降低WordPress网站速度方面起着另一个关键作用。

    单击“Performance 选项卡将为您提供更多由浏览器和Lighthouse性能报告的指标。

    GTmetrix报告的Performance选项卡

    GTmetrix报告的Performance选项卡

    正如你所看到的,这个测试网页没有什么好做的。转到报告的StructureWaterfall选项卡将为您提供更多见解。

    接下来是Pingdom Tools,另一个流行的速度测试工具。我们将在这里再次测试同一个站点的主页。

    Pingdom Tools网站速度测试工具

    Pingdom Tools网站速度测试工具

    Pingdom Tools使用自己的算法来测试网页。这个网站的结果看起来也不是很好。

    Pingdom Tools速度测试结果

    Pingdom Tools速度测试结果

    进一步向下滚动将向您展示如何提高网站的性能。扩展每条建议将为您提供有关可以改进的地方和方式的更多详细信息。

    Pingdom的性能改进建议

    Pingdom的性能改进建议

    由于每个速度测试工具都有自己的性能指标,因此您无法直接将一个速度测试的结果与另一个进行比较。所以,无论你选择什么,最好还是坚持一个。

    最后,您还应该考虑网站的感知性能和实际性能之间的差异。阅读我们关于运行网站速度测试的深入文章以获取更多信息。

    第 2 步:对网站进行负载测试

    对您的网站进行负载测试将揭示有关它在现实世界中的速度的新信息。我们将为此使用k6  ,这是一个免费的开源负载测试工具,可以在您的系统上本地运行。

    k6 FOSS速度测试工具

    k6 FOSS速度测试工具

    使用免费的k6版本 需要一些命令行知识,但是一旦你开始使用它就会非常强大。(注: 或者,您可以使用k6的高级云解决方案或更简单的基于云的负载测试工具,如Loader.io

    结合其出色的k6 Reporter扩展,您可以运行负载测试并在HTML中获得精确的结果:

    k6负载测试结果——请求指标

    k6负载测试结果——请求指标

    以上结果是针对同一站点进行10分钟的负载测试,最多50个虚拟用户。仪表板还包括其他有用的统计信息:

    k6负载测试结果 - 其他统计信息

    k6负载测试结果 – 其他统计信息

    请注意,大多数请求都失败了,可能表明服务器无法处理它们。

    您还可以在k6脚本中设置阈值和检查(例如,页面加载时间低于1.5秒,用户能否登录等)。这些指标也将整齐地显示在仪表板中。

    下图显示了使用确切条件的另一个站点的负载测试结果,以便为您提供更清晰的画面。

    k6负载测试结果 - 第2轮

    k6负载测试结果 – 第2轮

    有28个失败的请求可能看起来很糟糕,但考虑到请求的总数,情况并非如此。这只是我本地机器发出的所有请求的0.25%。这里的结果表明该站点的网络托管服务提供商可以为相当数量的并发用户提供服务。

    第 3 步:查看您的WordPress主题和插件

    测试您的WordPress网站的主题和插件应该是发现任何主要性能问题的下一个主要步骤。这里有很多种类 – 您经常会发现某些主题和插件比其他主题和插件优化得更好。

    在速度测试部分的前面,我们讨论了在报告中发现有问题的主题或插件。但是还有另一种直接的方法——一次禁用一个主题或插件,然后查看站点的性能(在速度测试、负载测试或两者中)。

    如果性能问题仍然存在,请再禁用一个主题或插件并重新运行测试。继续这样做,直到找到罪魁祸首。

    但是,这种方法不适用于生产站点。拥有一个临时站点在这里真的很有帮助。您可以使用它通过添加、更改或删除特定功能来测试生产站点的各种迭代。

    大多数网络托管服务提供商,尤其是便宜的共享托管计划,默认情况下不提供此功能。因此,您必须手动设置登台站点或使用WordPress登台插件(如WP StagecoachWP Staging)。

    这个登台站点实际上是您的生产站点的精确副本,包括其服务器和服务器端配置。您可以使用它来修补和测试您的网站,而不会影响其实时版本。

    第 4 步:使用应用程序性能监控 (APM) 工具

    APM工具与速度和负载测试工具相结合可以增强您的网站诊断能力。

    无需设置临时站点并逐个猜测要禁用哪个插件或主题,一个称职的APM工具可以帮助您确定性能缓慢的根源——而无需更改站点上的任何内容。它跟踪和分析缓慢的事务、数据库查询、外部请求、WordPress钩子、插件等。

    Kinsta APM

    Kinsta APM

    通常,使用APM工具对初学者并不友好。即使是专业的开发人员也需要一些关于如何有效使用它的培训。另外,总是有额外的成本因素,因为它们中的大多数都需要许可证才能运行。

    最简单直接的方法是,使用免费的Query Monitor WordPress插件

    您可以禁用WP-Cron并将其替换为系统cron以提高站点的性能。

    利用APM工具,您会找到最慢的WordPress插件和钩子。

    APM的“WordPress”标签

    APM的“WordPress”标签

    如果您在此处发现任何不必要的插件,或具有重复功能的插件,您可以将它们从您的WordPress站点中删除。例如,我可以在这里看到两个联系表单插件,以及一个本网站可以不用的投资组合插件。

    向下滚动此选项卡将显示最慢的WordPress钩子。

    显示最慢的WordPress钩子

    显示最慢的WordPress钩子

    跟踪最慢的WordPress钩子是APM最有用的功能之一。您可以单击挂钩项目以查看其事务样本。

    查看慢钩子的事务样本

    查看慢钩子的事务样本

    通过准确了解哪个插件、主题或钩子是性能瓶颈,您可以提高网站性能并减少页面加载时间。

    加速WordPress网站的17种方法

    知道是成功的一半!根据这些知识采取行动,您将看到结果。您已经执行了上述所有测试。现在,让我们探索可以加速WordPress网站的潜在领域。

    您可以使用以下有用的链接跳转到任何部分:

    1. 保持您的WordPress网站更新
    2. 优化您网站的图片
    3. 谨慎使用插件(仅在必要时)
    4. 选择一个快速的WordPress主题
    5. 配置缓存以优化您的网站
    6. 减少外部HTTP请求(和API调用)
    7. 缩小您网站的脚本和样式表
    8. 在每个页面加载时仅加载必要的脚本
    9. 加快您缓慢的WordPress管理仪表板
    10. 服务器位置和配置事项
    11. 使用内容交付网络 (CDN)
    12. 删除不必要的URL重定向
    13. 修复WordPress混合内容警告(HTTPS/SSL错误)
    14. 定期优化您的WordPress数据库
    15. 选择基于云的WordPress安全服务
    16. 升级到最新的PHP版本
    17. 切换到受信任的托管WordPress主机

    1. 保持您的WordPress网站更新

    维护WordPress网站的一个重要方面是保持更新。这似乎是最明显的做法,但仍然值得提醒。

    WordPress更新包括安全补丁、最新功能和性能修复。

    您可以在其wp-config.php文件中为您的站点启用自动更新。我们始终建议更新到最新的WordPress版本以确保您的网站安全。

    同样,您还应该更新所有活动的插件和主题。如果您在您的网站上发现任何超过一年未更新的插件或主题,那么是时候重新考虑其替代品了。

    2.优化您网站的图片

    根据HTTP存档 (2022年3月1日),WordPress网站的中位页面重量为2408KB,其中图像几乎占1117KB(占总页面重量的46.38%)。

    WordPress:图像状态

    WordPress:图像状态。(来源:HTTP存档)

    难怪大图像会减慢您的网站速度,从而产生不太理想的用户体验。因此,手动或使用插件优化图像可以大大加快页面加载时间。

    优化图像时,您可以使用有损或无损图像压缩方法。大多数图像编辑器在保存图像的同时提供质量调整以实现最佳图像压缩。有损压缩几乎总是在保留图像细节和拥有更小的文件大小之间达到完美的平衡点。

    选择正确的图像文件格式至关重要。PNG非常适合计算机生成的图形,而JPEG则更适合照片。还有更多的图像格式,例如GIF、SVG、JPEG XR和WebP。有些浏览器普遍支持,有些则不支持,因此您必须在选择它们之前仔细研究。

    WordPress媒体设置 -> 图像大小。

    WordPress默认支持响应式图片。您可以设置您喜欢的图像大小,让WordPress处理其余的。但是如果你想节省磁盘空间,你可以使用像Imsanity这样的免费WordPress插件来自动将大图像缩小到配置的大小。

    至于WordPress图像优化插件,ImagifyShortPixel 是一些流行的选项。我们在关于优化网络图像的详细文章中列出了更多选项。

    3. 谨慎使用插件(仅在必要时)

    插件是WordPress及其社区的生命。WordPress.org上列出了令人印象深刻的54,000多个免费插件库 ,以及其他地方列出的数千个插件,您可以在安装WordPress插件时陷入困境。

    未优化的WordPress插件会降低您网站的性能,增加页面加载时间。

    尽管如此,您可以在不损害网站性能的情况下安装数十个WordPress插件,但您还必须确保这些插件编码良好并针对性能进行了优化。更重要的是,插件开发人员应该对它们进行优化以使其相互配合。

    WordPress插件推荐列表

    WordPress插件推荐列表

    您可以浏览我们为各种用例精心挑选的最佳WordPress插件列表。无论是SEO插件社交媒体插件联系表单插件还是电子商务插件,您一定会在那里找到有用的东西。

    无论您安装了多少插件,您都可以随时参考本文中的第 3 步和/或第 4 步来确定您是否有任何有问题的插件。

    4. 选择一个快速的WordPress主题

    选择一个快速的WordPress主题对于您的网站性能和用户体验至关重要。主题的功能,如布局、导航菜单、调色板、字体和图像放置,是访问者首先会注意到的。

    如果这些功能没有得到很好的优化,你的网站可能很漂亮,但速度也很慢。

    Hello Elementor是一个流行的WordPress主题

    Hello Elementor是一个流行的WordPress主题

    在选择WordPress主题之前,请列出您想要在您的网站上使用的所有功能。然后研究并记下符合您要求的主题。

    始终寻找具有高评级和出色客户支持的值得信赖的开发人员。我们还建议您避免使用不经常更新的主题。

    无论是免费主题还是高级主题,请选择能够实现您网站目标的主题。为了方便您,我们测试了数十个WordPress主题,包括WooCommerce主题,并列出了表现最佳的主题:

    选择具有重点“主题”的主题, 因为我们经常发现它们简单而轻量级。您可以找到大量实用且美观的主题,而不会产生不必要的臃肿(例如,避免使用半生不熟的页面构建器插件的主题)。

    如果您已经有一个实时的WordPress站点,我们建议您设置一个临时站点并在发布之前测试主题。

    5.配置缓存以优化您的网站

    各种网站缓存的插图

    各种网站缓存的插图

    缓存是一种具有多层的复杂技术。我们有一篇专门的文章来解释什么是缓存。快速总结一下,它是存储和调用经常提供的数据以加快网站速度的过程。

    WordPress在PHP和MySQL上运行,如果您不使用缓存,这两者都会变得臃肿。因此,您的网站速度是您、您的主机和缓存之间的共同努力。

    大多数托管WordPress主机都负责服务器级别的缓存,因此您不必自己实现它。但是,如果他们不这样做,您可以随时使用免费的WordPress缓存插件 (例如WP Super Cache、  W3 Total Cache)。

    缓存和不缓存站点对比

    缓存和不缓存站点对比

    即使没有启用缓存,上述站点的性能也非常出色,因为它经过了合理的优化。但是,启用缓存后,它的性能提高了23%。如果您要为成千上万的唯一访问者提供服务,那么这些加载时间就会加起来。

    6. 减少外部HTTP请求(和API调用)

    您的WordPress网站的主题和插件可能包括对各种资源的外部请求。通常,这些请求用于加载外部托管的文件,例如样式表、字体、脚本等。

    CSS可以是一个渲染阻塞资源

    CSS可以是一个渲染阻塞资源

    有时,它们用于添加分析、社交媒体共享等功能。

    使用其中的一些是可以的,但太多会降低您的网站速度。如果您可以减少HTTP请求的数量并优化它们的加载方式,您就可以加速您的网站。

    有关详细指南,您可以参考我们关于如何减少HTTP请求的文章。

    7. 缩小网站的脚本和样式表

    代码缩小是从代码中删除不必要元素的过程。对于WordPress网站,主要包括缩小JS脚本 和CSS样式表。

    这些元素是代码的一部分,因为它很容易被人类(或Web开发人员)阅读。这种元素的一个简单示例是代码注释。但是,机器(或网络浏览器)不需要这些元素。

    通过缩小您的网站代码,您可以拥有更小的JavaScript和CSS文件。它们不仅加载速度更快,而且浏览器解析它们的速度也更快。它们一起可以极大地提高您的页面加载速度。

    大多数WordPress性能插件 将帮助您毫不费力地做到这一点。一个流行的选项是免费的Autoptimize插件,在撰写本文时,它的活跃安装量已超过1万。

    这种minify发生在Cloudflare 的边缘网络上。它甚至也缓存在那里。由于Cloudflare负责最终缩小代码并将这些文件从最近的边缘服务器提供给访问者,因此它可以释放您的服务器资源。

    8.在每次页面加载时只加载必要的脚本

    大多数WordPress主题和插件资源经常在所有页面上加载和运行,即使在某些页面上不需要它们。例如,联系表单插件可以在每个页面上加载其资产,而不仅仅是在具有联系表单的页面(例如联系页面)上。

    缩小和组合这些脚本可能会稍微提高您的网站性能,但最好首先阻止这些脚本和样式加载。

    我们建议 为此任务使用免费的 Asset Cleanup插件。它将扫描页面上加载的所有资产。然后,您可以选择此特定页面上不需要的CSS和JS文件,从而减少臃肿。

    使用“ Asset Cleanup”插件

    使用“ Asset Cleanup”插件

    资产清理与缓存结合使用效果最佳,因为优化的页面不必由Web服务器重复生成。

    9. 加速你缓慢的WordPress管理仪表板

    通常,后端优化从优化前端开始,因为加速前端几乎总是能解决后端的性能问题。

    如果您的WordPress管理员反应迟缓,您可以反过来做同样的事情——修复后端性能问题可能有助于加快您的网站访问速度。

    在这种情况下,使用服务器级APM工具总是很方便,因为安装额外的插件可能会进一步降低您的网站速度。

    使用Kinsta APM查找最慢的事务

    使用Kinsta APM查找最慢的事务

    高Admin-Ajax使用率是WordPress网站中常见的性能瓶颈。然而,缓慢的WordPress管理员也可能是由于后台WordPress任务,例如WordPress备份、WP-Cron等(如我们之前的示例中所示)。或者它可能是一个臃肿的插件,它在您的管理仪表板中添加了太多的横幅。

    10. 服务器位置和配置事项

    您的Web服务器的位置及其配置会对您网站的速度产生重大影响。

    例如,如果您的网络服务器在美国,您的网站对来自欧洲或印度的访问者的加载速度将比对来自美国的访问者的加载速度慢。

    您可以使用以下方法缓解这种情况:

    • 离您和您网站的大多数访问者最近的网络服务器。
    • 具有广泛全球覆盖范围的CDN 。

    11. 使用内容交付网络 (CDN)

    加快网站速度的最简单方法之一是使用快速可靠的CDN。

    CDN通过直接向您的访问者提供内容来减轻您的Web服务器的负载。这些是一个服务器网络(也称为POP),旨在托管和交付站点内容的副本,例如图像、样式表、字体、脚本和视频。

    Cloudflare CDN

    Cloudflare CDN

    我们建议每个网站至少使用某种类型的CDN来加快其性能。

    提示:如果您的网站使用任何流行的开源JavaScript库(例如 jQuery、D3.js、three.js、Web Font Loader),您可以使用Google Hosted Libraries CDN来加快其交付速度。

    12. 删除不必要的URL重定向

    如果您要使用新帖子和页面更新网站,您的URL结构可能会发生变化。在这种情况下,URL重定向是一件好事。但是,如果您不遵循WordPress 重定向最佳实践,您可能会对您网站的用户体验和搜索引擎优化 (SEO)产生负面影响。

    配置不当的URL重定向最常见的问题是导致重定向链。在某些情况下,这个链是一个无限重定向循环。这种重定向链通常会导致页面加载时间增加。

    有时,错误配置的URL重定向也可能导致错误404“找不到页面” 错误。如果您的网站生成大量404错误,它也会影响您的网站性能,因为这些响应通常不会被缓存。

    我们的蜘蛛分析插件,可帮助您查看重定向和404错误的确切数量。

    蜘蛛统计插件日志列表的404错误和30x重定向故障

    蜘蛛统计插件日志列表的404错误和30x重定向故障

    您可以设计一个有创意的404错误页面来摆脱它,但从长远来看,这对您没有帮助。

    闪电博的错误 404“找不到页面”页面

    闪电博的错误 404“找不到页面”页面

    以下是避免创建不必要的重定向的方法:

    • 使用正确的URL前缀(HTTP或HTTPS)。
    • 保留或删除URL中的“www”子域(不要混淆)。
    • 不要在URL中使用帖子和页面ID 。
    • 包括整个URL路径。
    • 确保您的顶级域 (TLD)在一个重定向中解析(理想情况下,应该没有重定向)。

    WordPress包括许多设置重定向的方法。其中之一是John Godley的免费且流行的重定向插件

    使用免费的WordPress '重定向'插件

    使用免费的WordPress ‘重定向’插件

    如果您的网站通过宝塔面板管理,您还可以从宝塔面板仪表板管理重定向。此工具是设置重定向的更好方法,因为规则是在服务器级别实现的。这也意味着您需要少安装一个第三方插件。

    在宝塔面板中添加重定向规则

    在宝塔面板中添加重定向规则

    转到您要管理的站点,点击设置,然后单击“重定向”选项卡。然后通过单击大的“添加重定向”按钮添加新的重定向。

    如果您的网络主机使用Apache服务器,您需要编辑其.htaccess 文件以设置重定向。对于这种情况,您可以使用.htaccess Generator站点为您的站点生成正确的重定向规则。

    13. 修复WordPress混合内容警告(HTTPS/SSL错误)

    今天必须通过HTTPS协议运行您的WordPress网站。但是,在从HTTP迁移到HTTPS时,您可能会遇到几个问题——最常见的一个是“混合内容警告”警报

    当页面包含HTTP和HTTPS内容时,会出现混合内容警告。不安全地加载资源不仅是一个安全问题,也是一个潜在的性能问题。

    如果您在您的网站上遇到混合内容错误,您可以使用免费工具(如Why No Padlock  )向您显示哪些资源被不安全地加载。

    然后,您可以执行快速搜索和替换以修复所有潜在原因。免费的Better Search Replace插件是解决此问题的一种方法。

    一个简单的搜索和替换应该可以解决您所有的混合内容警告。但如果没有,您可能需要查找并手动更新一些硬编码脚本。或者聘请可以为您做到这一点的开发人员。

    14. 定期优化你的WordPress数据库

    WordPress站点的数据库存储其所有关键信息。但是如果没有定期维护,它可能会降低您的网站速度。

    例如,当您启动网站时,WordPress数据库仍然可以保存多年前的信息。这包括帖子和页面修订、草稿、已删除的评论和已删除的帖子。虽然它们可能有助于编辑和发布最近的帖子,但随着时间的推移,数据库会积累大量不必要的数据并变得臃肿。

    因此,优化您的WordPress数据库对于改善和维护您网站的性能是必要的。

    此外,一些插件和主题将数据添加到wp_options表 中,以便更轻松地配置它们并自动加载设置。但是自动加载过多的数据会减慢页面响应时间。

    您可以使用各种技术来优化WordPress数据库。一种方法是使用phpMyAdmin或Adminer手动清除过时的数据库项目。或者您可以使用WordPress数据库优化插件 ,例如WP-OptimizeWP-SweepAdvanced Database Cleaner

    使用“高级数据库清理器”插件

    使用“高级数据库清理器”插件

    15. 选择基于云的WordPress安全服务

    每天都有成千上万的WordPress网站被黑客入侵。因此,安全性对于WordPress网站来说是一个关键问题,您需要时刻掌握它。

    您有两种使用防火墙保护WordPress站点的主要方法:

    1. 选择具有 良好记录的安全网络托管服务
    2. 使用专门的第三方安全服务来保护您的网站

    第一个选项是明确的。可靠的WordPress托管服务提供商将为您处理大部分网站安全措施。

    但是,如果您必须选择第二个选项,您还有另外两个选择:

    1. 选择WordPress安全插件(例如Wordfence)
    2. 选择DNS防火墙(例如Cloudflare)

    WordPress安全插件因其始终在线和定期扫描要求而耗尽了您网站的资源。

    相反,您可以使用Cloudflare等基于云的安全解决方案。它们还提供针对机器人、DDoS攻击和代理流量的额外保护。

    此外,我们支持双因素身份验证 (2FA) 和IP地理位置阻止。我们还会在一分钟内禁止登录尝试失败六次的IP。此外,我们强制实施完全加密的连接(SFTP、SSH、HTTPS),在所有新的WordPress安装上要求使用强密码,并提供黑客修复保证。

    16. 升级到最新的PHP版本

    WordPress主要由服务器端编程语言PHP提供支持。甚至它的主题和插件也主要是用PHP编写的。

    通常,较新的PHP版本比较旧的版本更快。它们提供了许多性能改进,也更安全。

    年度PHP基准测试发现WordPress在PHP 8.1上比PHP 8.0快47.10% 。与PHP 7.2相比,它更快, 每秒处理超过50%的请求。

    WordPress 5.9-RC2 PHP基准测试

    WordPress 5.9-RC2 PHP基准测试

    在撰写本文时,大多数WordPress插件、主题和开发工具尚不支持PHP 8.1。如果您计划将生产站点的环境升级到PHP 8.1,我们建议您在暂存环境中对其进行彻底测试,以确保它不会中断。

    不过,如果您的服务器仍在PHP 7.x版本上,您可以更新到PHP 8.0并获得大部分相同的好处。

    因此您可以在升级之前在其上彻底测试您的网站。如果您的主机没有让您选择更新到最新的PHP版本,那么是时候重新考虑您的主机提供商了。

    17. 切换到受信任的WordPress主机

    如果您已经尝试了上述所有步骤,但仍然卡在缓慢的WordPress网站上,那么剩下的唯一选择就是切换到可靠的WordPress托管服务提供商。

    通常,WordPress托管具有多种功能,可帮助WordPress网站高效、安全、快速地运行。所有技术知识都留给专家,让您专注于经营业务。

    WordPress托管的计划通常高于共享托管或DIY VPS托管,但您得到的是您所支付的费用。一些流行的托管WordPress主机是Kinsta、WP Engine、Flywheel、Pressable和Pagely。

    无论您最终与谁托管您的网站,都要正确地进行研究并确保它符合您网站的要求。大多数托管WordPress主机还提供免费迁移 ,因此您可以轻松地将当前站点迁移到新主机,而无需任何停机时间。

    小结

    修复缓慢的WordPress网站涉及许多步骤,但您可以做到。拥有一个快速的网站有助于提升您的SEO、用户体验和转化率。另外,每个人都喜欢快速的网站!