作者: tianbao

  • 如何彻底卸载删除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>标记中没有多个提示。
  • 如何通过预加载 (Preload) 关键资源以提高网站加载速度

    如何通过预加载 (Preload) 关键资源以提高网站加载速度

    预加载允许您指定在页面加载期间立即或很快需要的资源(例如字体、图像、JavaScript 和 CSS)。 在您网站的每个页面的<head>…</head>部分顶部添加一个link rel='preload'标签。

    比如:

    <link rel=‘preload’ href=‘font.woff2’ as=‘font’ type=‘font/woff2’ crossorigin>
    <link rel=’preload’ href=’font.woff2′ as=’font’ type=’font/woff2′ crossorigin>
    <link rel='preload' href='font.woff2' as='font' type='font/woff2' crossorigin>

    打开网页时,浏览器会从服务器请求HTML文档,解析其内容,并为引用资源提交单独请求。作为开发人员,您知道页面需要的所有资源以及哪些资源最为重要。您可以使用这些知识提前请求关键资源,加快加载的过程。本文介绍了如何使用 <link> 来达成此目的。

    预加载的工作原理

    预加载最适合用于浏览器通常较晚发现的资源。

    预加载后期资源

    在本例中,Pacifico字体是在样式表通过 @font-face 规则定义的。浏览器只有在完成下载和解析样式表后才会加载字体文件。

    通过预加载某个资源,您希望浏览器可以比正常发现它更早地获取该资源,因为您认为它对当前页面很重要。

    预加载某个资源

    在本例中,已预加载了Pacifico字体,所以下载会与样式表并行进行。

    关键请求链代表着浏览器优先处理和获取的资源顺序。 Lighthouse会将位于该链第三层的资产识别为后期发现的资产。您可以使用预加载关键请求审计来确定要预加载的资源。

    预加载关键请求

    您可以通过在HTML文档的头部添加带有 rel="preload" 的 <link> 标记来预加载资源:

    <link as=“script” href=“critical.js”>
    <link as=”script” href=”critical.js”>
    <link as="script" href="critical.js">

    浏览器会缓存预加载的资源,以便在需要时立即可用。(它不会执行脚本或应用样式表。)

    在实施预加载后,包括Shopify、Financial Times和Treebo在内的许多网站在以用户为中心的指标(例如Time to InteractiveFirst Contentful Paint)等方面,都实现了1秒的改进。

    浏览器会根据情况执行诸如 preconnect 和 prefetch 等资源提示。而另一方面,preload 对浏览器来说是强制性的。现代浏览器已经非常擅长对资源进行优先级排序,这就是为什么谨慎使用 preload 并且只预加载最关键的资源那么重要。

    load 事件后大约3秒会触发Chrome中的控制台警告。

    谨慎使用 preload

    所有现代浏览器均支持 preload

    有助于修复以下两种类型的警告:

    1.预加载密钥请求

    预加载关键请求是Web字体的常见警告。Font Awesome是您可能会看到的一种非常常见的字体。

    预加载关键请求

    预加载关键请求

    2.渲染阻塞资源

    通过预加载,您还可以修复渲染阻塞资源警告,因为资产以非阻塞方式加载。

    消除渲染阻塞资源

    消除渲染阻塞资源

    如果您正在预加载图像,它还可以帮助降低最大内容绘制 (LCP) 时间。

    可预加载资源

    有许多不同的资源可以预加载。

    公共资源

    • font: 字体文件。
    • script: JavaScript文件。
    • style: CSS样式表。
    • image: 图像文件 ( .jpg.png.webp)。

    其他资源

    • audio: 音频文件
    • document: 旨在由 <frame><iframe>嵌入的HTML文档。
    • embed:要嵌入到 <embed> 元素中的资源。
    • fetch:要通过fetch或XHR请求访问的资源,例如ArrayBuffer或JSON文件。
    • object:要嵌入到 <object> 元素中的资源。
    • track: WebVTT文件。
    • worker:一个JavaScript网络worker或共享worker。
    • video: 视频文件。

    注意:在撰写本文时,Chrome存在一个未解决的bug,即预加载请求比其他更高优先级资源的获取速度更快。在解决此问题之前,请注意预加载的资源如何“跳过队列”并比应有的时间更早地被请求。

    预加载CSS中定义的资源

    在浏览器下载并解析CSS文件之前,不会发现这些文件中使用 @font-face 规则定义的字体或背景图像。预加载这些资源可确保在下载CSS文件之前获取它们。

    预加载CSS文件

    如果您使用了关键CSS方法,那么CSS将分成两部分。渲染首屏内容所需的关键CSS内联在文档的 <head> 中,非关键CSS通常使用JavaScript延迟加载。在加载非关键CSS之前等待JavaScript执行会导致用户滚动时呈现延迟,因此最好使用 <link> 更快地启动下载。

    预加载JavaScript文件

    由于浏览器不执行预加载的文件,因此预加载有助于将获取与执行分开,这可以改善Time to Interactive等指标。如果您拆分JavaScript包并仅预加载关键块,则预加载效果最佳。

    如何实现rel=preload

    实现 preload 最简单的方法是在文档的 <head> 中添加一个<link> 标记:

    <head> <link as=“script” href=“critical.js”></head>
    <head> <link as=”script” href=”critical.js”></head>
    <head>  <link as="script" href="critical.js"></head>

    提供 as 属性可帮助浏览器根据其类型来设置预获取资源的优先级,设置正确的标头,以及确定资源是否已存在于缓存中。此属性可接受的值包括: script 、style 、font 和 image 等等

    请查看Chrome Resource Priorities and Scheduling文档,详细了解浏览器如何确定不同类型资源的优先级。

    注意:省略 as 属性或使用了无效值,就相当于XHR请求,这时浏览器不知道它获取的内容,因此无法确定正确的优先级。它还可能导致某些资源(例如脚本)被获取两次。

    某些类型的资源,例如字体,以匿名模式加载。对于这些资源,您必须设置 preload 的 crossorigin 属性:

    <link href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

    注意:没有设置 crossorigin 属性的预加载的字体将被获取两次!

    另外,<link> 元素还接受 type 属性,它包含链接资源的MIME类型。浏览器使用 type 属性的值来确保资源仅在其文件类型受支持时才被预加载。如果浏览器不支持指定的资源类型,它将忽略 <link> 。

    请尝试通过预加载web字体提高网页性能

    您可以通过 Link HTTP标头预加载任何类型的资源:

    Link: </css/style.css>;; as=“style”
    Link: </css/style.css>;; as=”style”
    Link: </css/style.css>;; as="style"

    在HTTP标头中指定 preload 的一个好处是,浏览器不需要解析文档来发现它,这在某些情况下可以提供一些小幅改进。

    使用webpack预加载JavaScript模块

    如果您使用了创建应用程序构建文件的模块打包器,则需要检查它是否支持预加载标签的注入。在webpack 4.6.0或更高版本中,它通过在 import()中使用magic comments(魔法注释)支持预加载:

    import(_/* webpackPreload: true */_ “CriticalChunk”)
    import(_/* webpackPreload: true */_ “CriticalChunk”)
    import(_/* webpackPreload: true */_ "CriticalChunk")

    如果您使用的是旧版webpack,请使用第三方插件,例如preload-webpack-plugin

    预加载时要记住的事项

    • 不要预加载每个脚本,否则它实际上会导致性能问题,例如增加总阻塞时间 (TBT)。预加载应该只用于立即需要的资源,因此它们以非阻塞方式加载。这通常用于网络字体、图像、CSS和JS。
    • 如果您正在使用缓存清除技术(例如查询字符串domain.com/style.css?ver=1.0),请不要忘记浏览器会看到确切的URL。因此,您将需要使用查询字符串URL,或者您可以使用句柄动态预加载。
    • 如果您有一个CDN重写您的资产的URL,请确保您要预加载的所有资源首先被正确地重写。如果URL不匹配,您最终可能会加载资源两次。
    • 如果您预加载样式表 (CSS) 或脚本 (JS),并且您正在使用插件来组合您的CSS/JSS(AutoptimizeWP Rocket等),请确保从连接过程中排除您预加载的资源。否则,它可能会被打包两次并最终在您的网站上放置更多代码。

    小结

    为提高网页速度,请预加载浏览器来发现较晚的重要资源。预加载全部资源会适得其反,因此请谨慎使用 preload,并衡量它在现实中的影响。

    via https://web.dev

  • 深入了解预加载关键图像技术

    深入了解预加载关键图像技术

    预加载主要图片(首屏图片)有助于减少Core Web Vitals中的最大内容绘制(LCP) 时间。这些通常是图像,如徽标、博客文章上的特色图像、登录页面上的Hero图像等。通过预加载它们,您将它们移动到瀑布的顶部,并基本上告诉浏览器这些具有优先级并且应该立即加载。

    最大的内容绘制时间

    最大的内容绘制时间

    重要的是要了解Chrome有两个图像预加载的限制,它们将出现在瀑布的最顶部。在这两个图像之后的任何内容仍然会在瀑布中显示得更高,但不会被视为高优先级,这完全取决于Chrome。我们通常建议预加载2-3个图像。这通常会预加载您的徽标并在博客文章中显示特色图片。

    如果您在页面上有手动图像预加载,这将优先于自动预加载之一。

    预加载关键图像功能还将自动从延迟加载中排除这些图像。

    从Chrome 73开始,链接 和响应式图像可以结合起来,以便更快地加载图像。

    预加载概述

    Preload让您可以在HTML中发现关键资源之前尽快告诉浏览器您想要加载的关键资源。这对于不容易发现的资源特别有用,例如样式表中包含的字体、背景图像或从脚本加载的资源。

    <link as=“image” href=“important.png”>
    <link as=”image” href=”important.png”>
    <link as="image" href="important.png">

    响应式图像 + 预加载 = 更快的图像加载

    响应式图像和预加载在过去几年中一直可用,但同时缺少一些东西:无法预加载响应式图像。从Chrome 73开始,浏览器可以在发现标签img之前预加载srcset指定的响应图像的正确变体!

    根据您网站的结构,这可能意味着图像显示速度显着加快!我们在一个使用JavaScript延迟加载响应式图像的网站上进行了测试。预加载导致图像加载速度提高了1.2秒。

    所有现代浏览器都支持响应式图像,而仅在基于Chromium的浏览器中支持预加载它们。

    imagesrcsetimagesizes

    为了预加载响应式图像,最近向<link>元素添加了新属性:imagesrcsetimagesizes. 它们与 <link rel="preload">一起使用,并与 <img>元素中使用的srcsetsizes语法相匹配。

    例如,如果您想预加载指定的响应式图像:

    <img src=“wolf.jpg” alt=“A rad wolf”>
    <img src=”wolf.jpg” alt=”A rad wolf”>
    <img src="wolf.jpg" alt="A rad wolf">

    您可以通过将以下内容添加到您的HTML的<head>来做到这一点:

    <link as=“image” href=“wolf.jpg” imagesrcset=“wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w” imagesizes=“50vw”>
    <link as=”image” href=”wolf.jpg” imagesrcset=”wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w” imagesizes=”50vw”>
    <link as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

    这将使用srcsetsizes将应用的相同资源选择逻辑启动请求。

    用例

    预加载动态注入的响应图像

    假设您正在动态加载主图像作为幻灯片的一部分,并且知道将首先显示哪个图像。在这种情况下,您可能希望避免在加载相关图像之前等待脚本,因为这会延迟用户看到它的时间。

    您可以在具有动态加载的图片库的网站上检查此问题:

    1. 在新选项卡中打开此示例网站
    2. 按 `Control+Shift+J`(或 Mac 上的 `Command+Option+J`)打开DevTools。
    3. 单击网络选项卡。
    4. Throttling下拉列表中,选择Fast 3G
    5. 禁用禁用缓存复选框。
    6. 重新加载页面。

    Chrome开发者工具-network

    此瀑布显示图像仅在浏览器完成运行脚本后才开始加载,从而对最初向用户显示图像的时间引入了不必要的延迟。

    在此处使用preload帮助是因为图像会提前开始加载,并且在浏览器需要显示它时可能已经存在。

    使用reload预加载图像

    此瀑布显示第一张图片与脚本同时开始加载,避免了不必要的延迟并加快了图片的显示速度。

    要查看预加载的不同之处,您可以按照第一个示例中的步骤检查相同的动态加载的图像库,但预加载了第一张图像

    避免该问题的另一种方法是使用基于标记的轮播并让浏览器的预加载器获取所需的资源。然而,这种方法可能并不总是实用的。(例如,如果您正在重用现有的组件,它不是基于标记的。)

    使用图像集预加载背景图像

    如果对于不同的屏幕密度有不同的背景图像,则可以在CSS中使用image-set语法指定它们。然后浏览器可以根据屏幕的DPR选择显示哪一个。

    background-image: image-set( “cat.png” 1x, “cat-2x.png” 2x);
    background-image: image-set( “cat.png” 1x, “cat-2x.png” 2x);
    background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

    上述语法忽略了在基于Chromium和WebKit的浏览器中此功能需要供应商前缀这一事实。如果您打算使用此功能,则应考虑使用Autoprefixer作为在线工具提供)来自动解决该问题。

    CSS背景图片的问题在于,它们只有在浏览器下载并处理了页面<head>中的所有CSS之后才会被浏览器发现,这可能是很多CSS……

    您可以在具有响应式背景图像的示例网站上检查此问题。

    响应式背景图像加载

    在此示例中,直到 CSS 完全下载后才开始图像下载,从而导致图像显示出现不必要的延迟。

    响应式图像预加载提供了一种简单且无需破解的方式来更快地加载这些图像。

    <link rel=preload href=cat.png as=image imagesrcset=“cat.png 1x, cat-2x.png 2x”>
    <link rel=preload href=cat.png as=image imagesrcset=”cat.png 1x, cat-2x.png 2x”>
    <link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">

    您可以检查前面的示例如何处理预加载的响应式背景图像

    预加载的响应式背景图像

    在这里,图像和CSS同时开始下载,避免了延迟,从而加快了图像的加载速度。

    预加载响应式图像

    理论上,预加载响应式图像可以加快速度,但实际上它有什么作用呢?

    为了回答这个问题,我们来看看创建了一个演示PWA商店的两个副本:一个不预加载图像另一个预加载其中的一些。由于该站点使用JavaScript延迟加载图像,因此可能会从预加载将在初始视口中的图像受益。

    这给了我以下关于no preloadimage preload的结果。查看原始数据,我们看到Start Render保持不变,速度指数略有提高(273 毫秒,因为图像到达速度更快,但不占用大量像素区域),但捕捉差异的真实指标是最后绘制的Hero指标,提高了1.2 秒。

    当然,没有什么比幻灯片比较更能捕捉视觉差异了:

    预加载与无预加载页面渲染对比

    幻灯片显示,图像在预加载时的到达速度明显更快,从而极大地改善了用户体验。

    预加载和<picture>

    如果您熟悉响应式图像,您可能想知道“怎么<picture>办?”。

    Web性能工作组正在讨论为srcsetand添加一个等效的预加载sizes,但不是为处理 “art direction” 用例的<picture>元素。

    为什么这个用例被“忽视”?

    尽管也有兴趣解决该用例,但仍有许多技术问题需要解决,这意味着这里的解决方案将具有很大的复杂性。最重要的是,在大多数情况下,用例似乎可以在今天得到解决,即使是以一种hacky的方式(见下文)。

    鉴于此,Web Performance WG决定srcset先发布,看看是否需要同等picture支持。

    如果您确实发现自己可以预加载<picture>,则可以使用以下技术作为解决方法。

    鉴于以下情况:

    <picture>
    <source srcset=“small_cat.jpg” media=“(max-width: 400px)”>
    <source srcset=“medium_cat.jpg” media=“(max-width: 800px)”>
    <img src=“large_cat.jpg”>
    </picture>
    <picture>
    <source srcset=”small_cat.jpg” media=”(max-width: 400px)”>
    <source srcset=”medium_cat.jpg” media=”(max-width: 800px)”>
    <img src=”large_cat.jpg”>
    </picture>
    <picture>
        <source srcset="small_cat.jpg" media="(max-width: 400px)">
        <source srcset="medium_cat.jpg" media="(max-width: 800px)">
        <img src="large_cat.jpg">
    </picture>

    <picture>元素的逻辑(或者确切地说是图像源选择逻辑)是按顺序检查<source>元素的media属性,找到第一个匹配的,然后使用附加的资源。

    因为响应式预加载没有“顺序”或“第一次匹配”的概念,所以需要将断点转换为以下内容:

    <link rel=“preload” href=“small_cat.jpg” as=“image” media=“(max-width: 400px)”>
    <link rel=“preload” href=“medium_cat.jpg” as=“image” media=“(min-width: 400.1px) and (max-width: 800px)”>
    <link rel=“preload” href=“large_cat.jpg” as=“image” media=“(min-width: 800.1px)”>
    <link rel=”preload” href=”small_cat.jpg” as=”image” media=”(max-width: 400px)”>
    <link rel=”preload” href=”medium_cat.jpg” as=”image” media=”(min-width: 400.1px) and (max-width: 800px)”>
    <link rel=”preload” href=”large_cat.jpg” as=”image” media=”(min-width: 800.1px)”>
    <link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
    <link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
    <link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

    小结

    响应式图像预加载为我们提供了新的和令人兴奋的可能性,以以前只能使用hack的方式预加载响应式图像。它是对速度敏感的开发人员工具箱的重要新增功能,使我们能够确保我们希望尽快呈现在用户面前的重要图像在我们需要时会出现。

  • 巧用Instant Page提升页面加载速度

    巧用Instant Page提升页面加载速度插图

    Instant.page是一个免费的开源库,它使用即时预加载,这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面,并且仅预加载HTML,尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器,以便您的页面保持流畅,并且在用户启用数据保护程序时不会预加载。

    即时页面功能可让您在用户将鼠标悬停在链接上后在后台自动预取URL。这导致几乎瞬时的加载时间,并改善了用户体验和感知性能(网站感觉有多快)。我们利用Alexandre Dieulot开发的Instant.page库。

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

    预取的工作原理

    就服务器和移动设备的性能提升和低利用率而言,以上是最佳组合。该功能尊重您的移动设备(AndroidiPhone)是否启用了数据保护程序或低数据模式。如果打开,则不会预加载任何内容。

    由于此功能适用于鼠标悬停,因此不会显示在速度测试工具上。但我们鼓励您在启用后点击您的网站。你应该能感觉到不同!

    亚马逊和其他公司发现,消除100毫秒的延迟可以提高1%的销售额。但是网络上的延迟很难克服。

    Instant.page使用即时预加载——它在用户点击页面之前预加载页面。

    (1)桌面端

    在用户点击链接之前,他们将鼠标悬停在该链接上。当用户悬停65毫秒时,有二分之一的机会点击该链接,因此instant.page此时开始预加载,页面预加载平均超过300毫秒

    另一种选择是在用户开始按下鼠标而不预加载时加载页面。这使得未使用的请求为零,同时仍将页面加载平均提高了80毫秒

    您还可以在悬停时或在链接可见时立即预加载,并在用户开始按下鼠标时触发点击,从而使您的页面成为世界上最快的页面。

    (2)移动端

    用户在释放之前开始触摸他们的显示器,平均留出90毫秒让页面预加载

    另一种选择是在链接可见时立即预加载链接。

    欺骗大脑

    人脑将不到100毫秒的动作视为瞬间。因此,instant.page让您的页面即使在3G上也感觉即时(假设您的页面渲染速度很快)。

    轻松使用您的服务器和用户的数据计划

    仅当用户很有可能访问页面时才会预加载页面,并且仅预加载HTML ,尊重您的用户和服务器的带宽和CPU。

    它使用被动事件侦听器和requestIdleCallback以使您的页面保持流畅。它尊重数据保护模式。它是1kB并在其他所有内容之后加载。它是免费和开源的(MIT许可证)。

    具有数据属性的附加选项

    您可以使用以下data-instant属性启用即时页面的其他选项。只需将这些属性中的任何一个添加到文档中的<body>标记,剩下的就交给我们了。

    您可以在instant.page了解更多关于这些不同属性的作用。有关将其中一些属性添加到<body>标记的一些方法,请参见下文。

    data-instant-allow-query-string
    data-instant-allow-external-links
    data-instant-whitelist
    data-instant-intensity=“mousedown”
    data-instant-intensity=“mousedown-only”
    data-instant-intensity=“150”
    data-instant-intensity=“viewport”
    data-instant-intensity=“viewport-all”
    data-instant-mousedown-shortcut
    data-instant-allow-query-string
    data-instant-allow-external-links
    data-instant-whitelist
    data-instant-intensity=”mousedown”
    data-instant-intensity=”mousedown-only”
    data-instant-intensity=”150″
    data-instant-intensity=”viewport”
    data-instant-intensity=”viewport-all”
    data-instant-mousedown-shortcut
    data-instant-allow-query-string
    data-instant-allow-external-links
    data-instant-whitelist
    data-instant-intensity="mousedown"
    data-instant-intensity="mousedown-only"
    data-instant-intensity="150"
    data-instant-intensity="viewport"
    data-instant-intensity="viewport-all"
    data-instant-mousedown-shortcut

    页面加载后添加JavaScript

    第一种方法是在页面加载结束时触发JavaScript。可以将以下代码添加到WPTurbo中的页脚代码框中。

    假设您想更改脚本在预加载前等待多长时间(以毫秒为单位)的数据强度时间。您可以像这样添加它:

    <script type=‘text/javascript’>
    document.body.setAttribute(‘data-instant-intensity’, ‘150’);
    </script>
    <script type=’text/javascript’>
    document.body.setAttribute(‘data-instant-intensity’, ‘150’);
    </script>
    <script type='text/javascript'>
    document.body.setAttribute('data-instant-intensity', '150');
    </script>

    一次只能使用一个data-instant-intensity属性,但您可以将其与其他属性混合搭配。因此,例如,这将起作用:

    <script type=‘text/javascript’>
    document.body.setAttribute(‘data-instant-intensity’, ‘150’);
    document.body.setAttribute(‘data-instant-allow-external-links’, ‘true’);
    </script>
    <script type=’text/javascript’>
    document.body.setAttribute(‘data-instant-intensity’, ‘150’);
    document.body.setAttribute(‘data-instant-allow-external-links’, ‘true’);
    </script>
    <script type='text/javascript'>
    document.body.setAttribute('data-instant-intensity', '150');
    document.body.setAttribute('data-instant-allow-external-links', 'true');
    </script>

    注意:上述方法会向您的站点添加一个额外的请求。

    与body标签合并

    第二种方法是在呈现页面时合并现有body标记中的属性。这不需要额外的请求。可以将以下代码添加到 WPTurbo 中的页脚代码框中。这是一个例子:

    <body
    data-instant-intensity=‘mousedown’
    data-instant-allow-external-links
    >
    </body>
    <body
    data-instant-intensity=’mousedown’
    data-instant-allow-external-links
    >
    </body>
    <body
    data-instant-intensity='mousedown'
    data-instant-allow-external-links
    >
    </body>

    预加载时间设置

    默认情况下,instant.page在悬停链接后以及移动用户开始触摸其显示屏时预加载65毫秒。还有其他选择。

    按下鼠标时预加载

    要在用户开始按下鼠标按钮时加载页面,在释放它之前,将其data-instant-intensity="mousedown"作为属性添加到<body>。

    页面预加载平均需要80毫秒。

    要在桌面上以这种方式使用而不是在移动设备上预加载,请使用data-instant-intensity="mousedown-only".

    调整悬停延迟

    对于一些具有大量点击目标的网站,例如一些电子商务网站,65毫秒规则不适用:它会为每个访问的页面预加载两次以上。

    要增加悬停延迟,请在属性中传递毫秒数,例如150ms: data-instant-intensity="150"

    或者,如果您不关心提出很多请求,则可以减少它。

    在链接可见后立即预加载链接

    在小型移动设备(例如智能手机)上,如果您希望您的页面在更多情况下是即时的,您可以在链接可见时立即预加载它们。

    为此,请将data-instant-intensity="viewport"其作为属性添加到<body>。

    "viewport-all"如果您不担心发出大量请求,您也可以使用 来在其他外形尺寸上执行此操作。

    请注意,如果用户使用2G或启用了数据保护程序,它将回退到使用默认选项。

    按下鼠标时触发点击

    如果您想更快地触发点击,请将data-instant-mousedown-shortcut其作为属性添加到<body>。请注意,这可能与现有脚本冲突。

    (此功能从v5.1开始是可选的,在5.0中默认启用,您需要使用data-instant-no-mousedown-shortcut它来禁用它。)

    未预加载的页面

    默认情况下,不会预加载URL中带有查询字符串(“?”)的页面,因为它们有时会触发操作(例如注销或删除某些内容)。

    使用查询字符串将页面列入白名单

    如果您想让所有带有查询字符串的页面都被预加载,data-instant-allow-query-string请在<body>中添加一个属性。

    如果您只想允许预加载带有查询字符串的选择链接,请为其添加一个data-instant属性:

    <a href=“articles?page=2” data-instant>Page 2</a>
    <a href=”articles?page=2″ data-instant>Page 2</a>
    <a href="articles?page=2" data-instant>Page 2</a>

    黑名单页面

    要手动将触发操作的链接列入黑名单,data-no-instant请为其添加属性:

    <a href=“logout?token=f2d2650ce6” data-no-instant>Log out</a>
    <a href=”logout?token=f2d2650ce6″ data-no-instant>Log out</a>
    <a href="logout?token=f2d2650ce6" data-no-instant>Log out</a>

    这主要在您使用时使用data-instant-allow-query-string,否则默认情况下带有查询字符串的链接已经被列入黑名单。

    默认情况下不预加载外部链接,以允许它们都data-instant-allow-external-links向<body>添加属性。

    要仅允许某些外部链接,data-instant请为其添加属性。

    仅预加载部分链接(白名单模式)

    如果您只想预加载特定链接,data-instant-whitelist请在<body>中添加a并通过向链接添加data-instant属性来标记要预加载的链接。

    内容拦截器

    出于可疑的原因,预取被某些内容拦截器(例如uBlock Origin)视为侵犯隐私。请务必在您的网站上禁用内容拦截器以查看正在发出的预加载请求。

    Firefox中的uBlock Origin完全禁用预取;如果您使用它,您需要暂时完全禁用扩展程序,而不仅仅是为您的站点关闭它。

    这只会影响使用EasyPrivacy列表的内容拦截器的用户。它适用于AdBlock;而uBlock Origin的用户是少数。如果您想让instant.page为您网站上具有隐私内容拦截器的用户工作,您可以自行托管该脚本

    技术细节

    使用 <link href=”url “> 完成预加载。

    源代码有200行可读。

    浏览器支持

    Instant.page是渐进式增强——对不支持它的浏览器没有影响。

    Chrome和基于Chromium的浏览器从61版(2017年9月发布)开始全面支持。

    Firefox支持<link>(从2006年开始!),但如果页面没有被缓存(这是一个开放的错误),它将重新下载页面。

    不兼容的浏览器

    Safari 13.0支持 <link> 但默认禁用。希望它将在2020年9月在Safari 14.0中启用。

    UC浏览器不支持模块,因为它基于Chromium 57。基于Chromium 69的支持模块的新版本于2018年10月宣布,但尚未发布。

    安全CDN

    Instant.page的脚本由Cloudflare Workers托管,因此没有服务器可以入侵。

    此外,它使用子资源完整性让现代浏览器验证文件未被篡改。它作为一个模块加载,因此大多数旧浏览器不会执行它。

    自托管

    也可以自己托管脚本。下载最新版本,然后在</body>之前添加一个模块脚本标签:

    <script src=“instantpage-5.1.1.js” type=“module” defer></script>
    <script src=”instantpage-5.1.1.js” type=”module” defer></script>
    <script src="instantpage-5.1.1.js" type="module" defer></script>

    你也可以通过npm安装它:

    npm i instant.page
    npm i instant.page
    npm i instant.page

    历史

    在hover和touchstart上预加载网页的想法来自我的一个旧库InstantClick,它于2014年1月推出,它使用Ajax和history.pushState而不是<link>,将网站转换为单一的页面应用。它使网站更加流畅,但需要额外的工作。

    不幸的是,InstantClick主要只是一个概念证明,因为它没有很好的文档。

    Google在2018年12月发布的quicklink会在链接显示后立即预加载带有<link>的链接,这清楚地表明我应该专注于构建一个“精简”、更易于使用的InstantClick版本,即Instant.page,于2019年2月推出。

    未来相关项目

    InstantClick提供了最流畅的体验,同时仍然不需要像框架一样多的工作(提供较少的结果),所以我正在考虑在2020年晚些时候再次开发它。它将重命名为“instant.page extra”。

  • WordPress上CDN加速能够极大地提升网站速度体验

    WordPress上CDN加速能够极大地提升网站速度体验

    网站速度方面的必备条件之一是内容交付网络 (CDN)。CDN减轻了您的Web服务器的负担,并加快了向所有站点访问者的内容交付。结果,从您的用户体验到搜索引擎潜力的一切都得到了改善!开始学习该主题的一个好方法是激活WordPress CDN。

    在本文中,我们将解释将CDN添加到WordPress网站的最简单方法。但在此之前,我们概述了CDN的基本定义为什么要使用CDN,以及一些额外的好处。我们还将分享一些速度测试,以便您更好地判断您希望在您的网站上看到多少性能提升。

    1. 什么是WordPress CDN?
    2. CDN的工作原理
    3. CDN的好处
    4. CDN速度测试:使用CDN与不使用CDN
    5. 您需要CDN吗?
    6. 流行的CDN提供商
    7. 如何在WordPress中安装 CDN

    什么是WordPress CDN?

    CDN是Content Delivery Network的缩写。这些是位于全球的服务器网络(也称为POP)。它们旨在托管和交付WordPress站点的静态(有时是动态)内容的副本,例如图像、CSS、JavaScript和视频流。

    CDN的工作原理

    首先,您不想让CDN与您的WordPress托管公司混淆。这些是完全不同的服务。CDN不是您的托管服务提供商的替代品,而是提高网站速度的另一种方式。虽然有可能您的网站托管速度非常快,但CDN可以让您的网站更快。

    CDN究竟是如何工作的?例如,当您托管网站时,您必须选择物理数据中心位置,例如美国中部、欧洲、南美或亚洲。假设您选择美国中部。

    这意味着您的网站实际上位于爱荷华州康瑟尔布拉夫斯的“主机服务器”上。当欧洲人访问您的网站时,加载时间比从德克萨斯州达拉斯访问的人要长。为什么?因为数据必须传播更远的距离。

    这就是所谓的延迟。延迟是指通过网络传输数据所涉及的时间和/或延迟。距离越远,延迟越大。

    这就是CDN发挥作用的地方。它通过从更靠近它们的服务器加载站点的内容来帮助减少延迟。这些CDN服务器有时称为POP(存在点)。

    CDN可减少延迟

    CDN可减少延迟,从而更快地向最终用户交付内容

    WordPress用户有时不愿意研究内容交付网络,因为它们听起来太复杂了。但是CDN的功能相对简单。以下是它们的工作方式,可以通过三个简单的步骤实现:

    第1步

    您注册一个带有免费CDN的托管服务提供商或选择一个单独的CDN提供商并订阅他们的服务。第三方CDN提供商通常会根据数据使用情况提供免费和高级计划。

    第2步

    您在您的网站上激活CDN。您可以为第三方CDN安装一个免费插件,如CDN EnablerWP Rocket来集成它。

    这些插件会自动将您的资产链接到CDN。您无需做任何工作即可将您的内容放到 CDN 上;这都是放手的!部署 CDN 比以前容易得多。

    第3步

    当人们访问您的网站时,它会从全球不同的服务器加载您的WordPress网站的内容。欧洲的访问者从欧洲的服务器接收您的网站内容,而美国的访问者从距离他们更近的美国服务器获得相同的内容。

    CDN如何实现这一目标?

    CDN通常使用两种技术将用户路由到正确的位置:IP Anycast + 地理位置路由。他们可以自动检测用户请求的来源并将请求路由到最近的服务器。

    但是,为您的WordPress主机选择战略服务器位置仍然至关重要。因为即使CDN有助于分发您的媒体和内容,当您的网站被加载时,仍然需要向托管服务提供商发出一个请求——除非您在代理服务器上使用整页缓存,我们稍后将对此进行介绍。

    CDN的好处

    以下是在您的WordPress网站上使用CDN的诸多好处。

    1. 性能提升

    性能提升是使用CDN的最大原因之一。已经反复证明,更快的加载网站与更高的转化率、更低的跳出率和更长的平均访问者持续时间相关——更不用说更好的用户体验了。

    您最后一次因为网站加载时间过长而在浏览器中点击返回是什么时候?这是网站所有者最不想发生的事情。但不要相信我们的话。以下是行业领导者关于网站性能重要性的一些统计数据:

    • 页面响应延迟1秒会导致转化率降低7%。(来源:Kissmetrics
    • BBC发现,网站加载后每多一秒钟就有10%的用户离开他们的网站。(来源:创意博客
    • 加载时间每延迟一秒,转化率就会降低多达20%。(来源:ThinkWithGoogle
    • 在将页面加载时间减少近40%后,Pinterest的注册量增加了15%。(来源:Pinterest Engineering on Medium

    以下是CDN可以帮助提高WordPress网站性能的几种方法。

    减少TTFB

    我们已经在上面提到,WordPress CDN可以通过缩短数据传输所需的物理距离来帮助减少延迟。但它也可以帮助您缩短第一个字节(TTFB) 的时间。

    这测量浏览器在从服务器接收到第一个数据字节之前等待的时间。获取该数据所需的时间越长,显示您的页面所需的时间就越长。

    CDN可以帮助减少TTFB

    CDN可以帮助减少TTFB

    一个常见的误解是TTFB是在DNS查找时间之后计算的。但是,原始网络中TTFB的计算总是包括网络延迟。这涉及一个3步过程,因此延迟和延迟可能会发生在两者之间的任何地方,从而增加您的总TTFB。

    高TTFB可能由多种原因引起,例如糟糕的代码或主机服务器上配置错误的缓存。但地理距离是一个问题。

    我们进行了两项测试,以显示使用和不使用Cloudflare的TTFB的差异。我们每个测试运行5次,然后取平均值。

    测试 1:没有CDN的 TTFB

    我们首先在禁用CDN的情况下运行了Pingdom测试。结果如下:

    • 总加载时间为1.45 s
    • 平均TTFB约为136毫秒

    添加CDN之前的TTFB

    添加CDN之前的TTFB

    测试 2:TTFB与CDN

    然后我们启用了CDN并再次运行测试:

    • 总加载时间降至788毫秒
    • 平均TTFB提高到37毫秒

    CDN能带来多大的改变!

    另一个需要注意的重要事项是,我们选择了斯德哥尔摩地点来执行此测试。为什么?因为我们想向您展示通过减少物理距离可以实现的真正改进。斯德哥尔摩有一个CDN POP,所以我们的内容是从斯德哥尔摩提供的。

    添加CDN后的TTFB

    添加CDN后的TTFB

    通过缓存更快地交付

    与您在WordPress主机或插件中使用缓存的方式类似,CDN也使用缓存。这是他们可以如此快速地交付文件的一种方式。

    重要提示:一旦CDN获得您的媒体副本,访问者通常必须请求一次或两次,然后才能将其缓存在CDN上。CDN在请求上放置一个名为“X-Cache”的HTTP标头。该文件通常在第一个或第二个请求中显示为MISS,这意味着它尚未缓存。

    CDN未缓存 (MISS)

    CDN未缓存 (MISS)

    在后续请求中,它显示为HIT,现在缓存在您的CDN上。它将根据各种因素(例如ETag标头、过期标头或手动清除CDN缓存)保持缓存。

    CDN缓存 (HIT)

    CDN缓存 (HIT)

    使用诸如Cloudflare之类的CDN,您可以利用所谓的全页反向代理缓存将缓存提升到一个新的水平。这涉及在一个主 URL 而不是辅助域上缓存所有内容。

    使用GZIP压缩节省大量成本

    WordPress CDN还利用GZIP,一种用于文件压缩和解压缩的文件格式和软件应用程序。GZIP压缩在服务器端(或CDN服务器/POP)启用,进一步减小了HTML、样式表和JavaScript文件的大小。

    它不适用于图像,因为它们已经以不同的方式压缩。由于压缩,有些人已经看到了高达70%的减少。这是您可以进行的最直接的优化之一。不用担心,所有信誉良好的CDN都默认启用此功能。

    HTTP/2

    HTTP/2也是所有CDN用来加速资产交付的主要功能之一。性能提升是由于各种原因,例如协议能够支持更好的多路复用、并行性、Huffman编码的HPACK压缩、ALPN扩展和服务器推送。

    2. 降低带宽成本

    CDN的另一个好处是它可以帮助从您的托管服务器(源服务器)卸载CPU和资源。这有助于:

    • 防止流量高峰使您的主机不堪重负
    • 降低整体带宽成本
    • 消除由于流量波动导致的带宽费用波动

    您最不想要的就是让某些东西像病毒一样传播开来,而您却要从房东那里收到高额账单或超额费用。

    CDN帮助降低成本的另一种方法是提供简单的方法来启用盗链保护。这是指限制HTTP引用并防止其他人将您的资产嵌入其他网站。

    你们中的一些人可能听说过赫芬顿邮报的惨败。《赫芬顿邮报》的一位作者从Oatmeal的网站复制并粘贴了图像,该网站从AWS累积了1,000美元的账单,该账单已发送给Oatmeal的网站所有者。Oatmeal的所有者最终替换了这些图像,以便赫芬顿邮报文章的读者可以看到它们。

    防盗链

    防盗链

    这就是为什么始终必须启用盗链保护的原因。否则,您最终可能会收到一笔离谱的账单。

    3. 高可用性和可扩展性

    CDN提供高可用性和可扩展性。由于复制的内容可以跨不同地理位置的多个POP访问,因此如果一个服务器出现故障,Web流量会动态路由到另一台服务器。无需担心可扩展性,因为CDN提供商在构建时就考虑到了这一点。如果您使用较小的共享主机,CDN可以防止您的网站崩溃,因为它可以处理大部分负载。

    4. SEO优势

    谷歌早在2010年就将网站速度作为排名因素,因此更快的网站可以带来更高的排名已经不是什么秘密了。虽然无法知道速度对速度有多大影响,但您可以放心地假设它是更关键的因素之一,因为它会影响用户体验。

    Brian Dean分析了前100万个域名,以查看网站速度与Google排名之间的关系, 并发现了正相关关系。虽然这些测试几乎无法证明,但您可以放心,拥有更快的网站只会在Google中帮助您。简而言之,谷歌奖励快速网站。

    网站速度 - 谷歌排名

    网站速度 – 谷歌排名

    除了网站页面的速度之外,CDN还有助于提高媒体的抓取速度,例如图片,这与Google图片搜索中的索引相关。

    5. 额外的安全性

    许多CDN通过允许您实施Web应用程序防火墙 ( WAF ) 和一些所谓的Origin shields来提供额外的安全性。这些可以帮助:

    • 缓解各种形式和规模的DDoS攻击,包括针对UDP和ICMP协议的攻击
    • 阻止SYN/ACK、DNS放大和第7层攻击
    • 将您的网站放在代理后面,该代理会隐藏您的原始IP地址,尽管它不是防弹的

    查看我们关于如何阻止DDoS攻击的案例研究。我们的客户拥有一个运行Easy Digital Downloads的小型电子商务网站,该网站在7天内对单个页面的请求超过500万次

    该站点通常每天仅产生30-40 MB的带宽和数百名访问者。但该网站突然间突然达到了每天15-19GB 的数据传输量!这增加了4650%。谷歌分析显示没有额外的流量。这不好。

    DDoS攻击

    DDoS攻击

    客户在他们的站点上实施了Sucuri的Web应用程序防火墙,所有带宽和请求都立即丢弃在站点上(如下所示),此后再也没有出现过任何问题。因此,如果您遇到此类问题,这是一项很好的投资和节省时间的方法。

    添加WAF防火墙

    CDN还提供额外的安全功能,例如安全令牌,允许您生成具有过期时间的安全链接。过期后,用户将无法再访问该内容。

    CDN速度测试:使用CDN与不使用CDN

    让我们做一些测试来向您展示结果,而不是仅仅告诉您WordPress CDN的好处。

    • 我们从4个不同的测试位置运行了5次测试,启用了CDN,然后没有启用CDN。
    • 该站点使用免费的Cloudflare。
    • 服务器的物理位置在美国爱荷华州。

    重要提示:当您对CDN进行速度测试时,请运行几次以缓存媒体。正如我们之前关于CDN缓存所描述的,X-Cache HTTP标头在缓存后将显示“HIT”。如果它没有被缓存,它会显示一个“MISS”。如果您没有正确执行此操作,那么当您没有先建立缓存时,CDN可能无法帮助您加快网站速度。

    没有CDN(美国德克萨斯州达拉斯)

    我们首先使用达拉斯的一台没有CDN的服务器运行了5次Pingdom测试。然后我们取平均值。

    没有使用达拉斯服务器进行CDN测试

    没有使用达拉斯服务器进行CDN测试(来源:Pingdom)

    没有CDN(澳大利亚墨尔本)

    然后,我们使用没有CDN的澳大利亚墨尔本服务器运行了5次Pingdom测试。也取了平均值。

    没有使用澳大利亚服务器的CDN测试

    没有使用澳大利亚服务器的CDN测试(来源:Pingdom)

    没有CDN(美国加利福尼亚州圣何塞)

    然后,我们在加利福尼亚州圣何塞进行了5次没有CDN的Pingdom测试,并取平均值。

    没有来自圣何塞服务器的CDN测试

    没有来自圣何塞服务器的CDN测试(来源:Pingdom)

    没有CDN(瑞典斯德哥尔摩)

    我们在瑞典斯德哥尔摩进行了5次没有CDN的Pingdom测试,并取了平均值。

    没有在瑞典使用服务器进行CDN测试

    没有在瑞典使用服务器进行CDN测试(来源:Pingdom)

    使用CDN(美国德克萨斯州达拉斯)

    作为比较,我们使用德克萨斯州达拉斯服务器上的活动CDN运行了5次Pingdom测试。之后取平均值。

    使用达拉斯服务器使用CDN进行测试

    使用达拉斯服务器使用CDN进行测试(来源:Pingdom)

    使用CDN(澳大利亚墨尔本)

    然后,我们使用来自澳大利亚墨尔本服务器的CDN运行了5次Pingdom测试,然后取平均值。

    用CDN测试澳大利亚

    用CDN测试澳大利亚(来源:Pingdom)

    使用CDN(美国加利福尼亚州圣何塞)

    我们还使用加利福尼亚州圣何塞的服务器对CDN进行了5次Pingdom测试并取平均值。

    使用San Jose服务器进行CDN测试

    使用San Jose服务器进行CDN测试(来源:Pingdom)

    使用CDN(瑞典斯德哥尔摩)

    我们为具有活动CDN的Stockholm服务器运行了5次Pingdom测试。然后取平均值。

    使用瑞典的服务器进行CDN测试

    使用瑞典的服务器进行CDN测试(来源:Pingdom)

    结果

    让我们看看结果以了解CDN对总加载时间的影响程度。

    CDN速度测试对比

    CDN速度测试对比

    • 美国德克萨斯州达拉斯:使用CDN将总加载时间减少8.11%。
    • 美国加利福尼亚州圣何塞:使用CDN的总加载时间减少33.02%
    • 澳大利亚墨尔本:使用CDN的总加载时间减少了54.19%。
    • 瑞典斯德哥尔摩:使用CDN的总加载时间减少了54.7%。

    CDN在达拉斯和圣何塞站点上产生了稍快的页面加载时间。但是,如果您查看澳大利亚的测试,您会发现加载时间存在巨大差异。这是因为测试服务器的地理位置。

    测试服务器位于爱荷华州,因此在没有来自达拉斯和圣何塞的CDN的情况下加载数据时不会走那么远。但对于澳大利亚来说,距离才是缩短加载时间的关键。

    当我们启用CDN时,来自澳大利亚悉尼的CDN POP的内容和媒体加载,这会导致下载时间大大加快。瑞典斯德哥尔摩也是如此。

    现在,您想在某些情况下将加载时间减少50%以上吗?答案应该是肯定的!

    您需要CDN吗?

    我们经常收到这个问题。根据我们的经验,这不应该是一个问题,因为CDN在几乎所有情况下都是有益的,无论您的网站的大小和流量如何。

    看看我们上面列出的所有好处。价格通常不再是一个因素,因为大多数CDN提供商非常便宜,或者使用免费Cloudflare。更不用说,CDN有助于改善SEO、网站加载、用户体验等等!

    如果您只向特定地理位置的访问者提供内容,您可能需要做一些进一步的测试。

    例如,假设您在加拿大安大略省经营一家带有网站的小商店。也许您不太关心位于其他地方的客户。您需要研究CDN提供商的POP所在的位置。

    如果您的网络服务器主机位于安大略省,但您注册的CDN提供商仅在美国提供最近的POP,则可能会降低您的网站速度。在这种非常罕见的情况下,不使用CDN可能会使您受益。

    有很多很棒的CDN提供商,我们鼓励您探索其他一些顶级 CDN:

    如何在WordPress中安装CDN

    每个CDN提供商都有自己的集成方法,但值得庆幸的是,它们都支持WordPress并使其易于集成。如果您遇到问题,请查看他们的文档或询问他们的支持团队。

    Cloudflare

    如果您正在使用Cloudflare,我们将提供有关如何在您的WordPress网站上安装Cloudflare的深入教程。

    第三方CDN

    如果您正在考虑自己部署CDN,我们建议为您的媒体和资产使用子域,而不是提供商的随机URL。

    示例: cdn.yourdomain.com。

    这将确保更好地为您的网站打造品牌,并在索引问题方面减少麻烦。

    在提供商处设置好CDN后,您可以使用免费的WordPress插件快速链接您的资产并自动将它们复制到您的CDN提供商。在下面查看我们推荐的WordPress CDN插件列表。

    顶级CDN插件和扩展

    Cloudflare

    这些CDN插件不会自动在您的WordPress网站上激活CDN,而是将第三方CDN提供商(如Cloudflare、Fastly或Sucuri)连接到您的WordPress网站,从而允许CDN访问网站资产并将该内容交付给访客。

    总体而言,最好的WordPress CDN插件让您轻松连接,提供一键式解决方案,而不是复杂的集成。

    以下是最好的WordPress CDN插件:

    • Cloudflare:如果使用Cloudflare作为您的CDN提供商,这是正确的选择,特别是因为它提供一键式安装、Web应用程序防火墙设置和自动平台优化工具,可通过250多个快速可靠的数据显着加快站点速度中心。
    • Bunny.net:作为CDN提供商和WordPress CDN插件,Bunny.net提供快速集成来替换链接并将它们添加到您的CDN。通过自动HTTPS配置、自定义CDN主机名以及将特定目录排除在CDN服务之外的能力,您可以获得快速的性能改进。
    • LiteSpeed Cache:首先,这是一个缓存插件。但它还附带免费的QUIC.cloud CDN缓存,或者您可以链接到任何CDN提供商。您可以使用各种功能以及缩小、图像优化和延迟加载来提高网站的性能。
    • W3 Total Cache:许多缓存插件也兼作CDN WordPress插件,W3 Total Cache也不例外。与一些最受欢迎的CDN提供商集成,无需任何复杂设置即可立即提升您的网站性能。这会将媒体项目和主题文件等元素发送到CDN,同时在CDN中使用之前缓存和压缩这些文件。
    • CDN Enabler: 此插件重写您的所有URL,以便从您的外部CDN提供资产。您可以链接到KeyCDN帐户并利用缓存清除、性能增强等。

    使用CDN索引图像

    您希望确保Google在移动到CDN时仍会为您的图像编制索引。

    对于Yoast SEO插件的用户,您需要将以下代码添加到您的functions.php文件的底部。将域和CDN域替换为您自己的域。

    function wpseo_cdn_filter( $uri ) {
    return str_replace( ‘http://yourdomain.com’, ‘http://cdn.yourdomain.com’, $uri );
    }
    add_filter( ‘wpseo_xml_sitemap_img_src’, ‘wpseo_cdn_filter’ );
    function wpseo_cdn_filter( $uri ) {

    return str_replace( ‘http://yourdomain.com’, ‘http://cdn.yourdomain.com’, $uri );

    }

    add_filter( ‘wpseo_xml_sitemap_img_src’, ‘wpseo_cdn_filter’ );

    function wpseo_cdn_filter( $uri ) {
    
    return str_replace( 'http://yourdomain.com', 'http://cdn.yourdomain.com', $uri );
    
    }
    
    add_filter( 'wpseo_xml_sitemap_img_src', 'wpseo_cdn_filter' );

    如果您不这样做,可能会导致您的图像被取消索引(如下所示)。您可以随时在Google Search Console中自行检查。

    图片未编入索引

    图片未编入索引

    但是,Google Search Console存在缺陷,有时当索引图像出现在Google上时无法报告它们。检查您的图像是否被索引的一个好方法是前往谷歌图像搜索并输入以下内容:“site:https://yourdomain.com”。

    谷歌图片搜索检查索引

    谷歌图片搜索检查索引

    重要提示:不要输入您的CDN URL。即使图像是从CDN提供的,它们仍应在您的根域上编制索引。

    如果您的图片出现在Google图片搜索中,它们就会被很好地编入索引。

    小结

    现在您可以看到使用WordPress CDN可以获得的所有奇妙好处。它将确保您的媒体在全球范围内更快地加载,减少您的TTFB,并显着降低您的带宽成本和服务器负载。

    不仅如此,由于更快的页面加载时间,您还可以看到更好的排名。最重要的是,您的访问者将获得更出色的用户体验。