分类: 学习

  • 如何解决使用Cloudflare导致WP-Cron不工作问题?

    WordPress定时任务不工作

    WordPress需要一些基本要求,例如MySQL和正确的PHP版本才能正常运行。此外,您还需要额外的设置才能使已安装的插件和主题正常工作。

    WP-Cron是WordPress网站在仪表盘中获取更新和报告所需的此类要求之一。另一方面,Cloudflare是许多托管公司内置的流行的免费CDN服务。

    不幸的是,如果您没有正确配置Cloudflare,它可能会停止WP-Cron作业的运行并导致不希望出现的问题。如果您遇到困难,这里是您可以尝试通过Cloudflare CDN设置以修复WP-Cron无法正常工作的问题。

    更多关于WP-Cron

    Cron是Unix中用于调度作业以在后台完成任务的命令。在WordPress世界中,WP-Cron类似于Unix cron作业,用于以周期性间隔调度任务。与您可以在特定时间安排的系统cron作业不同,WP-Cron在每次页面加载时运行并触发预定任务。以下是一些示例,让您了解WP-Cron的作用:

    • 更新WordPress仪表盘小工具,例如实时销售小工具。
    • 检查处于预定状态的文章并按计划发布。
    • 插件可以在后台运行数据库更新、缓存清除等任务。

    您还可以在此处从官方WordPress页面阅读有关WP-Cron的更多详细信息。

    查找WP Cron问题

    当WP-Cron运行出现问题时,会直接影响定时任务的运行。您可以在仪表盘和服务器的错误日志中看到一些失败通知。下面是一个来自WP Rocket插件的例子,它使用WP-Cron来运行预定的缓存清除。如果不清除缓存,则会因大量过时的缓存内容而减慢您的网站速度。

    WP Rocket Cron作业问题

    WP Rocket Cron作业问题

    您还可以使用WP Crontrol之类的插件来监控和查找站点中与cron相关的问题。一旦您发现WP-Cron存在问题,您应该检查您最近在该网站上所做的活动。如果您启用了Cloudflare或更改了CDN中的任何设置,那么这是开始故障排除的第一个地方。

    在Cloudflare中检查WP Cron问题

    Cloudflare的安全设置允许您阻止恶意机器人。不幸的是,这也可以阻止像WP-Cron这样的自动化活动作为误报。好的部分是您可以根据日志中的IP地址和查询字符串轻松找到它。由于WP-Cron将从您的托管服务器的IP地址运行,您可以根据您的服务器的IP检查被阻止的条目以查找更多详细信息。

    • 如果您不知道服务器的IP地址,您可以从主机面板中找到它。或者,您可以转到Cloudflare帐户的DNS部分并找到带有@的A记录,该记录将指向您服务器的IP地址。
    • 之后,转到“Security>Overview”部分,然后单击“Add filter”按钮。
    • 根据与服务器IP相同的IP地址过滤日志。
    • 在这里,您应该找到显示“ /wp-cron.php ”的“Paths”部分,如下图所示。
    • 您还可以找到其他详细信息,例如阻止的原因,在我们的例子中是“manage defined bots”。

    查找服务器IP的安全详细信息

    查找服务器IP的安全详细信息

    如果您想了解更多详细信息,请在页面上向下滚动并查看活动日志部分。在这里,您可以找到为了解WP-Cron因托管规则设置和托管挑战而被阻止而采取的服务和操作。这取决于您的安全设置,您可能在其中选择了一些带有托管质询的选项。

    查看服务器IP的活动日志

    查看服务器IP的活动日志

    单击“Edit columns”按钮以添加可以显示更多详细信息的其他列。由于IP地址已经存在,请选择“Path”和“Query string”复选框。

    选择路径和查询字符串

    选择路径和查询字符串

    这将添加其他列并向您显示路径和查询字符串。正如您在下面的屏幕截图中所见,路径将显示为/wp-cron.php,查询字符串将显示类似?doing_wp_cron的内容。

    查找路径和查询字符串详细信息

    查找路径和查询字符串详细信息

    相关文章:

    使用Cloudflare修复WP-Cron问题

    现在很明显,Cloudflare安全设置会阻止WP-Cron在您自己的托管服务器上运行。尝试以下选项来解决问题。您可能需要检查您的WordPress仪表盘,使用插件或检查服务器的日志,如上所述,以确认WP-Cron工作正常。

    1.禁用绝对自动化的机器人

    免费Cloudflare帐户有一个简单的“机器人战斗模式”来阻止自动机器人。您可以转到“Security> Bots”部分并关闭此选项并检查WP-Cron是否在您的站点上运行。

    Bots Fight Mode

    在免费Cloudflare帐户中禁用Bots Fight Mode

    如果您使用高级Cloudflare计划,请在“Security > Bots”部分单击“Configure Super Bot Fight Mode”链接。

    在Cloudflare中配置超级机器人战斗模式

    在Cloudflare中配置超级机器人战斗模式

    在这里,您可以看到“Definitely automated”机器人被“Managed Challenge”选项阻止。这是您在活动日志中看到的“Definitely automated”,如上所述。由于WP-Cron肯定是在后台自动化的,Cloudflare会阻塞并造成麻烦。单击下拉菜单并选择“Allow”,Cloudflare将自动保存您的设置。

    允许绝对自动化的机器人

    允许绝对自动化的机器人

    在大多数情况下,这将解决Cloudflare的WP-Cron不工作问题。

    2.禁用WAF下的托管规则

    如果允许机器人不能解决问题,那么下一个选项是禁用Cloudflare自动设置的托管规则。根据您使用的平台,Cloudflare将自动启用某些Web应用程序防火墙 (WAF) 规则来保护您的站点。您可以转到“Security> WAF”部分并在“Managed rules”部分下找到为您的站点启用的规则。只需禁用“Managed rules”选项即可将其关闭。

    在Cloudflare中禁用托管WAF规则

    在Cloudflare中禁用托管WAF规则

    或者,进入页面并仅禁用Cloudflare WordPress规则集。

    禁用Cloudflare WordPress规则集

    禁用Cloudflare WordPress规则集

    现在,检查您的WP-Cron是否在没有来自Cloudflare的WAF规则的情况下运行。

    3. 在IP访问规则中将您的服务器列入白名单

    禁用WAF规则集是有风险的,这可能会破坏Cloudflare安全的目的。虽然您可以使用Wordfence和AIOWPS等插件来添加防火墙,但最好的选择是在Cloudflare WAF设置中允许您网站的服务器IP。当您位于Cloudflare帐户的WAF部分时,请转到“Tools”选项卡。输入您的服务器IP,选择允许和此网站选项,然后单击“Add”按钮。这将添加一个异常并避免阻止您自己的服务器的活动,如WP-Cron作业。

    为绕过Cloudflare防火墙添加IP例外

    为绕过Cloudflare防火墙添加IP例外

    小结

    Cloudflare是流行的CDN和安全服务,但是,它无法识别WordPress站点所需的另一个流行的WP-Cron作业。这是可以理解的,因为插件可以出于不同的原因运行WP-Cron并导致您的站点出现安全问题。

    不幸的是,即使在服务器上手动安排cron作业也无法解决问题,因为插件开发人员可能会使用默认的WP-Cron作业。解决方案是禁用机器人保护或排除服务器的IP地址,这将允许运行WP-Cron作业。

  • 如何解决Elementor加载缓慢问题?

    如何解决Elementor加载缓慢问题?

    Elementor是一个免费的WordPress页面构建器插件,拥有超过500万个活动安装。此外,该插件还具有高级版本和数百个附加组件,可在您的网站中添加精美的元素。

    与任何其他页面构建器插件一样,Elementor添加了自定义样式和脚本,为页面的前端外观添加了令人惊叹的因素。但是,它会在前端和后端影响您网站的页面加载速度的高成本。如果由于Elementor页面构建器而导致网站速度缓慢,您可以尝试以下一些选项来解决速度问题。

    修复缓慢的Elementor插件

    页面速度和用户体验是谷歌搜索算法中的排名因素。因此,与使用拖拽页面速度的Elementor添加美化元素相比,您必须重视加快网站速度。幸运的是,Elementor在插件设置中提供了一些优化功能。此外,您可以优化可能影响Elementor页面加载速度的外部因素。

    使用Elementor设置优化页面速度

    让我们首先探索这些设置,如果这些设置不能解决您的问题,那么您应该检查其他解决方案。

    1. 仅对页面启用Elementor

    默认的WordPress设置允许您创建两种文章类型——文章和页面。此外,像WooCommerce这样的插件将创建产品,您还可以根据需要创建自定义文章类型。我们强烈建议只为页面启用Elementor,而不是为文章和其他自定义文章类型启用。这有助于在前端和后端禁用除页面之外的Elementor资源的加载。当您激活Elementor插件时,它将默认为文章和页面启用。您可以转到“Elementor > Settings”菜单并在“General”选项卡下禁用文章插件。

    为文章禁用Elementor

    为文章禁用Elementor

    2. 使用Elementor Experiments

    该插件在“Experiments”选项卡下提供了许多实验性功能。在这里,您可以看到正在进行的实验以及已完成并被接受为稳定功能的实验。为了提高加载速度,您可以在稳定和持续部分下启用所有与速度相关的项目。

    激活以下正在进行的实验:

    • Improved Asset Loading – 此选项将减少加载的默认代码并仅在需要时动态加载剩余代码。
    • Improved CSS Loading – 这与上面的功能相同,仅在需要时加载CSS。
    • Inline Font Icons – 禁用Font Awesome和eicon的加载并加载内联SVG图标。

    Elementor正在进行的实验

    Elementor正在进行的实验

    激活以下Stable实验:

    • Optimized DOM Output——这将减少HTML wrappers的数量以提高速度。

    Elementor Stable功能

    Elementor Stable功能

    确保在启用正在进行的实验后彻底测试您的网站,因为它们可能会破坏您网站的布局。例如,动态加载资源会影响使用WP Rocket和其他插件删除未使用的CSS等功能。

    3.优化字体使用

    使用Google字体和其他自定义字体会在Google PageSpeed Insights中产生很多问题。例如,当您使用带有Elementor插件的Google Fonts时,您会看到在加载Web字体和预加载字体时使文本可见的警告。幸运的是,Elementor具有内置的字体优化选项,您可以使用它们来提高页面加载速度。

    • 如上所述,使用“Inline Font Icons”来使用“Ongoing Experiments”部分下的SVG图标。
    • 转到“Elementor > Settings > General”部分并启用“Disable Default Fonts”选项。这将有助于禁用Elementor加载的字体,并且该插件将继承您主题的所有元素的字体。
    • 如果您不想禁用Elementor字体,请转到“Advanced”选项卡并为“Google Fonts Load”选择“Swap”选项。这将有助于为每个Google字体文件请求添加“swap”参数,并修复PageSpeed Insights中的文本可见性警告。

    使用外部CSS文件并交换Google字体

    使用外部CSS文件并交换Google字体

    4.使用外部CSS文件

    正如您在上面的屏幕截图中看到的那样,Elementor允许两个“CSS Print Method”选项。一种是使用“External File”,另一种是使用“Internal Embedding”。选择“External File”选项,以便将所有CSS样式作为外部文件加载。之后转到“Elementor > Tools > General”部分,然后单击“Regenerate Files & Data”。这将重新生成数据并作为外部CSS文件加载。它将有助于正确缓存页面并提高速度,而不是动态注入无法缓存的CSS。

    Elementor中的安全模式和文件重新生成

    Elementor中的安全模式和文件重新生成

    5.尝试安全模式

    如果您在创建或编辑页面时遇到加载缓慢的Elementor编辑器,则可以使用“Elements > Tools > General”部分下的安全模式。安全模式会在加载缓慢时在编辑器中显示建议。

    Elementor Editor以安全模式打开

    Elementor Editor以安全模式打开

    同样,您可以启用“Debug Bar”选项来查找页面上加载的模板。当您尝试解决问题时,此信息可用于故障排除。

    6.回滚插件

    最后,如果您在升级Elementor后遇到任何问题,可以选择恢复到以前的版本。与任何回滚一样,请确保备份数据库以备不时之需。转到“Elementor > Tools > Version Control”部分。您可以重新安装当前版本,也可以选择要回滚的任何先前版本。

    回滚Elementor插件

    回滚Elementor插件

    提高Elementor速度的其他因素

    以上所有因素都在Elementor设置范围内,以下是可能影响您网站速度的外部因素。

    7.使用轻量级主题

    尽管Elementor是一个独立的插件,但许多商业主题都将Elementor与其他功能捆绑在一起。由于这些主题是自定义编码来创建页面布局的,因此很容易产生冲突并影响加载速度。我们建议使用带有免费Elementor入门模板的轻量级主题,例如Astra或GeneratePress。

    另一种选择是使用来自同一插件开发人员的Hello Elementor主题。这个主题有超过100万个活动安装,并且在不知不觉中可以与Elementor顺利配合。它具有最小的设计,主要与Elementor模板一起使用。因此,如果您真的喜欢Elementor插件,那么Hello Elementor是您拥有优化网站的最佳主题。

    免费Hello Elementor主题

    免费Hello Elementor主题

    8. 减少附加组件的数量

    有数百个第三方插件可用作Elementor页面构建器插件的附加组件。这些插件将为基础插件添加额外的元素以创建漂亮的布局。但是,这些插件可能无法很好地与父Elementor插件一起使用,尤其是当父插件更新到较新版本时。此外,附加组件将添加额外的CSS/JS并增加HTTP请求。如果您喜欢 Elementor,请转到提供足够元素和模板库的 Pro 版本。避免使用第三方插件来添加一些可能会降低您网站速度的元素。

    如果您想使用附加组件,请使用诸如Ultimate Add-ons for Elementor之类的插件。您可以仅启用所需的小工具并禁用其他小工具以减小文件大小。

    9.检查缓存设置

    首先是确保在使用Elementor时有适当的缓存或优化插件。这将有助于将所有页面作为静态页面提供并提高加载速度。WP RocketPerfmatters是可用于优化Elementor网站的两个最佳插件。但是,在使用WP Rocket或任何其他缓存插件优化CSS交付功能时需要小心。当您在Elementor中添加了动态CSS时,删除未使用的CSS生成关键路径CSS将无法正常工作。

    • 如果您优化网站上的CSS交付,请禁用“Improve CSS Loading”实验并使用外部文件选项。
    • 或者,您可以从CSS优化中排除动态文件。由于动态资源会在每个页面上发生变化,因此您需要使用缓存/优化插件允许的通配符格式排除它们。

    如果您将Elementor用于文章或任何其他自定义文章类型,那么我们强烈建议您使用Perfmatters或Asset Cleanup插件。使用这些插件,您可以在特定文章和站点级别禁用未使用的CSS和JS文件。

    9. Cloudflare Rocket Loader

    当用户从全球访问您的页面时,CDN有助于将您的内容从最近的服务器传送到用户的位置。这适用于Elementor页面和您的整个网站。许多用户使用托管公司提供的免费Cloudflare CDN以及Elementor设置。Cloudflare提供了一项名为Rocket Loader的功能,可帮助改进基于JavaScript的页面的加载。但是,它可能会在Elementor编辑器中以及在已发布的页面上产生问题。如果您发现编辑器在滚动或发布页面损坏时运行缓慢和跳跃,请禁用Rocket Loader功能并检查它是否有效。

    如果Rocket Loader是问题所在,那么您可以使用Cloudflare中的页面规则忽略Elementor页面和模板来解决问题。

    10.优化托管设置

    Elementor和WooCommerce等其他重型插件需要优化的托管来更快地加载您的页面。之前,您需要寻找SiteGround Cloud、 Cloudways或任何其他VPS托管平台来使用Elementor页面构建器。现在Elementor人自己提供了一个优化的托管与谷歌云平台和Cloudflare CDN。尽管这有10万次访问、100GB带宽和20GB空间的限制,但您可以轻松启动网站并以每年99美元的价格购买Elementor Pro。您可以获得针对Elementor的完全优化设置,并且您的网站将使用Hello Elementor等主题快速加载。

    11. 图像优化

    最后,在折叠区域上方使用的大尺寸图像将产生加载最大内容绘画的问题。此外,其他图像如果未正确优化也会产生问题。

    • 减小图像的大小和尺寸,尤其是用于折叠区域上方的图像。
    • 延迟加载图像以仅在用户滚动到该位置时加载它们。
    • 使用WebP格式来减小大小并更快地加载它们。

    小结

    像Elementor这样的插件因拖放元素和有吸引力的可重用模板而变得流行。然而,现在情况完全改变了,与漂亮的页面布局相比,速度是最重要的因素。您可以利用默认的Elementor实验和其他设置来修复缓慢的站点并提高页面加载速度。此外,您还可以尝试他们优化的Hello Elementor主题和高级云托管,让您的网站更上一层楼。

  • 如何解决WordPress由于字体导致预加载关键请求问题?

    如何修复WordPress由于字体导致预加载关键请求问题?

    如今,速度就是一切。浏览器会尝试缓存网页上的内容以加快加载速度。有很多方法可以通知浏览器缓存什么、何时缓存以及缓存内容保留多长时间。

    预加载就是这样一种缓存功能,有助于提高WordPress网站的页面加载速度。但是,这可能会在Google PageSpeed Insights工具中使用的Google Lighthouse报告中产生错误。

    在本文中,让我们解释如何解决PageSpeed Insights中由于字体导致的预加载关键词请求问题。

    如何使用预加载?

    预加载,顾名思义,就是在页面开始加载时,通知浏览器立即开始缓存网页上的资源。这将有助于缓存稍后需要的CSS、脚本和字体。您可以在这篇Google开发人员文章中了解有关预加载的更多信息。

    基本上,preload是HTML链接标签中rel属性的值。以下是在您的网站上使用预加载请求的语法:

    <link href=“font.woff” as=“style”>
    <link href=”font.woff” as=”style”>
    <link href="font.woff" as="style">

    对于网站上加载的每个CSS、脚本和字体文件,您需要在HTML的head标签之间插入此链接标签。

    预加载的Google PageSpeed问题

    虽然预加载会加快加载时间,但应该正确使用。使用PageSpeed Insights工具检查您的网站,看看是否有任何机会因预加载请求而可用。下面是一个示例,显示由于预加载关键请求,您可以节省7.05秒。

    单击向下箭头时,您将看到导致延迟的所有相关内容。在这种情况下,都是网页上加载的字体。

    PageSpeed Insights中的预加载关键词请求错误

    PageSpeed Insights中的预加载关键词请求错误

    WordPress插件和预加载

    现在,您可能会对WordPress网站的Google PageSpeed报告中显示的预加载方式感到困惑。您会收到此错误的原因有很多:

    • 通过在CSS中导入的主题和插件加载字体。
    • 您正在使用像WP Rocket这样的缓存插件来预加载页面但不预加载字体。
    • 您正在使用带有Google AdSense等广告的第三方字体或使用插件在您的网站上加载字体很棒的图标。

    缓存插件将预加载请求键添加到所有资源。但是,使用@font-face在CSS中导入的字体不会使用预加载键请求。PageSpeed显示的错误可能是由于站点加载的字体未使用预加载键所导致。

    如何修复由于字体导致预加载关键请求问题?

    您可以通过在PageSpeed中显示的那些资源的站点标题上手动添加预加载键来消除错误。但是,也有一些插件可以自动在您的标题上插入元标记。我们将解释手动和插件方法。

    使用WP Rocket修复Google PSI中的预加载关键词请求

    首先,我们将使用WP Rocket插件进行说明,因为它很简单,您不需要修改PHP文件。

    使用WP Rocket包括字体预加载

    WP Rocket是一款高级缓存插件,可让您预加载字体。如果您使用的是WP Rocket,请转到“设置 > WP Rocket > Preload”部分。将字体资源的相对URL粘贴到“Preload fonts”文本框下并保存更改。这将帮助您摆脱Google PageSpeed Insights工具中的预加载请求问题。请记住,相对URL的格式应为“/wp-content/themes/your-theme-name/font-file-name”(主题字体)和“/wp-content/plugins/plugin-name/font-file-name”(用于插件加载的字体)。

    在WP Rocket插件中预加载字体

    在WP Rocket插件中预加载字体

    WP Rocket优化了许多其他功能,例如关键CSS生成、DNS预取和在本地托管Google Analytics等第三方脚本。因此,使用WP Rocket之类的插件来提高WordPress网站的整体速度是一个好主意。WP Rocket插件还提供了生成关键路径CSS移除未使用的CSS的选项。

    手动添加预加载元标记

    按照以下步骤在主题的header.php文件中手动插入元标记。我们建议使用子主题,以便在更新父主题时更改将保持不变。

    准备链接元标记

    第一步是获取Google PageSpeed中显示的资源的所有URL。通常,您会看到URL的结尾部分,将鼠标悬停在链接上以查看阻塞资源的完整URL。现在,您可以复制URL并粘贴到文本编辑器中。

    您需要使用以下格式的URL来包含在链接标签中:

    <link rel=“preload” href=“Font URL Showing in PageSpeed” as=“font” crossorigin=“anonymous”>
    <link rel=”preload” href=”Font URL Showing in PageSpeed” as=”font” crossorigin=”anonymous”>
    <link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">
    

    为您的主题和插件使用的每个字体资源准备链接标签。

    在标题中插入链接标签

    下一步是复制所有带有预加载请求的链接标签,并粘贴到网站的标题部分。在您的WordPress网站上,您需要将链接标签粘贴到活动主题的header.php文件中。您可以使用托管帐户中的文件管理器应用程序或使用FTP编辑header.php文件并在标题中插入代码。

    • 使用FileZilla等FTP客户端登录您的托管帐户,或在您的托管帐户中找到文件管理器应用程序。
    • 导航到“/wp-content/themes/yourtheme”文件夹并找到header.php文件。

    编辑header文件

    编辑header文件

    • 编辑文件并在标题部分插入预加载代码。
    • 它将如下所示,记住插入您在Google PageSpeed Insights工具中看到的所有请求。

    在header文件中添加预加载参数

    在header文件中添加预加载参数

    或者,您也可以在管理仪表盘中转到“外观 > 主题编辑器”并编辑文件。我们建议使用子主题并修改header.php文件。如果修改父主题文件,每次更新主题时都需要手动插入这段代码。或者,您可以使用插入页眉和页脚插件等插件将链接标签添加到您网站的页眉,而无需编辑主题文件。

    再次检查PageSpeed

    手动插入链接标签或使用WP Rocket后,请确保清除您网站上的缓存。回来查看PageSpeed Insights,现在您不会看到预加载关键请求错误。

    没有预加载问题

    没有预加载问题

    您可以单击“Passed audits”部分并检查“Preload key requests”问题是否处于通过状态。

    结论

    通常,Google PageSpeed Insights会显示预加载错误,导致页面加载延迟数秒。您可以按照上述步骤手动或使用插件插入预加载链接。这将帮助您从Google PageSpeed中消除错误并提高速度得分。

  • 如何绕过WordPress中的WP Rocket缓存?

    如何绕过WordPress中的WP Rocket缓存?

    WP Rocket是可用于WordPress的最流行的缓存插件之一。它打破了拥有数百个选项的传统规则,并为用户提供了简单易用的界面。您只需切换选项即可在几分钟内加快您的网站速度

    但是,该插件在前端不提供任何选项来禁用页面缓存或绕过特定页面的设置。在本文中,我们将解释如何使用各种方法绕过WordPress中的WP Rocket缓存。

    绕过WP Rocket缓存

    尽管缓存可以帮助用户快速加载页面,但在您执行某些活动时可能会产生问题。以下是您可能希望绕过WP Rocket缓存的一些常见场景:

    • 您想在使用和不使用WP Rocket插件的情况下在Google PageSpeed Insights工具中测试页面速度得分。您可能还想查看在没有缓存的情况下加载了多少CSS或JS文件或进行类似分析。
    • 只想在某些页面上禁用WP Rocket缓存。例如,WP Rocket将无法与WooCommerce和GeneratePress主题一起使用,并使商店页面无响应。您需要在小屏幕上禁用WooCommerce样式才能解决此问题
    • 您想禁用WP Rocket自动的页面级缓存,而没有任何选项可以在前端禁用它。

    根据情况,您可以按照以下选项之一绕过WP Rocket缓存。在大多数情况下,您可能需要在整个站点或页面级别禁用插件而不是绕过。因此,我们将解释禁用和绕过而不停用的可用选项。

    1.完全禁用插件

    简单易用的选项是简单地停用您网站上的插件。您可以完成测试,然后重新激活。好的部分是该插件将保留您以前的所有设置。但是,每次想要测试一些简单的东西时,完全禁用插件并不是一个可行的解决方案。

    请记住,当您想要测试兼容性或想要测试另一个缓存插件时,您应该停用该插件。例如,如果您想测试W3 Total Cache,那么在安装W3 Total Cache插件之前先停用WP Rocket。这些缓存插件将添加像advanced-cache.php这样的插件文件,当两个插件都处于活动状态时,它们可能会相互冲突。结果,您的网站将显示白屏死机或缓存不起作用。

    转到WordPress管理面板中的“插件”部分,然后单击WP Rocket插件下的“停用”链接。单击“Skip & Deactivate”按钮可暂时停用插件而不删除缓存的内容。

    停用WP Rocket插件

    停用WP Rocket插件

    2.禁用特定页面上的插件

    大多数WordPress商业主题都提供页面构建器集成,例如Elementor和Visual Composer。使用页面构建器插件在页面上使用繁重的JavaScript时,缓存会遇到真正的问题。动态动画图表和jQuery数据表等元素可能无法与WP Rocket等激进的缓存插件一起正常工作。最好的解决方案是在缓存有问题的页面上禁用WP Rocket缓存。

    • 转到“文章”或“页面”并在古腾堡编辑器中找到您的文章并进行编辑。
    • WP Rocket将在编辑器中添加一个元框,您可以使用它来更改全局行为。如果您在边栏中没有看到元框,请单击三个点按钮并选择“首选项”。转到“面板”部分并启用“WP Rocket Options”元框。

    启用WP Rocket选项元框

    启用WP Rocket选项元框

    • 在侧边栏中看到元框后,选中“Never cache this page”选项。
    • 发布您的文章,插件将忽略所有类型的缓存页面。

    从不缓存特定页面

    从不缓存特定页面

    您也可以对您网站上的任何其他自定义文章类型执行相同的过程

    3.清除特定页面的缓存

    与排除页面类似,您可能还想简单地删除某些页面上的缓存。默认情况下,每当您更改页面内容并再次发布时,WP Rocket都会清除缓存。但是,在某些情况下,清除可能不起作用,例如当您从文章索引页面更改类别或使用第三方工具更改编辑器外部的内容时。无论如何,我们建议您在分享URL或在Google Search Console中提交之前清除该特定页面的缓存。

    • 转到“文章”部分,找到要删除旧缓存的页面。
    • 将鼠标悬停在标题链接上,然后单击“Clear this cache”选项。
    • 这将删除旧缓存,当再次访问该页面时,WP Rocket将缓存新内容。

    清除特定页面的缓存

    清除特定页面的缓存

    4.从缓存中排除页面

    如果您不想通过转到编辑器来排除页面,您也可以从插件的设置中排除。使用设置的优点是您可以使用不同的选项,如正则表达式或限制特定用户代理访问缓存页面。您可以通过转到“设置> WP Rocket”菜单并导航到“Advanced Rules”部分来忽略页面缓存。

    输入要从缓存中排除的URL

    输入要从缓存中排除的URL

    在同一设置页面上,您可以在“Never Cache User Agent(s)”部分下添加用户代理。

    5.绕过WP Rocket缓存而不停用

    有时,您想测试多个页面绕过缓存而不停用插件。

    • 只需添加?nowprocket参数和要测试访问未缓存页面绕过WP Rocket缓存的页面URL。
    • 例如,如果您的页面URL是“ https://yoursite.com/my-page/ ”,则使用“ https://yoursite.com/my-page?nowprocket ”之类的URL来访问未缓存页面的内容。

    这是绕过WP Rocket缓存并进行兼容性测试来检查页面速度的最佳方法。但是,这不会绕过通过htaccess文件应用的缓存规则。例如,WP Rocket将为浏览器缓存和GZIP压缩应用htaccess指令,当绕过?nowprocket查询时,这些指令可能仍然有效。

    6.禁用页面级缓存

    最后一个选项是永久禁用整个站点或特定页面上的页面级缓存。这是不可取的,因为页面缓存对于提高速度很重要。但是,在某些情况下,如果您有另一个与WP Rocket设置冲突的页面缓存插件,您可能需要这样做。例如,SiteGround提供自动静态缓存缓存(加上浏览器缓存和GZIP压缩)以及来自主机帐户的Nginx直接交付选项。我们已与WP Rocket支持团队确认SiteGround设置上的WP Rocket可以正常工作,没有任何冲突。

    SiteGround中的静态缓存

    SiteGround中的静态缓存

    但是,这可能不适用于所有自定义缓存设置,解决方案是禁用 WP Rocket 的页面缓存,因为您无法快速更改托管设置。不幸的是,这是一个漫长的过程,您需要根据您的要求使用不同的辅助插件。

    6.1 为特定URL启用页面缓存

    请按照以下步骤仅为您网站上的特定页面启用WP Rocket页面缓存。

    • 转到GitHub并下载WP Rocket helper插件,用于带有排除项的页面缓存。
    • 解压缩存档文件并编辑“wp-rocket-no-cache-with-exception-urls.php”文件。
    • 他们在该文件中包含了从第24行到第27行的三个示例包含URL,如下所示。您可以将“example.com/page-one/”和其他两个示例行替换为您的域的URL。如果需要,您可以在该块之间添加更多行。

    包括用于页面缓存的URL

    包括用于页面缓存的URL

    • 保存文件并将其与自述文件一起再次归档为ZIP文件夹。
    • 转到您的WordPress管理面板,上传插件并像您网站上的任何其他插件一样激活。

    现在WP Rocket不会在整个站点上进行页面缓存,除了助手插件文件中列出的URL。

    6.2 仅在特定页面上禁用页面缓存

    除了上述方式,您可以使用备用帮助插件仅在某些页面上禁用页面缓存。

    • 您可以下载帮助插件并编辑“wp-rocket-no-cache-for-page.php”文件。
    • 在这种情况下,您必须通过替换文件中的示例ID 1、2在第29行输入文章或页面ID。
    • 保存文件并再次压缩以上传到您的站点。
    • 激活插件以仅在提供的文章或页面ID上禁用页面缓存。

    在特定页面上禁用页面缓存

    在特定页面上禁用页面缓存

    6.3 完全禁用页面缓存

    如果您想毫无例外地禁用整个站点上的页面缓存,请使用此帮助插件。您可以简单地在您的网站上上传并激活它,而无需修改插件的文件内容。

    6.4 为登录用户禁用页面缓存

    上述两种方法都为未登录您网站的普通用户禁用页面缓存。但是,WP Rocket还提供了为登录用户创建单独缓存的功能。您可以在“Cache > User Caching”部分启用此选项。

    用户缓存已启用

    用户缓存已启用

    如果您想为登录用户禁用页面缓存,请使用此帮助插件。您无需修改​​内容,只需上传zip文件并激活帮助插件即可。请记住,您需要使用此插件以及上述方法之一来禁用登录和注销用户的页面缓存。

    要记住的要点

    通常,只要您的站点发生更改,WP Rocket就会清除缓存。但是,我们建议您在再次尝试测试页面之前删除以下缓存内容。

    • 通过在Windows中按“Control + Shift + Delete”和在macOS中按“Command + Shift + Delete”来删除浏览器的缓存。这将打开删除浏览历史记录弹出窗口,您可以在其中从浏览器中删除以前缓存的文件。但是,这会将您从WordPress管理面板中注销,因为会话cookie将过期。因此,请先保存所有更改并注销,然后再清除浏览器的缓存。最好的选择是使用备用浏览器进行测试,这样您就可以在不注销的情况下进行并行测试。
    • 如果在您的站点上处于活动状态,请从任何其他插件中删除缓存。如前所述,所有SiteGround站点都预装了SG Optimizer插件。因此,您需要在进行测试之前清除SG Optimizer缓存。
    • 最后,如果在您的托管服务器上处于活动状态,则清除服务器级缓存。大多数提供清漆或自定义缓存设置的托管公司就是这种情况。

    小结

    如您所见,通过在您的URL中添加参数来绕过WordPress站点中的WP Rocket缓存是一项简单的任务。您还可以从插件的全局设置或编辑器元框中排除单个页面。但是,完全禁用页面缓存或在特定页面上禁用页面缓存是一项需要帮助插件的棘手任务。确保根据您的需要选择正确的方法以获得正确的结果。

  • 如何彻底卸载删除W3 Total Cache插件?

    如何彻底卸载删除W3 Total Cache插件?

    W3 Total Cache (W3TC) 是WordPress网站最受欢迎的缓存插件之一。它通过缓存WordPress安装中的每个元素来开箱即用,并有助于加快网站速度。但这只有在您正确配置设置时才会发生,否则可能弊大于利。此外,托管在共享托管平台上的网站应小心启用许多选项以避免帐户终止。

    不管是什么原因,如果W3 Total Cache不适合您,那么删除过程并不像您想象的那么简单。在本文中,我们将解释如何从您的WordPress安装中完全卸载删除W3 Total Cache插件。

    如何彻底删除W3 Total Cache插件?

    以下是要遵循的步骤:

    1. 清除所有缓存
    2. 停用并删除插件
    3. 检查您的.htaccess文件
    4. 删除缓存文件夹
    5. 删除W3tc配置文件夹
    6. 删除升级文件夹
    7. 删除object-cache.php插入文件
    8. 从CDN服务器清除缓存

    1. 清除缓存

    在删除任何缓存插件之前,您应该做的第一件事是清除缓存文件。对于W3 Total Cache,转到顶部栏上的“Performance”菜单,然后单击“Purge Everything”选项。

    请记住,此清除所有内容不会从服务器中删除任何缓存的内容。

    2. 停用和删除插件

    与删除任何其他插件类似,只需在“插件 > 已安装插件”下“停用”插件即可。一旦停用,然后点击“删除”以从“/wp-content/plugins/”文件夹中删除插件文件夹。

    停用和删除W3TC插件

    停用和删除W3TC插件

    3. 检查.htaccess文件

    W3TC将在.htaccess文件中创建许多指令来控制缓存行为。每个部分都将以“#BEGIN W3TC Page Cache core”和“#END W3TC Page Cache core”之类的注释开始和结束。

    确保删除插件后在您的 .htaccess 文件中没有残留条目。

    删除其他目录

    W3TC在“/wp-content/”文件夹下创建了许多其他目录,如下所示。您应该删除所有这些目录和子目录以进行清理。我们将在本文的其他部分对此进行解释。

    残留的W3TC文件

    残留的W3TC文件

    4. 删除缓存文件夹

    W3TC将在“/wp-content/”下创建一个“Cache”文件夹,并存储您网站的所有缓存内容。此处的内容取决于启用的设置。每种启用的缓存类型都会在此处创建一个目录。例如,启用页面缓存、数据库缓存和对象缓存将创建三个不同的文件夹并分别存储内容。

    W3TC缓存目录的内容

    W3TC缓存目录的内容

    根据您网站的大小,您将在每个文件夹中看到大量子目录。在共享主机环境中,这将导致违反限制文件数和目录数的条款。由于文件数量众多,删除这些缓存的内容也不是一件容易的事。

    相关阅读: 在W3TC中排除页面和目录?

    5. 删除W3TC配置文件夹

    该插件将所有保存的配置设置存储在“/wp-content/plugins/W3TC”目录之外。这将有助于插件在删除并再次安装时恢复设置。当您决定完全摆脱插件时,请删除文件夹“/wp-content/w3tc-config”。

    6. 删除升级文件夹

    W3TC还在“/wp-content/”目录下创建了一个“Upgrade”文件夹。我们认为此文件夹用于保存与升级的高级版本相关的设置。确保也删除此文件夹。

    7. 从CDN中删除缓存文件

    除了删除所有相关文件外,如果您使用CDN,请确保从CDN中清除缓存的内容。当您在W3TC设置中启用最小化选项时,这是必需的。您应该从CDN服务器中删除压缩和组合的脚本和CSS文件,以避免站点在浏览器上中断。

    8. 删除object-cache.php文件

    它并没有就此结束。W3TC还为其对象缓存添加了一个“drop-in”插件。文件名为“object-cache.php”,可在“/wp-content/”文件夹下找到。我们还建议删除此文件。当您安装另一个缓存插件时,他们很可能会再次创建这个“drop-in”。

    小结

    如前所述,在您的WordPress网站上安装W3TC插件很容易。但是从管理面板中删除它并不容易。您应该使用FTP访问后端服务器以完全删除文件。这与许多缓存和安全插件的情况相同。至少有一件好事是W3TC不创建任何MySQL数据库表。因此,在尝试在您的网站上安装不必要的插件之前,请注意这一事实。您还可以查看其他可用的缓存插件,为您的站点选择最佳的。

  • 从W3 Total Cache插件缓存中排除页面和目录

    W3 Total Cache缓存设置

    W3 Total Cache是WordPress的顶级免费缓存插件之一,活动安装量超过100万。但是,它需要在您的站点上进行正确设置才能缓存页面并正常工作。不同部分下有数百种可用设置,您很容易迷失方向。在设置中很容易出错,这会影响页面速度并破坏您网站的布局。特别是当您在页面上使用大量JavaScript时,您应该在部署到实时站点之前在您的登台或测试站点上彻底测试W3 Total Cache (W3TC)。当您发现某些页面布局错乱并希望将它们从缓存中排除时,下面是详细的教程。

    为什么要排除特定页面和目录?

    从缓存中排除特定页面或目录以进行正确加载的原因有很多。这取决于您在网站上使用的主题和插件。以下是W3 Total Cache插件遇到问题的一些常见案例:

    • 当您拥有WooCommerce插件时,产品和购物车页面通常会因W3TC缓存而中断。
    • 使用带有jQ​​uery或JavaScript的slideshow轮播会破坏缓存,并且无法正确加载,尤其是在移动设备上。
    • 大多数页面构建器插件(如WPBakery)附带的博客轮播元素无法在W3TC中正常工作。

    如果您使用严重依赖jQuery的主题,则需要禁用JavaScript的最小化(minification)才能正确加载页面。幸运的是,W3TC提供了一个使用通配符排除页面和目录的选项,以便您可以轻松地将它们从缓存中排除。

    觉得W3 Total Cache设置复杂的朋友,可以尝试WP Rocket高级插件来加速您的网站。您会对最小的设置和网站页面速度得分的提高感到惊讶。

    从W3 Total Cache插件缓存中排除页面和目录

    登录到您的WordPress管理面板并导航到“Performance > Page Cache”部分。向下滚动到“Advanced”部分并查找“Never cache the following pages”选项。

    W3 Total Cache Page Cache高级设置

    W3 Total Cache Page Cache高级设置

    您将看到插件已经在文本框中添加了几行,如下所示。

    wp-.*.php
    index.php
    wp-.*.php
    index.php
    wp-.*.php
    index.php

    在“Never cache the following pages”文本框中输入页面URL和目录,以将它们从缓存中排除。再次,向下滚动到底部并单击“Save Settings & Purge Caches”按钮以清除旧缓存并保存您的更改。

    如何输入页面URL和目录?

    W3 Total Cache允许通过多种方式进入要从缓存中排除的页面和目录。您可以使用URL、目录名称、通配符和正则表达式格式。输入您的详细信息时,请确保遵循以下准则:

    • 每行输入一个整体,可以是页面URL或目录。
    • URL和目录作为相对URL输入到您的域。这意味着您需要忽略站点地址,只输入剩余部分。

    以下是您可以输入的一些示例排除规则:

    排除格式 预期结果
    /showcase* 域名后以/showcase开头的任何内容都不会被缓存
    /shop* * 所有商店页面将被忽略
    /demo/ 只有演示目录将被忽略
    /post-name/ 指定文章URL不会被缓存
    /page-url/ 指定页面URL不会被缓存

    从缓存中排除内容的其他可能性

    除了不包括文章、页面和目录之外,W3 Total Cache插件还允许其他一些可能性。这些选项在“Advanced”下的“Page Caching”菜单可用。

    排除指定类别的文章

    您可以通过在“Never cache pages associated with these categories”文本框中提及类别标签来排除指定类别下的所有文章。例如,如果您有一个名为“技术”的类别,那么只需将其slug填入,不带前导或尾随斜杠。该插件将从缓存中排除“技术”类别下的所有文章,用户将查看非缓存页面。

    根据W3TC中的类别排除文章

    根据W3TC中的类别排除文章

    排除带有指定标签的文章

    与类别类似,您可以根据标签忽略缓存中的文章。请记住输入不带斜线的标记段。

    Exclude-Caching-Based-on-Tags-in-W3TC

    在W3TC中排除基于标签的缓存

    排除基于作者的文章

    在“Never cache pages by these authors”框中每行输入一个作者姓名。这将从缓存中排除指定作者的所有文章。

    根据作者姓名排除页面

    根据作者姓名排除页面

    根据自定义字段排除文章

    自定义字段是您可以在WordPress中存储相关数据的附加字段。您可以使用Gutenberg或经典编辑器中可用的默认WordPress自定义字段将自定义字段添加到您的文章和页面。稍后,您可以根据您在编辑器中添加的自定义字段将页面从缓存中排除。条目的格式应类似于“custom filed=value ”,如下所示。

    根据自定义字段排除页面

    根据自定义字段排除页面

    小心其他选项

    如前所述,W3 Total Cache插件的问题是您很容易对设置感到困惑。就在“Never cache….”下方。选项,您会发现更多与排除页面无关的选项,实际上,它们用于包含在缓存中。

    • 还有另一个选项称为“Cache exception list”。该插件将缓存您在此框中输入的任何URL或目录,无论您是否使用上述排除方法之一进行了排除。因此,当您从缓存中排除页面时,请确保保留此框。
    • 此外,“Non-trailing slash pages”选项对于包含没有尾随斜杠的页面进行缓存非常有用。通常,您可以使用它来缓存XML站点地图和其他在WordPress中没有斜杠的文件。因此,要从缓存中排除页面,您不应在此框中输入URL或目录。
    • 最后,保留“Specify page headers”部分,它也用于缓存页面,而不是用于排除。

    W3TC缓存选项

    W3TC缓存选项

  • 如何从WordPress网站彻底卸载删除WP Rocket插件?

    彻底删除WP ROCKET

    随着谷歌追求速度,像WP Rocket这样的缓存插件在WordPress博主中变得流行起来。通常,WP Rocket可与流行的主题和页面构建器插件无缝协作。

    但是,如果设置不正确或与您网站上的其他插件发生冲突,它可能会产生问题。如果您想摆脱WP Rocket插件,这里有一个完整的指南,介绍如何从您的WordPress网站上完全卸载删除WP Rocket

    为什么您可能需要删除WP Rocket插件?

    该插件虽然具有简单的用户界面;但是,您可能会在缓存和支持方面遇到以下问题:

    • 设置WP Rocket后,您可能会发现Google PageSpeed Insights工具中的页面速度是降低而不是提高。
    • 您发现该插件破坏了您网站的布局。
    • 没有禁用某些功能(如页面缓存)的选项。该插件默认缓存所有页面,您需要安装额外的帮助插件来禁用页面缓存。
    • 删除未使用的CSS等新引入的功能将创建会增加数据库大小的表。
    • 移动缓存可能会给无响应的网站带来问题,尤其是使用WooCommerce插件创建的电子商务商店。
    • 关键CSS,删除未使用的CSS选项将造成渲染阻塞资源问题,而不是提高移动速度。
    • 如果您使用的是SiteGround托管,您有一个免费的SG Optimizer插件,它提供了类似的WP Rocket功能。因此,您可能想要摆脱WP Rocket设置。同样,许多托管公司提供自定义缓存解决方案,而WP Rocket可能无法有效工作或将变得多余。
    • 开发人员的支持恶化,您需要等待3天才能得到回复。以前,您可以直接从WordPress管理面板提出票证。但是,现在您需要登录他们的网站并提出问题。不幸的是,您甚至不会在提出工单后收到一封礼貌的回复电子邮件,并且除非他们回复,否则无法跟踪您的问题的状态。

    不管是什么原因,清理您网站上的WP Rocket残留物比您想象的要艰巨。

    从您的WordPress网站中删除WP Rocket插件

    在我们之前的文章中,我们已经解释了如何删除W3 Total Cache插件。W3 Total Cache和WP Rocket等缓存插件会创建许多文件夹,安装插件插件,在htaccess文件中插入指令并创建缓存文件夹。不幸的是,简单地删除插件并不能完全删除插件留下的所有这些残留物。您必须手动清理它们才能从安装中删除插件。

    如果最新的更新为您的站点带来了问题,那么回滚WP Rocket插件而不是完全删除是个好主意。您可以通过导航到WordPress管理面板中的“设置 > WP Rocket > Tools”部分回滚到以前的主要版本。您将在“Rollback”部分下看到一个“Reinstall Version Number”按钮,然后单击它以将插件恢复到以前的主要版本。

    回滚WP Rocket插件

    回滚WP Rocket插件

    按照以下步骤从您的WordPress安装中完全摆脱WP Rocket插件。

    第 1 步 – 停用任何其他缓存插件

    几乎所有缓存插件都使用一些常见的设置,例如使用插件插件和在wp-config.php文件中添加条目。因此,卸载WP Rocket并删除相关文件会影响其他缓存插件的常用功能。一般来说,缓存插件应该重新生成条目并添加插件插件。

    但是,为了避免混淆,请在删除WP Rocket之前先停用您网站上的任何其他缓存插件。稍后,您可以激活应该插入所需条目并创建插件的其他缓存插件。

    Step2 – 卸载和删除插件

    作为第一步,您需要从您的WordPress网站上卸载该插件。

    • 登录到您的管理面板并转到“设置 > WP Rocket > Dashboard”部分并首先清除您缓存的文件。

    清除WP Rocket缓存

    清除WP Rocket缓存

    • 然后导航到“插件>已安装插件”部分,然后单击“WP Rocket”插件下的“停用”。
    • 选择“Skip & Deativate”按钮以停用插件。

    停用WP Rocket插件

    停用WP Rocket插件

    • 之后,单击“Delete”选项将其从您的站点中删除。

    虽然这应该卸载并删除所有与插件相关的文件,但请检查以下内容以确保插件没有剩余。

    Step3 – 删除Drop-ins插件

    激活WP Rocket插件时,它还会安装“advanced-cache.php”文件。这是一个带有单个php文件的插件插件,您可以在“插件 > 已安装插件 > Drop-ins”部分下看到该文件。如果您看到该文件仍然存在,请确保在删除WP Rocket插件后将其删除。

    WP Rocket插件Drop-ins

    WP Rocket插件Drop-ins

    Step4 – 删除缓存内容

    WP Rocket将在“/wp-content/”文件夹下创建两个文件夹,如果存在则应将其删除。

    • 登录到FTP并导航到“/wp-content/”文件夹。
    • 删除包含您网站上所有缓存页面的“/wp-content/cache/”文件夹。
    • 此外,删除包含所有插件设置的“/wp-content/wp-rocket-config/”文件夹。

    删除WP Rocket文件

    删除WP Rocket文件

    请注意,您也可以在此处删除“advanced-cache.php”插件文件。

    Step5 – 删除htacces条目

    WP Rocket在htaccess文件中添加了GZIP压缩浏览器缓存和许多其他指令。这些参数将覆盖服务器上可用的任何其他缓存设置。

    • 当您远程登录到服务器时,导航到WordPress安装的根目录。这通常应该是“/public-html/”文件夹,除非您在子目录中安装了WordPress。
    • 使用Visual Studio Code等代码编辑器应用程序查找并打开.htaccess文件。请记住,此文件可能不可见,因为它没有名称,只有扩展名。因此,您需要使隐藏文件在您的FTP软件中可见以便编辑文件。
    • 检查#BEGIN WP ROCKET和#END WP ROCKET块之间文件中存在的任何条目。您可以安全地删除块、保存文件并将修改后的文件上传回服务器。

    删除WP Rocket htaccess条目

    删除WP Rocket htaccess条目

    测试您的站点是否正常运行,以确保其他.htaccess条目没有问题。

    Step6 – 清理wp-config.php文件

    您还需要从WP Rocket插件创建的wp-config.php文件中删除一个条目。

    • 当您使用FTP登录到服务器时,导航到根安装目录。
    • 找到“wp-config.php”文件并使用代码编辑器进行编辑。
    • 检查以下行并将其删除。
    define(‘WP_CACHE’, true)
    define(‘WP_CACHE’, true)
    define('WP_CACHE', true)
    

    WP Rocket的WP配置条目

    WP Rocket的WP配置条目

    Step7 – 删除缓存的WebP图像

    WP Rocket允许您单独缓存WebP图像格式以提高加载速度。您需要从“/wp-content/uploads/”文件夹中检查并删除这些缓存的图像文件。如果您有生成WebP图像并将其存储在上传文件夹中的插件,则不需要此步骤。但是,许多托管公司不会将WebP图像存储在“上传”文件夹中。它们将即时生成WebP图像并直接提供给浏览器。在这种情况下,如果您启用了WebP缓存选项,插件将创建您在站点中上传的每个图像的副本。

    当您卸载WP Rocket时,这些缓存的WebP图片将变得多余且无用。您可以保留它们原样或删除它们以节省服务器上的存储空间。确保在删除WP Rocket缓存图像后测试您的服务器动态提供WebP图像。

    注意:您还可以使用主机帐户中的文件管理器应用程序删除和编辑文件,而不是使用FTP。

    Step8 – 删除数据库条目

    WP Rocket将在wp_options表中创建条目以存储设置和其他相关条目。同样,当您使用删除未使用的CSS功能时,该插件也会创建额外的表。

    • 登录到您的托管帐户并打开phpMyAdmin。
    • 找到您的数据库并导航到wp_options表。
    • 使用“rocket”搜索表格并删除您找到的条目。
    • 选择表“wp_wpr_rucss_resources”和“wp_wpr_rucss_used_css”并删除它们。

    小结

    如您所见,WP Rocket插件创建了许多条目和文件夹以提高速度。例如,启用删除未使用的CSS选项将在数据库中创建大表。不幸的是,您不会在插件的销售页面上找到这些详细信息。我们希望这篇文章能帮助您从您的WordPress网站上完全删除WP Rocket插件。

  • 如何为WordPress网站生成关键CSS?

    如何为WordPress网站生成关键CSS?

    互联网上有许多拖放式网站建设者可以在没有技术技能的情况下创建网站。但是,您必须学习SEO的一些技术方面,才能使您的网站保持在搜索引擎结果页面的顶部。

    关键CSS是这样的技术主题之一,用于优化您的内容交付,进而直接影响速度。对于在其网站上使用多个插件的普通用户来说,WordPress生态系统使这变得更加复杂。

    在本文中,让我们探讨如何为WordPress网站创建关键CSS以提高Google PageSpeed分数。

    基础知识

    在讨论关键CSS之前,有必要了解一些术语,例如首屏和内容交付优化。此外,您还需要了解在WordPress上使用外部样式表的基本方法。

    首屏内容

    当您在桌面或移动设备上打开网站时,您在屏幕上看到的可见部分是首屏内容区域。这是一个传统的报纸术语,您可以在其中看到首页顶部的首屏内容。一般来说,人们习惯于折叠报纸,折叠区域上方提供重要内容。同样,首先加载的网页顶部可见部分应该为用户提供最有价值的内容。因此,您应该专注于优化可见顶部以快速加载。

    内容交付优化

    许多速度工具(如Google PageSpeed Insights)衡量网站如何提供首屏内容。您可以将其视为对首次内容绘制 (FCP) 的测量。如果他们检测到阻塞,您将看到删除阻塞元素的警告。您将在Google PageSpeed Insights工具中看到的流行建议之一是消除渲染阻塞资源。如果您点击该建议,Google将向您展示优化关键CSS/JS的交付并推迟所有非关键CSS/JS。

    Critical-CSS-and-JS-Suggestion

    关键的CSS和JS建议

    修复阻塞渲染的JavaScript (jQuery) 非常容易,因为主题/插件默认在页脚部分加载脚本。jQuery是唯一的问题,许多网站可能需要它来加载首屏内容。因为,WordPress也使用jQuery,如果它只是由于jQuery,你可以忽略这个错误。否则,如果不会破坏您网站的布局,请使用WP Rocket之类的插件来组合和交付所有脚本。

    然而,问题在于生成关键的CSS并首先加载它。在本文中,我们将解释如何处理CSS优化以提高页面速度得分。

    相关阅读: 正确地配置WP Rocket插件以提升网站加载速度

    在网站中加载CSS

    有多种方法可以在您的网页中插入CSS 。您可以通过内联、内部或外部方式执行此操作。最流行和推荐的方法是在网页的标题部分链接外部样式表。由于页眉部分中的内容首先与网页一起加载,因此会极大地影响首屏内容的加载,从而影响页面速度。

    <!DOCTYPE html>
    <html lang=“en”>
    <head>
    <!– Meta Tags for Bootstrap 4 –>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <link rel=“stylesheet” href=“Link Your Stylesheet URL Here”>
    </head>
    <body>
    Add Your Content Here
    <script src=“Add Your Script URL Here”></script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <!– Meta Tags for Bootstrap 4 –>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <link rel=”stylesheet” href=”Link Your Stylesheet URL Here”>
    </head>
    <body>
    Add Your Content Here
    <script src=”Add Your Script URL Here”></script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Meta Tags for Bootstrap 4 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="Link Your Stylesheet URL Here">
    </head>
    <body>
    Add Your Content Here
    <script src="Add Your Script URL Here"></script>
    </body>
    </html>

    在WordPress中加载CSS

    WordPress使用style.css作为提供主题样式的外部文件。这是运行WordPress网站的必需文件(除了functions.php之外)。此外,您网站上的每个插件都可能添加额外的CSS文件。在Chrome浏览器中打开您的网站并查看源代码(确保您没有安装缓存插件或禁用页面缓存)。

    Stylesheets-in-Header

    页眉中的样式表

    您可以在页面的标题部分看到WordPress链接所有外部样式表。从优化的角度来看,这可能会导致多个问题:

    • 一些主题使用几MB大小的臃肿的CSS样式。当用户在桌面或移动设备上打开网页时,您不需要加载所有这些样式。
    • 有不同的文章类型,例如可能使用完全不同样式的产品。在这种情况下,您不需要其他CSS来进行初始(首屏)加载。

    您网站上的每个页面都需要最低限度的CSS才能加载首屏内容。页面加载所需的最小CSS在技术上称为关键CSS。在上述所有情况下,Google PageSpeed Insights和其他工具都会向您显示优化CSS交付的警告。

    请记住,删除未使用的CSS和脚本也与在页面上使用过多的CSS/脚本有关。然而,这与关键的CSS优化完全不同。您甚至可能不会在特定页面上使用某些插件。例如,您不需要网站所有页面上的联系表单插件的CSS。

    在这种情况下,联系表单文件中的CSS/JS文件在常规博客文章中是不必要的,您将看到删除未使用的CSS/JS警告。

    查看我们关于如何在WordPress中禁用未使用的CSS/JS优化WooCommerce页面加载的文章。

    如何在WordPress中生成关键CSS?

    现在您知道了关键CSS对提高页面加载速度的重要性。有两种方法可以为您的网站生成关键CSS。

    • 手动生成关键CSS并插入您的网站
    • 使用WP Rocket插件优化内容交付

    我们将详细解释这两个过程,您可以选择最适合您网站的过程。

    手动生成关键CSS

    互联网上有许多第三方工具可用于手动生成关键CSS。但是,当您网站上的所有页面都相似并且首屏区域没有自定义内容时,这是有意义的。您可以尝试其他免费的关键CSS生成服务,例如Sitelocity。

    • 转到Sitelocity网站并输入页面的URL。
    • 单击“生成关键路径CSS”按钮。
    • 您可以为您的页面获取最小化的关键CSS。

    Generate-Critical-CSS

    生成关键CSS

    现在您已经生成了关键的CSS,下一个任务是将它插入到您网站的标题部分。理论上,您可以在<head>和</head>标记之间插入header.php文件中的样式。有一些插件可以帮助在标题部分插入样式而无需修改模板文件。

    Autoptimize是我们可以为此目的推荐的插件之一。如果您已经在使用Autoptimize进行缓存,您还可以使用相同的插件来插入关键CSS。

    您可以在Autooptimize插件的“CSS Options”下插入关键CSS。首先启用“Inline and Defer CSS”复选框并将关键的CSS粘贴到出现的文本框中。

    CSS-Options

    CSS选项

    如您所见,Autooptimize插件还可以在延迟其他样式的同时自动内联首屏CSS。但是,这会迅速将缓存大小增加到100%,并且您无法在插件中选择自动清除缓存。此外,在大多数情况下,它会破坏网站。您可以使用Autooptimize CriticalCSS Power-Up插件,它会以更好的方式帮助您。为了使用这个附加组件,您必须以每月10美元的价格从Criticalcss.com获取API。

    为什么手动关键CSS生成不起作用?

    虽然上述手动插入过程看起来很容易,但它并不是一件容易的事。以下是您的关键CSS不起作用的一些原因。

    • 您可能有不同的内容,例如页面、博客文章、产品等。您网站上的每种内容类型都需要不同的关键CSS来加载首屏内容。使用插件或手动插入会在所有页面上加载关键的CSS并破坏一些内容。
    • 每次更新主题、插件和WordPress核心时,都必须生成关键的CSS。否则使用旧的关键CSS会破坏您网站的布局。对于普通用户来说,为网站上的每一次更新持续更新关键CSS是一项不可能完成的任务。使用可用的自动更新选项,在更新安装的插件/主题/核心之前必须非常小心。
    • 对于移动设备和桌面设备,您可能需要单独的关键CSS。

    对于所有这些问题,剩下的唯一选择是使用一些插件来处理这些问题并动态自动生成关键CSS。

    使用WP Rocket为WordPress创建关键 CSS

    幸运的是,您有一个缓存插件,可以在WordPress中完成这一关键的CSS生成。由于其简化的设置,WP Rocket是WordPress最受欢迎的缓存插件之一。同样,关键的CSS生成是插件的优点之一,任何普通用户都可以在不破坏网站的情况下获得好处。

    • 首先,您必须购买WP Rocket高级插件
    • 安装并激活WP Rocket后,转到“设置 > WP Rocket”并导航到“File Optimization”部分。
    • 向下滚动并启用“Optimize CSS Delivery”复选框并选择“Load CSS Asynchronously”按钮。
    • 保存您的更改以开始关键的CSS生成过程。

    Generate-Critical-CSS-in-WP-Rocket

    在WP Rocket中生成关键CSS

    这将允许插件为您的WordPress网站上的每种文章类型自动生成关键CSS。它包括首页。主页、页面、文章和您在网站上使用的任何其他自定义文章类型。如果需要,您可以添加使用第三方工具手动生成的备用关键CSS。通常,您可以将此备用关键CSS框留空。您还可以在“Cache”部分启用单独的移动缓存。

    请注意,WP Rocket是一个具有单站点许可证的高级插件,售价49美元。我们认为,值得购买此插件,因为它提供了端到端的缓存解决方案以优化速度。该插件提供一年的支持和更新。之后,它将继续工作,您无需更新即可使用关键的CSS和其他功能。您可以以30%的折扣续订以获得支持并获得任何附加功能。与Autoptimize一起使用的criticalcss API每月10美元相比,这是一个更好的选择。

    重新生成关键CSS

    当您更新主题/插件/WordPress 核心或在您的站点上添加自定义文章类型时,有必要重新生成关键CSS。否则,WP Rocket将使用旧的关键CSS并破坏您网站的布局。因此,请确保不要忘记重新生成关键CSS。

    • 单击顶部栏上的“WP Rocket”菜单,然后选择“Regenerate Critical CSS”选项。
    • 或者,您可以转到插件的仪表盘并单击“Regenerate Critical CSS”按钮。

    Regenerate-Critical-CSS

    重新生成关键CSS

    特定页面的自定义关键 CSS

    如前所述,您可能有一个主页或另一个使用页面构建器插件创建的页面。与您网站上的所有其他博客文章相比,此页面将具有完全不同的关键 CSS。在这种情况下,您必须创建单独的关键 CSS 并仅在该页面上有条件地加载。WP Rocket 只需点击几下即可帮助您实现这一目标。

    • 转到要生成单独的关键 CSS 的页面的页面/文章编辑器。
    • 在侧边栏文档面板上,找到“WP Rocket Options”面板。如果没有找到,请单击右上角的三个点按钮,然后选择“首选项”。在弹出窗口中,您可以启用站点上可用的所需文档面板。
    • 选择“Optimize CSS Delivery”复选框并点击“Generate Specific CPCSS”按钮。
    • 这将为该页面生成特定的关键CSS,并且插件将在用户访问该页面时加载此关键CSS。

    Generate-Critical-CSS-for-Specific-Page

    为特定页面生成关键CSS

    测试关键CSS

    实现手动方法或者使用WP Rocket插件后,可以通过查看页面源码来测试页面。确保注销您的管理面板或为插件中的登录用户启用缓存。正如您在下面的屏幕截图中看到的,WP Rocket在Header中添加了关键的CSS。

    WP-Rocket-Critical-CSS

    WP Rocket关键CSS

    您还可以在Google PageSpeed Insights工具中查看页面。如果一切顺利,您将看到在传递的结果下消除了渲染阻塞资源和其他CSS错误。这表明您已在网站上正确实施关键CSS。

    小结

    我们希望这篇文章能够强调关键CSS在WordPress网站中的重要性。当您的站点较小且页面较少时,您可以使用手动选项。但是,对于一个有大量文章和不同文章类型的正在运行的博客,您可以尝试WP Rocket插件。尽管它花费了您一些钱,但您可以为您的站点获得完整的缓存解决方案。

  • 什么是DNS预取 (DNS Prefetch)?

    什么是DNS预取(DNS Prefetch)?

    本文将帮助您了解DNS预取,一种资源提示,包括它们是什么、为什么以及如何使用它们,以及审计和扩展它们的最佳实践。

    DNS预取的工作原理

    DNS预取是一种资源提示,用于对浏览器尚未确定需要进行的域进行DNS查找。这可以提高性能,因为当浏览器确实需要请求资源时,该域的DNS查找已经发生。

    让我们看一个例子。浏览器正在加载页面,需要请求资源https://stats.example.com/js/pinit.js。为此,它首先必须与域stats.example.com建立HTTP连接。如果浏览器已经与域建立了HTTP连接,则可以使用现有连接,否则将创建新连接。

    为此,浏览器首先对stats.example.com进行DNS查找。在下面的屏幕截图中,您可以看到对pinit.js的请求:

    pinit.js的请求

    该资源后来在瀑布中被发现,并且JavaScript文件位于另一个域中,与基本HTML页面的域分开。现有的HTTP连接不存在,因此会进行DNS查找,如瀑布中资源栏的深绿色部分所示。这大约需要40毫秒,尽管DNS查找可能需要数十甚至数百毫秒,具体取决于网络连接或需要联系的DNS服务器数量等情况。

    我们可以通过在HTML文件的<head>中添加DNS预取资源提示来优化这一点,如下所示:

    <link href=“https://stats.example.com/”>
    <link href=”https://stats.example.com/”>
    <link href="https://stats.example.com/">

    在下面的屏幕截图中,您可以看到浏览器被指示主动尝试对pinit.js所在的stats.example.com进行DNS查找:

    主动尝试DNS查找

    当浏览器稍后确定它需要请求pinit.js并连接到stats.example.com时,DNS查找已经发生。这允许JS文件更快地下载,将整个瀑布流向左移动。

    DNS预取和预连接

    DNS Prefetching是网站可以用来指示浏览器先做某事的多种资源提示之一。它是一个很小的、相当基本的资源提示,可以比其他选项更广泛地应用它。

    您不需要同时指定DNS预取和预连接资源提示。浏览器只需预连接即可完成所需的所有步骤。

    DNS预取仍然很重要,可以与预连接提示结合使用。这是因为浏览器限制了它们将维持的HTTP连接数。使用超过6-8个预连接资源提示可能会限制浏览器进行他们实际需要的连接。DNS预取在不同的级别上运行,这意味着您可以在页面上对关键域进行6到8个预连接,然后对其他不太重要的域有额外的DNS预取提示。

    何时使用DNS预取

    一般来说,DNS预取应该用于重要的第一方域和第三方域,包括:

    • 后来在瀑布中发现的领域
    • 具有随后导致其他请求发生的资源的域
    • 具有大量请求或下载大量内容的域
    • 域尚未被其他类型的资源提示使用

    通常,DNS预取不应用于作为关键渲染路径的一部分的域。这是因为,理想情况下,这些域应该使用预连接资源提示。

    DNS预取和第一方域

    出于多种原因,对第一方域使用DNS Prefetch往往很容易:

    • 您控制域名。
    • 您有目的地在该域上托管内容并链接到它的页面。
    • 您应该提前知道页面将使用哪些第一方域。
    • 域名不太可能改变。

    这些因素使您可以在一定程度上确信域包含页面所需的资源并且它们不太可能更改,从而包含DNS预取资源提示。很好的例子包括:

    • 具有延迟加载的图像或视频的其他域
    • 稍后在页面中使用的API端点的第一方域

    第三方内容和DNS预取

    由于多种原因,对第三方域使用DNS预取资源提示可能非常具有挑战性:

    • 域名可能是动态的或在您不知情的情况下更改
    • 不同的第三方域可能用于您网站的不同部分
    • 可能不清楚哪些第三方内容是从哪些域加载的,因此添加或删除第三方标签可以添加或删除需要 DNS 预取的域
    • 第三方域可能由于其他部门的操作而出现,例如使用标签管理器的营销或业务组。

    您可能需要做额外的工作来确定第三方内容的来源。理想情况下,您希望对第三方内容使用 DNS 预取,这些内容将被您的页面长期使用。

    以下是与 DNS 预取一起使用的第三方内容的良好示例,因为它们往往具有一致的域或 URL:

    • 分析或活动跟踪器
    • A/B测试小工具
    • 聊天小工具
    • 错误和日志框架
    • 社交分享小工具

    使用资源提示优化广告可能特别困难。这是因为,虽然最初的广告交易平台可能有一个众所周知的域名,但为广告服务的最终域名通常是未知且不一致的。

    验证好处

    一旦确定了哪些域应该使用DNS预取,您仍然需要对其进行测试!仅仅因为某些东西应该可以改善您网站的性能或体验,并不意味着它实际上会:您需要始终进行测试以确保。

    1. 使用工具来衡量您的表现。
    2. 实施你的改变。
    3. 比较“之前”和“之后”的性能指标。

    DNS预取的挑战

    DNS预取存在一个大问题——当人们过度使用它时。让我们也看看其他问题的意识。

    过多的DNS预取

    当人们第一次听说DNS预取时,他们会立即想到:

    由于DNS预取可以使瀑布中的后续调用更快地发生,为什么我不将DNS预取到页面可能使用的所有域?

    例如,这里有一个主要的新闻网站,做了33个DNS预取:

    33个DNS预取

    请记住,每种类型的资源提示都要求浏览器覆盖它通常会执行的任务。使用过多的DNS预取可能会导致性能问题,因为浏览器会限制它们将维持的未完成DNS请求的数量。使用DNS预取来强制进行DNS查找是在“用尽”一个可用的插槽,否则浏览器可以将其用于浏览器知道它需要的DNS查找。进行过多的DNS预取,或对最终未使用的域进行DNS预取,会造成资源争用,并使浏览器运行效率低下。

    作为一般规则,网站应尽量不要进行超过10次DNS预取。

    未使用的DNS查找

    不要对页面甚至不使用的域进行DNS预取。这只是一种浪费,并且会影响浏览器对实际需要的域进行其他DNS查找的能力。

    不要DNS预取预连接到同一个域

    没有理由将DNS预取和预连接提示都包含到同一个域以实现“向后兼容性”。如今,支持预连接的浏览器比支持DNS预取的浏览器多,而且支持DNS预取的浏览器也支持预连接。

    • 如果域很重要,请使用预连接。
    • 如果它不太重要,请使用DNS预取。

    DNS预取审计的最佳实践

    我们已经看到使用DNS预取资源提示有很多好处,但如果使用不当,也会有许多会损害性能的陷阱。这意味着审核页面如何使用资源提示以确保您遵循所有最佳实践非常重要。

    首先,识别页面当前正在使用的所有DNS预取资源提示。您将需要在基本HTML页面中查找<link>标记,以及链接: 也可以包含资源提示的HTTP标头。还要记住,包含资源提示的链接标头可以出现在基于HTML页面之外的其他响应中!

    列出所有DNS预取域后,问自己以下问题:

    • 使用上面的指导,我需要确定哪些域应该使用DNS预取。它们是否在页面已经使用的提示列表中?如果不是,为什么不呢?
    • 我是否使用了超过10个DNS预取?如果是这样,那就太多了,您应该考虑删除它们。
    • 是否有任何使用DNS预取的域应该使用预连接?
    • 我是否对任何相同的域使用预连接和DNS预取?如果是这样,请删除该域的DNS预取提示。
    • 我是否在<link>标签中使用了多个资源提示并触发了Safari问题?如果是这样,请将其删除。
    • 是否使用了所有DNS预取?大多数瀑布图将允许您按域或部分URL进行过滤。这使得查看页面是否实际使用域变得更加容易。
  • 什么是预连接Preconnect?

    什么是预连接Preconnect?

    在本文中,让我们看一下预连接Preconnect——它们是什么、为什么以及如何使用它们,以及审计和扩展它们的最佳实践。

    什么是预连接?

    预连接是一种资源提示,它告诉浏览器与浏览器尚未确定需要建立的域建立主动HTTP连接。创建HTTP连接需要很多步骤,包括:

    1. 进行DNS查找。
    2. 连接TCP。
    3. 协商安全的TLS连接。

    这可能需要数十甚至数百毫秒。预连接提高了性能,因为当浏览器确实意识到它需要建立一个连接来下载资源时,那个连接已经发生了!

    示例和真实案例研究

    让我们看一个例子。下面的屏幕截图显示了来自Google的CSS文件请求:

    Google的CSS文件请求

    此资源稍后会在瀑布中发现,并且现有的HTTP连接不存在。浏览器知道它需要下载这个CSS文件,但首先它必须完成DNS查找,然后创建TCP连接,最后协商一个加密的TLS连接。这些会在请求CSS文件之前增加大约100毫秒的延迟。我们可以通过在HTML文件的<head>中添加预连接资源提示来优化这一点,如下所示:

    <link href=“https://fonts.googleapis.com/”>
    <link href=”https://fonts.googleapis.com/”>
    <link href="https://fonts.googleapis.com/">
    

    我们可以在下面的瀑布截图中看到结果。预连接提示指示浏览器主动连接到Google字体域。当浏览器稍后发现它需要请求的CSS文件时,已经建立了连接。这使得CSS文件可以立即下载,将整个瀑布流向左移动:

    预连接提示指示浏览器主动连接到Google字体域

    这是一个很好的例子,但是有哪些真实世界的例子来说明预连接的好处呢?

    • 一家在线商店通过使用产品图像目录预连接到域,将他们的关键绘画指标提高了500毫秒至1秒以上。
    • Aaron Peters 有一个示例,其中预连接将CDN Planet的初始渲染性能提高了大约10%。

    下面这个例子,这是一家媒体网站,拥有大量用于各种第三方域的JavaScript。通过分析他们的站点并实施资源提示(例如预连接和预加载),将交互时间提高了37%,从12.8秒的中位数降低到7.9秒。

    交互时间提高了37%

    一般来说,资源提示——尤其是预连接——是所有网站都应该考虑的。

    如何使用预连接来提高性能

    鉴于上述令人印象深刻的收获,我知道您一定在想什么:

    如果预连接资源提示提高了整体性能和用户体验,为什么我不预连接到我的网站使用的所有域?

    不幸的是,这会损害性能。为什么?这很简单:浏览器使用大量复杂的逻辑来决定需要下载什么以及何时下载,因此页面可以尽快呈现并响应访问者。(如果你想要所有书呆子的细节,  Pat Meenan已经详尽地记录并展示了它。)

    使用资源提示的站点本质上是要求覆盖浏览器通常会执行的操作。如果使用不小心,这可能是不同性能问题的根源。

    过多的预连接提示

    浏览器会限制它们将维持的HTTP连接数。使用过多的预连接资源提示将限制浏览器进行所需的连接。实际上,过多的预连接会损害性能。

    一个好的经验法则是不超过6-8个预连接资源提示。

    预连接到未使用的域

    唯一比进行太多预连接更糟糕的是,要求浏览器预连接到一个甚至没有使用过的域!然而,这可能非常普遍。站点更改其内容的来源,或者在不删除该域的预连接资源提示的情况下停止使用第三方提供商。预连接到未使用的域会以两种方式导致性能问题:

    • 未使用的预连接会损害浏览器,因为它们会阻碍与其他域的连接。
    • 即使未使用,打开的TCP和加密的TLS连接也会使用服务器资源。Akamai研究发现,多达6%的加密HTTP连接实际上并不发出任何请求。

    过早关闭的预连接

    因为浏览器限制了它们将保持的HTTP连接数,所以如果10秒内没有请求发生,浏览器将关闭HTTP连接。当  预连接提示告诉浏览器打开到域的HTTP连接,但在10秒内没有向该域发送请求时,会发生Premature Preconnect 。浏览器然后关闭此连接,只有在需要从该域请求资源时才需要再次连接。这很糟糕,原因有两个:

    • 过早的预连接会损害浏览器,因为它会阻碍与其他域的连接。
    • 一旦实际遇到对该域的请求,浏览器必须打开另一个到该域的连接。因此,进行预连接根本没有任何净收益!

    Safari的rel资源提示问题

    许多站点采用了在同一 <link> 标记内同时指定预连接提示和 dns-prefetch 提示的模式,如下所示。(有关详细讨论,请参阅我们的DNS预取资源提示指南。)

    <link href=“https://example.com/”>
    <link href=”https://example.com/”>
    <link href="https://example.com/">

    这种做法之所以开始,是因为浏览器支持的资源提示类型不同。截至2020年,支持预连接的浏览器多于支持DNS预取的浏览器,所有支持DNS预取的主流浏览器也支持预连接。

    在同一个<link>标签内指定两个不同的资源提示确实没有什么好处,实际上,这样做有很大的负面影响。Safari只允许在<link>标签的rel属性中指定一个资源提示 。在同一个rel属性中指定两个提示会导致Safari完全跳过<link>标记,并且不会尝试任何一个资源提示。

    实际上,指定多个资源提示会禁用Safari的提示!相反,您应该只使用<link>提示。

    何时使用预连接提示

    通常,应为以下内容提供预连接提示:

    • 后来在瀑布中发现的领域
    • 具有对页面呈现或交互至关重要的资源的域
    • 具有大量请求或下载大量内容的域

    很好的例子包括:

    • 关键渲染路径中需要的具有CSS和JS包的其他域
    • Web字体由CSS引用,需要下载
    • 用于初始加载或呈现页面的API端点的第一方域

    一旦确定了应该预连接哪些域, 您仍然需要对其进行测试! 仅仅因为某些东西应该可以改善您网站的性能或体验,并不意味着它会。确保始终进行测试以验证:

    1. 使用工具来衡量您的表现。
    2. 实施你的改变。
    3. 比较“之前”和“之后”的性能指标。

    预连接资源提示的最佳实践

    我们已经看到使用预连接资源提示有很多好处,但如果使用不当,也会有很多缺陷会影响性能。这意味着审核页面如何使用资源提示以确保您遵循所有最佳实践非常重要。

    • 首先,确定页面当前正在使用的所有预连接资源提示。您将需要在基本HTML页面中查找<link>标记,以及链接: 也可以包含资源提示的HTTP标头。还要记住,包含资源提示的链接标头可以出现在基本HTML页面之外的其他响应中!
    • 使用上述指南,确定应预连接哪些域。它们是否在页面已经使用的提示列表中?如果不是,为什么不呢?
    • 您是否使用超过6-8个预连接?如果是这样,那就太多了,您应该考虑删除它们。
    • 接下来,对于每个预连接的域,验证是否向其发送了请求,并且请求在10秒内发生,以避免过早关闭连接。大多数瀑布图将允许您按域或部分URL进行过滤,如下所示。这使得查看请求是否以及何时发生在域中变得更加容易。

    验证是否向预连接域名发送了请求

    • 最后,查看每个资源提示并确保<link>标记中没有多个提示。