分类: WordPress优化

  • 提高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网站正确地配置Cloudflare

    如何为WordPress配置Cloudflare

    通过在您的站点前充当反向代理,Cloudflare是一种一体化的安全和性能产品,被全球超过12%的网站使用。作为WordPress 用户,将Cloudflare添加到您的网站有助于提高网站性能并减少恶意机器人和黑客的影响。

    正确配置后,对您站点的所有请求将首先到达Cloudflare服务器,然后该服务器将确定是否应将请求转发到源服务器、从缓存中提供服务、阻止或使用自定义规则进行处理。

    在本指南中,我们将深入探讨WordPress的最佳Cloudflare设置,讨论缓存和安全设置,并向您展示如何为WordPress多站点安装配置Cloudflare 。

    1. 如何为WordPress配置Cloudflare
    2. Cloudflare WordPress插件
    3. WordPress的Cloudflare自动平台优化
    4. Cloudflare Argo和Railgun
    5. 如何为WordPress多站点配置Cloudflare

    如何为WordPress配置Cloudflare

    Cloudflare提供了多种安全和性能优势,但并非所有这些优势都与WordPress完全兼容。让我们深入了解Cloudflare的设置,以确定适合您的WordPress网站的最佳功能。

    1. SSL
    2. 速度
    3. 缓存
    4. 防火墙

    SSL

    Cloudflare支持四种SSL/TLS加密模式——Off, Flexible, Full和Full (Strict)。

    • Off –不加密。
    • Flexible –仅加密浏览器和Cloudflare之间的连接。
    • Full –端到端加密,但允许在源服务器上使用自签名证书。
    • Ful (Strict) –端到端加密,需要来自Cloudflare的免费原始证书或来自受信任CA(证书颁发机构)的证书。我们建议使用Full (Strict)  SSL模式以获得最大的安全性。

    对于希望在其WordPress网站上使用Cloudflare的用户,我们建议在宝塔面板中生成免费的Let’s Encrypt SSL证书,并在Cloudflare中使用Full或Full (Strict) 选项。

    或者,您还可以生成Cloudflare原始证书以安装在您的原始服务器上。如果您的主机不提供免费的SSL证书,则在您的服务器上安装Cloudflare原始证书将允许您使用Full (Strict) SSL模式。

    如果您使用在子域上托管站点,而根域使用Cloudflare的Flexible SSL,则可以使用Cloudflare页面规则强制子域使用Full或Full (Strict)  SSL。

    为具有Cloudflare页面规则的子域启用Full (Strict)  SSL

    为具有Cloudflare页面规则的子域启用Full (Strict)  SSL

    此选项允许您使用Cloudflare的Flexible SSL,同时确保子域的Cloudflare Full (Strict) SSL。

    始终使用HTTPS

    我们建议启用此选项以自动将所有HTTP请求转发到HTTPS

    HSTS

    HSTS代表“HTTP Strict Transport Security”,用于强制Web浏览器使用安全的HTTPS连接。在Cloudflare上启用HSTS可确保HTTP请求永远不会到达您的源服务器。如果您的站点已设置为使用HTTPS,我们建议您也在源服务器上配置HSTS

    最低TLS版本

    TLS(传输层安全性)是一种加密协议,允许通过网络安全传输数据。默认情况下,Cloudflare为协议版本设置TLS 1.0。某些安全标准(例如 PCI DSS 3.2)需要更新版本的TLS协议以实现合规性。如果您的站点需要某个TLS版本,您可以通过转到SSL/TLS > Edge Certificates > Minimum TLS Version来更改设置。

    自动HTTPS重写

    此功能检查HTML代码中的HTTP资源URL以查看它们是否可通过HTTPS访问。如果是这样,它们将使用HTTPS变体自动重写。自动HTTPS重写对于确保没有混合内容错误的安全浏览体验非常有用。

    速度(Speed)

    大多数与性能相关的Cloudflare设置,例如资产缩小和图像优化,都可以在“Speed”选项卡中找到。

    图像大小调整(仅限商业计划)

    Cloudflare的图像大小调整功能仅适用于商业计划用户。在您的WordPress主题中正确实施后,此功能可用于将图像缩略图生成offload到Cloudflare。与WordPress中的内置缩略图生成功能相比,这有几个好处。

    对于动态生成图像大小的站点,使用Cloudflare的图像大小调整功能可以降低CPU使用率——这允许您的站点在不增加CPU资源的情况下为更多并发用户提供服务。Cloudflare图像大小调整还有助于减少磁盘空间使用,因为缩略图不必存储在服务器上。

    Cloudflare图像大小调整通过在图像前添加端点来工作。请看下面的示例,该示例显示了该功能的工作原理。

    原始图片网址

    https://yourdomain.com/wp-content/uploads/2020/01/picture.jpg

    调整大小的图像URL

    https://yourdomain.com/cdn-cgi/image/fit=contain,format=auto,metadata=none,onerror=redirect,quality=70,width=720/https://yourdomain.com/wp-content/uploads/2020/01/picture.jpg

    可以调整“宽度”参数以动态生成不同的缩略图大小,而无需在源服务器上增加任何额外的资源负载。如果您正在寻找类似于Cloudflare的图像大小调整功能的独立服务,Imgix和Cloudinary是不错的选择。

    不要忘记查看我们关于优化网络图像的深入指南。

    Polish(仅限专业版)

    Cloudflare Polish是一种图像优化服务,可自动压缩JPG、PNG、GIF和其他图像文件。图像在Cloudflare边缘处理,这意味着托管WordPress站点的服务器没有性能负担。Polish还支持Google的WEBP格式 ——这意味着优化的WEBP图像将自动提供给支持该格式的Chrome、Brave和其他浏览器。

    出于几个原因,Polish是WordPress网站的一项有用功能。如果您使用的是ShortPixelImagify等图像优化插件,Polish可以显着降低服务器的CPU使用率——这可以为访问者带来更稳定的浏览体验。由于Polish的图像是在服务器外存储和缓存的,因此您不必担心用尽磁盘空间来存储图像的WEBP版本。

    Auto Minify

    Cloudflare的Auto Minify功能会自动缩小缓存的CSS、JSS和HTML资产。如果您不使用AutoptimizeWP-Rocket等WordPress插件来缩小资产,我们建议您在Cloudflare中启用自动缩小功能。

    Brotli

    Brotli是GZIP的替代方案,GZIP是一种压缩算法,可在将Web请求提供给访问者之前减小它们的大小。与GZIP相比,Brotli提供了更高的压缩比,这意味着用户的页面加载速度更快。问题是并非所有的网络浏览器都支持Brotli压缩。无论如何,我们建议启用Cloudflare的Brotli功能,因为来自不受支持的浏览器的请求只会退回到GZIP压缩。

    增强的HTTP/2优先级(仅限专业版)

    HTTP/2的引入通过并行化和多路复用为网站带来了显着的性能提升。Cloudflare增强的HTTP/2优先级功能更进一步,它通过智能解析您网站的HTML来确定加载资产的顺序以获得最佳性能。根据Cloudflare的说法,增强的HTTP/2优先级可以将页面加载时间减少多达50%。

    Mirage(仅限专业版)

    Mirage是一项针对移动和低带宽连接的图像优化功能。启用Mirage后,在初始页面加载期间,图像将替换为低分辨率占位符。页面加载后,全分辨率图像被延迟加载。

    Mirage还能够将多个图像请求组合成一个请求,从而减少完全加载页面所需的往返次数。如果您的网站使用大量图片并针对移动设备较多的人群,Cloudflare Mirage可以对性能产生积极影响。

    Rocket Loader

    Rocket Loader是一项通过异步加载JavaScript资源来加快加载时间的功能。这有效地减少了页面的渲染阻塞内容,从而加快了页面加载时间。我们建议您在启用Rocket Loader的情况下测试您的网站,看看它是否能提高您的页面速度。如果您的WordPress站点依赖于以特定顺序加载的JavaScript资产,您可以通过向脚本标签添加属性data-cfasync="false"来绕过Rocket Loader。

    缓存(Caching)

    默认情况下,Cloudflare会缓存CSS 、JS和图像文件等静态资产。请注意,默认情况下,Cloudflare不会缓存您网站生成的HTML。

    缓存级别

    我们建议将缓存级别保留为“Standard”,这允许使用唯一查询字符串访问资产的更新版本。

    浏览器缓存有效期

    如果你的服务器本身已经设置了浏览器缓存有效期,我们建议将浏览器缓存过期设置设置为“Respect Existing Headers”。如果您想用更短的过期时间覆盖此设置,请随时更改此设置。

    防火墙(Firewall)

    如果您的主机不提供可自定义的防火墙,Cloudflare的免费计划包括一个允许五个自定义规则的基本防火墙。防火墙规则可以配置为阻止特定的IP地址、用户代理、请求方法、HTTP引用,甚至国家。

    例如,如果您发现您的WooCommerce商店从目标市场以外的国家/地区收到大量虚假订单,您可以使用Cloudflare的免费防火墙来阻止来自整个国家/地区的流量。

    Cloudflare的Pro计划具有更强大的Web应用程序防火墙 (WAF)。WAF提供专门的托管规则集,有助于进一步保护您的站点。例如,有一些针对WordPress和PHP站点的规则集。

    用于WordPress的Cloudflare托管规则集

    用于WordPress的Cloudflare托管规则集

    对于大多数WordPress网站,Cloudflare的免费计划提供的安全级别就足够了。但是,如果您正在运行需要更多保护的任务关键型业务站点,Cloudflare的专业级WAF和托管规则集可以帮助进一步保护您的站点。

    (推荐阅读:Sucuri vs Wordfence

    网络(Network)

    在Cloudflare的“Network”设置中,我们建议启用HTTP/2、HTTP/3(使用QUIC)和0-RTT连接恢复。

    正如我们前面提到的,HTTP/2通过并行化和多路复用为HTTP/1.1带来了一些改进。类似地, HTTP/3通过使用称为QUIC的新的基于UDP的协议而不是传统的TCP,进一步扩展了HTTP/2的性能

    启用HTTP/2、HTTP/3和0-RTT连接恢复

    启用HTTP/2、HTTP/3和0-RTT连接恢复

    安全的HTTP/3连接还受益于优化的握手例程,从而缩短了连接时间。在Cloudflare仪表盘中启用HTTP/3后,受支持的客户端将能够使用HTTP/3连接到Cloudflare服务器。

    最后,Cloudflare的0-RTT连接恢复功能缩短了之前连接到您网站的访问者的加载时间。

    页面规则(Page Rules)

    Cloudflare的页面规则功能允许您自定义特定URL的设置。页面规则对于禁用某些资产的缓存、更改所选页面的安全级别等很有用。Cloudflare页面规则有两个关键组件——URL匹配模式和对匹配的URL执行的操作。在下面的屏幕截图中,您可以看到将www URL重定向到非www版本的Cloudflare页面规则。

    Cloudflare转发URL页面规则

    Cloudflare转发URL页面规则

    此规则匹配以 www.brianonwp.com开头的URL。请注意星号字符的包含,它允许您创建通配符匹配模式。把星号想象成“这里的任何东西”。在URL模式下,您可以看到该页面规则配置为301将所有匹配的请求重定向到https://brianonwp.com/$1,其中“$1”是指匹配模式中的“第一个通配符”。

    使用像这样的页面规则,请求www.brianli.com/specific-page/将被重定向到brianli.com/specific-page/.

    使用Cloudflare页面规则,您可以将特定设置应用于任何匹配的URL。查看下面可应用于页面规则的设置列表。某些设置甚至可以组合成一个页面规则!

    • Always Online –启用或禁用Cloudflare的“Always Online”功能,如果发现原始服务器离线,该功能会提供页面的静态HTML副本。
    • Always Use HTTPS –对匹配的URL强制使用HTTPS。
    • Auto Minify –启用或禁用HTML、CSS和JS缩小。
    • Automatic HTTPS Rewrites –启用将HTML中的HTTP URL重写为HTTPS版本。
    • Browser Cache TTL –指定匹配URL上的浏览​​器缓存TTL。例如,您可以为不同类型的文件设置不同的浏览器缓存TTL。
    • Browser Integrity Check –启用或禁用Cloudflare的“Browser Integrity Check”功能,该功能检查HTTP标头以清除机器人和恶意流量。
    • Cache Deception Armor –启用或禁用Cloudflare的“Cache Deception Armor”功能,该功能通过确保资产的文件扩展名与其“Content-Type”匹配来防止Web缓存欺骗攻击
    • Cache Level –配置匹配URL的缓存级别。
    • Disable Apps –禁用Cloudflare应用程序集成以匹配URL。
    • Disable Performance –禁用匹配URL的性能相关功能。
    • Disable Railgun –禁用Railgun以匹配URL。
    • Disable Security –禁用匹配URL的安全功能。
    • Edge Cache TTL –指定边缘缓存TTL(资产在Cloudflare的边缘网络上缓存的时间量)。
    • Email Obfuscation –启用或禁用Cloudflare的电子邮件混淆脚本,该脚本通过扰乱电子邮件地址来减少成功的机器人抓取。
    • Forwarding URL –创建一个301或302重定向到另一个URL。
    • IP Geolocation Header –启用或禁用Cloudflare的IP地理位置HTTP标头。
    • Opportunistic Encryption –允许客户端通过安全的TLS通道访问HTTP URL。
    • Origin Cache Control –指定您希望Cloudflare如何响应源服务器的“Cache-Control”指令。
    • Rocket Loader –在匹配的URL上启用或禁用Rocket Loader。
    • Security Level –指定匹配URL的安全级别。
    • Server Side Excludes –<!--sse-->启用或禁用Cloudflare的“服务器端排除”功能,该功能可让您通过在标签中包装HTML来隐藏可疑流量中的敏感信息。
    • SSL –指定匹配URL的SSL级别(disabled, flexible, full, or full strict)。

    Cloudflare WordPress插件

    Cloudflare团队维护一个官方的WordPress插件。虽然这个插件不是绝对要求,但它确实提供了一些不错的功能,包括WordPress优化的Cloudflare设置、WordPress特定的安全规则集、自动缓存清除、HTTP/2服务器推送等。

    Cloudflare WordPress插件设置

    Cloudflare WordPress插件设置

    WordPress的Cloudflare自动平台优化

    Cloudflare的WordPress自动平台优化 (APO)是针对WordPress网站的专用性能优化服务。Cloudflare APO的工作原理是直接在Cloudflare边缘网络上缓存您的WordPress站点的HTML页面。这是对CDN上静态资产(CSS、JS、图像等)的典型缓存的一大飞跃。在我们的基准测试中,我们发现启用Cloudflare APO会导致性能提高70-300%,具体取决于测试位置。

    Cloudflare APO for WordPress通过将页面的HTML副本存储在Workers KV中来工作,Workers KV是一种全球分布的键值存储服务。启用APO后,对您站点的请求将由Workers KV或Cloudflare的边缘缓存而不是您的源服务器提供服务。这是WordPress性能领域向前迈出的一大步,因为有了APO,WordPress站点不再受源服务器位置的限制。

    在Cloudflare仪表盘中为WordPress启用自动平台优化

    在Cloudflare仪表盘中为WordPress启用自动平台优化

    以前,使用传统的CDN设置,HTML页面仍然必须由源服务器提供服务。例如,如果您网站的源服务器位于美国,则来自伦敦的访问者必须等待从美国发送的HTML文档。使用APO,HTML和其他静态资产由靠近伦敦的Cloudflare数据中心提供。

    Cloudflare APO与传统博客、新闻站点、登录页面和其他不依赖动态功能的站点(WooCommerce商店、论坛等)最兼容。APO会自动绕过Cloudflare对登录用户和包含某些cookie的页面(例如WooCommerce)的HTML缓存。APO作为Cloudflare Pro、Business和Enterprise计划的免费服务提供。对于免费的Cloudflare用户,APO是每月5美元的附加组件。

    如果您有兴趣了解有关Cloudflare APO的更多信息,请在此处查看我们的深入指南

    Cloudflare Argo和Railgun

    Cloudflare提供额外的性能产品,可能有助于进一步提升您的WordPress网站的性能。这些功能需要支付额外费用,但如果您想在网站优化方面加倍努力,它们可能值得一看。

    Argo

    Argo是一项Cloudflare附加服务,可为您的网站提供“智能路由”。启用Argo后,流量将围绕Cloudflare网络中的拥塞区域进行路由。在我们的测试中,Argo将页面加载时间减少了20-30%。如果您是Cloudflare用户,希望在性能优化方面更加努力,那么试用Argo可能会产生积极的结果。

    Railgun

    Cloudflare的Railgun是一种WAN产品,可在您的服务器和Cloudflare的服务器之间建立安全隧道。Railgun旨在通过仅提供请求之间的整体差异来加速未缓存内容的交付。例如,如果页面A和页面B具有相同的页眉和页脚结构,但正文内容不同,Railgun会意识到这一点,并仅通过高度压缩的二进制数据流来处理差异。

    Railgun仅适用于Cloudflare的商业和企业计划,并且需要您的网络主机在您站点的服务器上安装其他软件。对于大多数用户来说,使用Cloudflare保持快速加载时间不需要Railgun加速。但是,如果您正在运行无法缓存的高流量WooCommerce商店或论坛,Railgun可能有助于提高您的网站速度。

    如何为WordPress多站点配置Cloudflare

    如果您将Cloudflare与WordPress多站点一起使用,则在设置时应考虑一些特殊注意事项。

    SSL设置

    为了演示适用于WordPress多站点的Cloudflare SSL设置,我们创建了一个测试子域多站点,因为如果您使用子目录多站点,您应该不会遇到任何SSL问题。

    这是我们的测试子域WordPress多站点的结构:

    • 主站点 – brianwp.com和www.brianwp.com
    • 子站点 1 – site1.brianwp.com
    • 子站点 2 – site2.brianwp.com

    首选,我们需要为多站点添加了域。

    同样,域已在Cloudflare中配置了适当的A记录。Cloudflare代理也已启用,如橙色云图标所示。

    WordPress多站点的Cloudflare DNS记录

    WordPress多站点的Cloudflare DNS记录

    要在Ful (Strict) SSL模式下使用Cloudflare,所有关联的域都必须存在于源服务器的SSL证书上。有两种方法可以做到这一点。

    让我们加密或付费SSL

    如果您的主机支持免费的Let’s Encrypt SSL,请继续生成涵盖所有多站点域的SSL证书。

    在宝塔面板上,你可以轻松生成涵盖所有域的SSL证书。

    在宝塔面板中为您的多站点生成SSL证书

    在宝塔面板中为您的多站点生成SSL证书

    Cloudflare Origin SSL证书

    或者,您可以生成涵盖多站点域的Cloudflare Origin SSL证书。要生成原始证书,请导航到SSL/TLS > Origin Server,然后单击“Create Certificate”。

    生成Cloudflare原始证书

    生成Cloudflare原始证书

    原始证书生成菜单分为三个部分。在第一部分中,选择“Let Cloudflare generate a private key and a CSR”,除非您有特定理由提供自己的凭据。

    在第二部分中,输入SSL证书需要覆盖的域和子域。您只能为Cloudflare帐户中的域生成证书。

    最后,在第三部分,选择证书有效期。

    设置包含所有多站点域的正确SSL证书后,您将能够在推荐的Full (Strict)  SSL模式下使用Cloudflare。如果您将来需要向多站点添加其他域或子域,请务必生成涵盖其他域的新SSL证书。

    WordPress多站点的页面规则

    Cloudflare的其他安全和性能功能全局适用于您的根域下的所有子域。换句话说,如果我们的主站点brianwp.com启用了CSS缩小,那么site1.brianwp.com和site2.wpbrianli.com也将启用它。

    在某些情况下,此默认行为可能会导致问题。例如,您可能不想仅仅因为它与单个子站点不兼容而全局禁用HTML、CSS和JS优化。要解决此问题,您可以使用自定义页面规则有选择地禁用特定子域的功能。

    在下面的示例中,我们设置了一个针对*site2.brianwp.com/*页面规则. *字符用于指定通配符行为。您可以将其*视为“这里的任何东西”。

    对于此页面规则,我们禁用了HTML、CSS和JS的自动缩小,禁用了Rocket Loader,绕过了Cloudflare缓存,并关闭了自动HTTPS重写。

    创建选择性Cloudflare页面规则以定位WordPress子网站

    创建选择性Cloudflare页面规则以定位WordPress子网站

    如果您使用Cloudflare的免费计划,请注意它仅附带三个页面规则。如果您需要对多个子站点进行选择性调整,则需要升级到Pro计划或购买额外的页面规则

    小结

    了解如何为您的WordPress网站配置Cloudflare以及如何与您的托管堆栈正确集成可以对您的网站速度和安全性产生积极影响。

  • 如何在WordPress中添加缓存文件过期标头

    如何在WordPress中添加缓存文件过期标头

    您是否刚刚通过速度测试工具运行您的WordPress网站,却被告知您需要“Add Expires headers”到您的WordPress网站?

    缓存过期标头是让Web浏览器知道是从访问者的浏览器缓存还是从您的服务器加载网页资源(如图像)的规则。这些可以帮助提高您网站的性能。除此之外,它们也是YSlow性能建议的一部分,这意味着它们会影响您在GTmetrix等工具中的性能“分数” 。

    在这篇文章中,我们将解释什么是过期标头以及它们如何影响您的网站。然后,我们将向您展示如何使用几种不同的方法在WordPress中添加过期标头。

    但首先,我们需要快速绕道讨论另一个主题——浏览器缓存。

    1. 什么是浏览器缓存?
    2. 什么是过期标头?
    3. 如何修复WordPress中的“添加过期标头”
    4. 如何测试Expires标头是否正常工作
    5. 如何为外部脚本添加过期标头

    什么是浏览器缓存?

    在讨论过期标头之前,我们首先需要向您介绍浏览器缓存的概念。这很重要,因为过期标头可以帮助您控制和实现浏览器缓存——因此,如果您不了解浏览器缓存,就无法理解过期标头。

    简而言之,浏览器缓存让您的网站告诉访问者的浏览器将某些文件保存在访问者的本地计算机上并加载这些本地文件以供后续访问,而不是在每次页面加载时从您的服务器下载它们。

    通过消除每次下载文件的需要,您可以加快站点的加载时间并减少带宽使用。

    让我们看一个示例——您网站的徽标图像。您的徽标在每个页面上都是相同的,因此强制访问者的浏览器在每次页面加载时重新下载相同的徽标文件是没有意义的。通过浏览器缓存,您可以将该徽标文件存储在访问者的本地计算机上。访问者在第一次访问时仍需要下载您的徽标图像。但是对于后续的页面查看,该文件将从其本地浏览器缓存中加载。

    什么是过期标头?

    过期标头让您告诉访问者的Web浏览器它是否应该从本地浏览器缓存中加载给定资源(如上所述),或者它是否需要从Web服务器下载新版本。

    更具体地说,它允许您在文件“过期”之前为不同文件类型的缓存版本设置持续时间,并且浏览器必须再次从服务器下载它。

    让我们看一个例子……

    假设您想控制网站上PNG图像文件的浏览器缓存行为。如果您将PNG文件的过期标头设置为一个月,这意味着访问者的浏览器将:

    • 在初始访问/下载后一个月从缓存中加载已经下载的版本。
    • 一个月后从服务器重新下载该文件。

    您可以为不同的文件类型设置不同的过期标头,这使您可以精细控制站点的浏览器缓存。

    过期标头与缓存控制

    虽然使用过期标头是控制WordPress上的浏览​​器缓存的一种方法,但它不是唯一的方法。还有另一种称为缓存控制的技术。

    缓存控制是一种更现代的技术,为控制缓存行为提供了更多的灵活性。出于这个原因,今天许多网站都使用缓存控制。

    但是,过期标头仍然提供大多数站点所需的一切,因此它们是用于浏览器缓存的好选择。您也可以同时使用两者,尽管在大多数情况下您的缓存控制标头将优先。如果同时使用两者,您需要确保在每个中设置相同的时间值。

    如果您想了解有关如何在WordPress上实现缓存控制的更多信息,请查看我们的指南,了解如何在WordPress中利用浏览器缓存

    如何修复WordPress中的“添加过期标头”

    现在,让我们进入实际的操作方法部分,我们将向您展示如何在 WordPress 中设置过期标头。

    您可以为您的WordPress网站添加过期标头。您可以在服务器级别(Nginx或Apache)使用您自己的代码片段或通过一些用户友好的WordPress插件来执行此操作。

    当有人第一次访问您的WordPress网站上的网页时,所有文件都会一个一个地加载。浏览器和WordPress托管服务器之间的所有这些请求都会增加网页加载时间。

    浏览器缓存将部分或全部文件存储在访问者的计算机上。这意味着他们下次访问该页面时,可以从他们自己的计算机加载文件,从而提高您的WordPress性能。

    现在您可能想知道,浏览器如何知道要保存哪些文件以及将它们保留多长时间?

    这就是过期标标头的用武之地。

    使用expires headerscache-control headers设置关于保存哪些文件以及保存它们多长时间的规则。在本文中,我们将重点介绍缓存过期标头,因为它们对于大多数用户来说设置起来更简单。

    缓存过期标头为浏览器缓存中存储的每种类型的文件设置过期日期。在该日期之后,文件将从您的服务器重新加载,以便为访问者提供最新版本的页面。

    如何在Apache Web服务器上使用.htaccess添加过期标头

    如果您的Web主机使用Apache Web服务器,您可以使用.htaccess文件添加过期标头,该文件位于您的服务器的根文件夹(与保存wp-config.php文件相同的文件夹)。

    这是您需要做的:

    1. 在您首选的FTP客户端中使用FTP连接到您的服务器
    2. 在根文件夹中找到.htaccess文件
    3. 将 .htaccess 文件的备份副本下载到本地计算机。这样,如果出现任何问题,您可以重新上传备份副本以解决任何潜在问题。
    4. 在文件顶部附近添加下面的代码片段
    ## EXPIRES HEADER CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg “access 1 year”
    ExpiresByType image/jpeg “access 1 year”
    ExpiresByType image/gif “access 1 year”
    ExpiresByType image/png “access 1 year”
    ExpiresByType image/svg “access 1 year”
    ExpiresByType text/css “access 1 month”
    ExpiresByType application/pdf “access 1 month”
    ExpiresByType application/javascript “access 1 month”
    ExpiresByType application/x-javascript “access 1 month”
    ExpiresByType application/x-shockwave-flash “access 1 month”
    ExpiresByType image/x-icon “access 1 year”
    ExpiresDefault “access 2 days”
    </IfModule>
    ## EXPIRES HEADER CACHING ##
    ## EXPIRES HEADER CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg “access 1 year”
    ExpiresByType image/jpeg “access 1 year”
    ExpiresByType image/gif “access 1 year”
    ExpiresByType image/png “access 1 year”
    ExpiresByType image/svg “access 1 year”
    ExpiresByType text/css “access 1 month”
    ExpiresByType application/pdf “access 1 month”
    ExpiresByType application/javascript “access 1 month”
    ExpiresByType application/x-javascript “access 1 month”
    ExpiresByType application/x-shockwave-flash “access 1 month”
    ExpiresByType image/x-icon “access 1 year”
    ExpiresDefault “access 2 days”
    </IfModule>
    ## EXPIRES HEADER CACHING ##
    ## EXPIRES HEADER CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType image/svg "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType application/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"
    </IfModule>
    ## EXPIRES HEADER CACHING ##

    虽然默认值应该适用于大多数网站,但您可以根据需要调整代码片段中不同文件类型的时间段。

    如何在Nginx Web服务器上使用配置文件添加过期标头

    如果您的主机使用Nginx Web服务器,您可以通过编辑服务器的配置文件来控制过期标头。您如何编辑此文件将取决于您的房东——如果您需要帮助,可以联系服务器提供商的支持。

    这是您需要使用的代码:

    location ~* .(jpg|jpeg|gif|png|svg)$ {
    expires 365d;
    }
    location ~* .(pdf|css|html|js|swf)$ {
    expires 2d;
    }
    location ~* .(jpg|jpeg|gif|png|svg)$ {
    expires 365d;
    }
    location ~* .(pdf|css|html|js|swf)$ {
    expires 2d;
    }
    location ~*  .(jpg|jpeg|gif|png|svg)$ {
    expires 365d;
    }
    location ~*  .(pdf|css|html|js|swf)$ {
    expires 2d;
    }

    您可以根据需要调整不同类型文件的过期时间。

    确定您的网站运行的是Apache还是Nginx

    首先,您需要弄清楚您的网站是使用Apache还是Nginx服务器。为此,请浏览到您的网站并右键单击该页面,然后选择“Inspect(检查)”选项。

    如何在WordPress中添加缓存文件过期标头-3

    接下来,您需要单击页面顶部的“Network(网络)”选项卡。您可能需要刷新页面才能加载结果。

    如何在WordPress中添加缓存文件过期标头-4

    之后,您可以单击“Name(名称)”列顶部的域名。然后您应该向下滚动到“Response Headers(响应标头)”部分并检查名为“server(服务器)”的项目。

    如何在WordPress中添加缓存文件过期标头-5

    这将显示您正在使用哪个Web服务器。在这种情况下,该站点在Nginx服务器上运行。

    如何使用WordPress插件添加过期标头

    如果您对自己添加过期标头代码感到不自在,您还可以找到一些可以为您完成这项工作的WordPress插件。其中一些插件添加过期标头,而其他插件使用缓存控制。无论哪种方式,最终结果都是您的WordPress网站可以从浏览器缓存中受益。

    如果您的主机尚未为您实现缓存,一种解决方案是使用缓存插件。一个很好的选择是WP Rocket。激活WP Rocket插件后,它会自动为您启用浏览器缓存 – 无需配置任何其他设置。

    以下是一些其他缓存插件,可以帮助您实现过期标头和/或浏览器缓存:

    WP Rocket是市场上对初学者最友好的WordPress缓存插件。启用后,它会立即工作以加快您的网站速度,而无需像许多其他缓存插件一样处理复杂的配置设置。

    WP Rocket是一个高级插件,但其免费版本已经包含所有功能最好的部分。

    如何在WordPress中添加缓存文件过期标头-2

    您需要做的第一件事是安装并激活WP Rocket插件(官网)。

    安装并激活后,WP Rocket将自动打开浏览器缓存。默认情况下,它会使用最佳设置添加过期标头和缓存控制标头,以加速您的WordPress网站。

    这就是你需要做的。如果您想了解有关该插件的更多信息,请参阅有关如何在WordPress中正确安装和设置WP Rocket的教程

    如果您更喜欢使用免费的缓存插件将过期标头添加到您的网站,那么我们建议您查看W3 Total Cache

    W3 Total Cache提供了一些与WP Rocket相同的功能,但它并不适合初学者。您必须手动启用 expires 标头,因为它不会自动启用它们。

    如果您已经对缓存进行了排序并且只想要一个更有针对性的插件,那么两个不错的免费插件是:

    Leverage Browser Caching插件没有设置 – 您只需激活它,它就会立即开始工作。

    Add Expires Headers插件可让您控制不同文件类型的过期标头 – 您可以从WordPress仪表盘中新的Add Expires Headers区域进行这些选择:

    您可以为不同的文件类型配置不同的过期规则

    您可以为不同的文件类型配置不同的过期规则

    如何测试过期标头是否正常工作

    要测试您的过期标头是否配置正确,您可以使用GiftOfSpeed中的这个免费工具。输入网站的URL后,该工具会告诉您两件事:

    1. 您网站上所有文件的缓存持续时间。
    2. 缓存类型(应该说过期标头,因为这是您使用的方法,但您也可能会看到缓存控制,具体取决于您的站点配置)。

    您还可以通过您正在使用的任何速度测试工具(例如GTmetrix)运行您的站点,并检查您是否仍然看到“添加过期标头”消息。

    如何使用终端测试过期标头

    如果您更喜欢使用更多技术选项测试过期标头,您可以curl在终端中向您网站上的静态资产发出请求,并直接检查HTTP标头。例如,如果您的过期或缓存控制规则涵盖CSS文件,您可以发出curl如下请求。

    curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.css
    curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.css
    curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.css

    在我们的例子中,curl对style.min.css文件的请求提供了以下响应。

    HTTP/2 200
    server: nginx
    date: Wed, 27 Jan 2021 01:11:05 GMT
    content-type: text/css; charset=UTF-8
    content-length: 51433
    last-modified: Tue, 12 Jan 2021 20:17:48 GMT
    vary: Accept-Encoding
    etag: “5ffe03ec-c8e9”
    expires: Thu, 31 Dec 2037 23:55:55 GMT
    cache-control: max-age=315360000
    access-control-allow-origin: *
    accept-ranges: bytes
    x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63
    HTTP/2 200
    server: nginx
    date: Wed, 27 Jan 2021 01:11:05 GMT
    content-type: text/css; charset=UTF-8
    content-length: 51433
    last-modified: Tue, 12 Jan 2021 20:17:48 GMT
    vary: Accept-Encoding
    etag: “5ffe03ec-c8e9”
    expires: Thu, 31 Dec 2037 23:55:55 GMT
    cache-control: max-age=315360000
    access-control-allow-origin: *
    accept-ranges: bytes
    x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63
    HTTP/2 200
    server: nginx
    date: Wed, 27 Jan 2021 01:11:05 GMT
    content-type: text/css; charset=UTF-8
    content-length: 51433
    last-modified: Tue, 12 Jan 2021 20:17:48 GMT
    vary: Accept-Encoding
    etag: "5ffe03ec-c8e9"
    expires: Thu, 31 Dec 2037 23:55:55 GMT
    cache-control: max-age=315360000
    access-control-allow-origin: *
    accept-ranges: bytes
    x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63

    如您所见,响应包括一个expirescache-control标头。具体来说,cache-control标头显示的max-age为315360000秒,表示有效期为一年。

    如何为外部脚本添加过期标头

    我们在上面向您展示的方法将让您控制WordPress站点服务器上所有文件的过期标头。但是,这些方法不允许您控制您可能正在加载的第三方脚本的过期标头,例如Google FontsGoogle Analytics等。

    因此,即使您已经通过上述方法实现了过期标头,某些速度测试工具仍可能将此标记为潜在问题。

    以下是一些常见第三方脚本的解决方案……

    如何将过期标头添加到Google字体

    许多WordPress网站依赖谷歌字体来定制字体。这通常涉及从Google的CDN加载字体,这意味着您将无法通过服务器的配置设置过期标头。

    一种简单的解决方法是在本地托管字体文件,而不是依赖Google的CDN。要进行此设置,您可以使用WordPress.org上的Optimize My Google Fonts (OMGF) 免费插件。

    您还可以查看我们在WordPress中本地托管字体的完整指南,以了解有关此方法的优缺点的更多信息。

    如何向Google Analytics添加过期标头

    如果您遇到与浏览器缓存和Google Analytics相关的问题,您还可以考虑在本地托管Google Analytics脚本,就像我们向您展示的Google字体一样。

    这里有一些 WordPress 插件可以很容易地实现这一点:

    小结

    回顾一下,过期标头可帮助您控制WordPress站点上不同文件类型的浏览器缓存行为。

    如今,许多站点依赖缓存控制标头而不是过期标头,因为缓存控制是一种更现代的选项,可提供更大的灵活性。但是,对于大多数站点,过期标头仍然可以正常工作,您也可以同时使用过期标头和缓存控制。

    此外,如果您不实施过期标头,一些速度测试工具会降低您网站的分数,这可能是您设置此策略的主要动机。

    我们希望本教程能帮助您了解如何在WordPress中添加过期标头。您可能对下列文章也会感兴趣:

     

  • 如何将WordPress媒体迁移至谷歌云存储

    如何将WordPress媒体迁移至谷歌云存储

    在之前的教程中,我们向您展示了如何将媒体迁移到Amazon S3。今天,我们将向您介绍如何将WordPress网站上的媒体卸载到Google Cloud Storage,以及选择直接从Google Cloud Storage或CDN提供媒体服务的几个选项。

    谷歌云存储只是谷歌云平台众多产品和服务的一小部分。由于Google拥有庞大的基础架构以及他们处理批量存储的事实,他们能够提供非常低的存储成本。远低于WordPress主机。

    通常,像这样的云存储用于需要使用我们的外部备份插件等解决方案进行额外备份或正在提供大文件(图像、照片、下载、软件、视频、游戏)的站点。他们的一些客户包括Spotify、Vimeo、可口可乐、飞利浦、Evernote和摩托罗拉。

    1. 谷歌云存储与谷歌云CDN
    2. 谷歌云存储定价
    3. WP-Stateless的WordPress谷歌云存储设置
    4. WP Offload Media的WordPress谷歌云存储设置

    谷歌云存储与谷歌云CDN

    不要将Google Cloud Storage与Google Cloud CDN或任何其他CDN提供商混淆。内容交付网络 (CDN) 专为加快媒体交付速度而设计,而Google Cloud Storage专为大容量存储解决方案而设计。

    但是,Google Cloud Storage可以帮助您加快网站速度,因为它使用所谓的多区域存储。这意味着您的Google Cloud Storage内容存储在该区域内的多个位置并从其交付,类似于CDN。它甚至使用相同的边缘缓存技术。但是,重要的是要注意这不是全球性的,并且可能比成熟的CDN解决方案具有更高的延迟。Google Cloud Storage可让您在三个区域之间进行选择:

    • 亚太地区
    • 欧洲联盟
    • 美国

    但我们将在下面向您展示如何将CDN与Google Cloud Storage一起使用。

    谷歌云存储定价

    Google Cloud Platform为新客户提供3个月300美元的免费试用期。如果您从未成为Google Cloud Platform的付费客户并且之前未注册免费试用,则您符合条件。这是在支付任何费用之前测试Google Cloud Storage并查看它是否适合您的网站的好方法。请参阅免费试用常见问题解答Google Cloud Storage定价

    谷歌云免费试用

    谷歌云免费试用

    WP-Stateless的WordPress谷歌云存储设置

    将Google Cloud Storage与WordPress网站集成的第一个选择是使用免费的WP-Stateless插件,该插件由Usability Dynamics的优秀团队开发。

    此插件会在将文件上传到媒体库时自动将文件从您的WordPress站点复制到Google Cloud Storage。然后它提供不同的模式,例如备份您的媒体副本,甚至从WordPress中删除媒体并从Google Cloud Storage提供服务。

    WordPress插件-WP-Stateless

    WordPress插件-WP-Stateless

    这个插件在块上仍然很新,但享有盛誉,并且正在积极维护和更新。在撰写本文时,它目前拥有超过2,000次活跃安装。它还提供与以下第三方插件的官方兼容性:

    • Easy Digital Downloads
    • Imagify Image Optimizer
    • ShortPixel Image Optimizer
    • WPForms
    • WP Smush
    • Advanced Custom Fields Image Crop Addon
    • SiteOrigin Widget Bundle
    • SiteOrigin CSS
    • Gravity Forms
    • WPBakery Page Builder

    仅仅因为插件没有在上面列出并不意味着它不能与集成一起使用。这些只是UsabilityDynamics团队花费额外时间修复错误和确认兼容性的插件。

    第 1 步

    要安装免费的WP-Stateless插件,您可以从WordPress插件库下载,或者在WordPress仪表盘中的“安装插件”下搜索“WP-Stateless”  。单击“立即安装”并启用它。

    安装WP-Stateless WordPress插件

    安装WP-Stateless WordPress插件

    第 2 步

    单击“Begin Setup Assistant”。或者您可以按照他们的手动设置说明进行操作。

    WP-Stateless

    WP-Stateless

    第 3 步

    点击“Google Login”。您应该使用您想与本网站关联的Google帐户并同意权限请求。如果您不确定是否授予对您的Google帐户的访问权限,请查看他们关于权限请求的文档。如果您不想提供对您的Google帐户的访问权限,您可以随时使用手动设置过程

    WP-Stateless谷歌登录

    WP-Stateless谷歌登录

    第 4 步

    点击“Allow”让他们查看和管理您在Google Cloud Platform服务中的数据。注意:一旦用户登录过程完成,他们就不会保留任何令牌或访问凭据。

    谷歌账户权限请求

    谷歌账户权限请求

    第 5 步

    然后,WP-Stateless将帮助您配置将存储WordPress媒体文件的Google Cloud项目和Bucket。

    • Google Cloud Project:每个Google Cloud Bucket都包含在一个项目中。您可以创建一个新项目或从现有项目之一中进行选择。
    • Google Cloud Bucket:您所有的WordPress数据都存储在一个Bucket中。您可以创建新Bucket或从现有Bucket中进行选择。
    • Google Cloud Bucket Multi-Regional Location:您新创建的Bucket将配备多区域存储类。选择最接近您网站的大多数访问者的区域。
    • Google Cloud Billing:如果您没有结算帐户,请单击按钮进行设置。不要忘记他们提供3个月300美元的免费试用

    提示:如果您想为Google Cloud Storage使用自己的自定义域或CDN URL,请确保将您的Bucket命名为与您的CDN域URL完全相同。存储桶名称:gcs.yourdomain.com. 它会给你一个关于字符的警告,但句点可以在Bucket名称中使用。它必须以字母数字字符开头和结尾。

    WP-Stateless项目和Bucket

    WP-Stateless项目和Bucket

    配置完以上所有内容后,单击“继续”。然后,您应该会看到一切都已正确设置的确认信息。

    WP-Stateless设置

    WP-Stateless设置

    WP-Stateless插件中的谷歌云存储设置

    您可以在“Media → Stateless Settings”下找到WP-Stateless和Google Cloud Storage设置。在“Settings”选项卡下,您需要配置您喜欢的模式。

    • Disabled: 禁用无状态媒体。
    • Backup:将媒体文件上传到Google存储并提供本地文件URL。
    • CDN:将媒体文件复制到Google存储并直接从那里提供服务。
    • Stateless:仅使用Google Cloud Storage存储和提供媒体文件。媒体文件不存储在本地。此选项将为您节省最多的磁盘空间
    • File URL Replacement: 在演示过程中扫描文章内容和元数据,并将本地媒体文件URL替换为Google Cloud Storage URL。此设置不会修改您的数据库。

    WP-Stateless模式

    WP-Stateless模式

    担心稍后会获取您的媒体文件?不用担心,该插件具有同步功能(我们将在下面进一步探讨),以防您想恢复。您还可以随时从Google Cloud Storage bucket本身获取WordPress上传文件夹,因为它只是模仿媒体库的确切外观(如下所示)。

    Google Cloud Storage WordPress bucket文件夹

    Google Cloud Storage WordPress bucket文件夹

    在页面下方,您还有其他设置:

    • Cache-Control: 默认情况下,设置为:public, max-age=36000, must-revalidate. 如果需要,您可以覆盖它。
    • Delete GSC File: 如果您希望在从WordPress媒体库中删除文件时从GSC中删除该文件,请启用此选项。
    • File URL and Domain:将默认GCS域替换为您自己的自定义域。这将要求您配置CNAME。请注意,桶名和域名必须完全匹配。根据他们的文档,自定义域不支持HTTPS,但它对我们来说效果很好。
    • Organization:将上传内容组织到基于年份和月份的文件夹中。
    • Cache Busting:在文件名前添加一组随机的数字和字母。这对于在上传具有相同文件名的文件时防止缓存问题很有用。

    WP-Stateless附加设置

    WP-Stateless附加设置

    您上传到WordPress媒体库的图像会自动复制到Google Cloud Storage。但是,在您首次配置插件后,您将需要运行批量同步。在“Media → Stateless Settings → Sync”下,您有以下选项:

    • 重新生成所有无状态图像并将Google Storage与本地服务器同步。(注意:第一次使用此选项需要一段时间)
    • 在Google Storage和本地服务器之间同步非图像文件。
    • 在Google Storage和本地服务器之间同步非媒体库文件。

    WP-Stateless同步

    WP-Stateless同步

    WP Offload Media的WordPress谷歌云存储设置

    将Google Cloud Storage与WordPress网站集成的第二个选择是使用Delicious Brains Inc.提供的同样出色的免费WP Offload Media Lite插件(或高级 WP Offload Media)

    WordPress插件WP Offload Media

    WordPress插件WP Offload Media

    精简版的WP Offload Media绝对可以满足您的大部分需求;但是,如果您升级到高级版本,则有一些不错的功能:

    • PriorityExpert™ 电子邮件支持。
    • 将现有媒体库上传到云存储。
    • 从媒体库控制云存储文件。
    • 在后台卸载后从服务器中删除文件。
    • 下载并从云存储中删除。
    • 在后台在您的存储提供商上的存储桶之间复制文件。
    • 使用Assets Pull Addon只需单击几下,即可从CloudFront或其他CDN提供站点资源(CSS、JS、图像、字体等)。
    • 与WooCommerce、WPML、Easy Digital Downloads、Meta Slider、Enable Media Replace和Advanced Custom Fields集成。

    第 1 步

    要安装免费的WP Offload Media Lite插件,您可以从WordPress插件库下载它,或者在WordPress仪表盘中的“安装插件”下搜索“WP Offload Media Lite”。单击“立即安装”并启用它。

    安装WP Offload Lite WordPress插件

    安装WP Offload Lite WordPress插件

    第 2 步

    按照他们的Google Cloud Storage快速入门说明进行操作:

    谷歌云存储CDN集成

    担心谷歌云存储的性能?确实,多区域存储根本不会像普通的CDN那样快,而且对于全球用户来说绝对不是很好。但是,您仍然可以通过您最喜欢的CDN提供商传送文件。下面是几个不同的选项。

    使用KeyCDN配置WP-Stateless

    只需按照以下步骤操作,我们将使用KeyCDN作为示例。

    重要提示:这确实意味着Google Cloud Storage和您的CDN提供商都会向您收费,因此您可能需要事先处理这些数字。或者,如果您使用的是Google Cloud Platform试用版,那么这是一种无需Google收费即可估算成本的好方法。

    1. 专门为您的Google Cloud Storage媒体设置一个新区域。遵循KeyCDN的Google Cloud Storage CDN集成教程。本质上,您使用Google Cloud Storage作为您的源服务器。
    2. 在新区域上部署Let’s Encrypt for HTTPS。
    3. 在KeyCDN设置新的区域别名。示例:gcs.yourdomain.com
    4. 在WP-Stateless插件设置中使用您的区域别名。

    结果是KeyCDN现在正在交付您所有的Google Cloud Storage文件。性能问题解决!

    谷歌云存储和KeyCDN

    谷歌云存储和KeyCDN

    由于WP-Stateless插件仅处理您的媒体库(图像),您可能还希望通过CDN提供您的脚本(JS、CSS)。只需按照以下步骤操作。

    1. 使用您的CDN提供商为您的资产配置一个单独的区域,并使用与上述不同的URL,例如cdn.yourdomain.com.
    2. 安装支持排除的WordPress CDN插件:  CDN enabler(免费)、  Perfmatters(付费)或 WP Rocket(付费)。
    3. 设置排除项,以便您的CDN插件仅加载CSS、JS等。这样WP-Stateless插件处理您的媒体文件,而CDN插件处理您的其他资源。

    Perfmatters中的CDN排除项

    Perfmatters中的CDN排除项

    最终结果是您的媒体从您的自定义CDN URL(从Google Cloud Storage中提取)加载,而您的资产从您的其他自定义CDN URL加载。如果您在“Stateless”模式下运行,您的WordPress网站将不会为图像使用任何磁盘空间。很酷!

    谷歌云存储和CDN组合

    谷歌云存储和CDN组合

    使用Google Cloud CDN配置WP Offload Media

    默认情况下,WP Offload Media配置为在提供卸载媒体时使用原始Google Cloud Storage URL。您的媒体URL可能如下所示:

    http://storage.googleapis.com/bucket-name/wp-content/uploads/…

    查看他们关于如何为Google Cloud Storage设置自定义域CDN的教程。

  • WordPress网站Amazon S3和CDN集成指南

    WordPress网站Amazon S3和CDN集成指南

    在本教程中,我们将向您介绍如何完成WordPress Amazon S3集成以及可选地使用内容交付网络 (CDN)。这可以大大节省您的带宽成本,充当备份,并帮助加快您的站点。

    Amazon S3是一种存储解决方案,是Amazon Web Services众多产品的一部分。通常,这用于需要使用我们的外部备份插件等解决方案进行额外备份的站点,或者正在提供大文件(下载、软件、视频、游戏、音频文件、PDF等)的站点。

    亚马逊拥有非常可靠的可靠记录,并且由于其庞大的基础设施,它们能够提供非常低的存储成本。S3的一些客户包括Netflix、Airbnb、SmugMug、Nasdaq等。

    Amazon S3

    由于Amazon S3完全处理大容量存储,您几乎可以保证定价会比您的WordPress主机便宜。将媒体迁移到AWS是一种省钱的好方法,并且在您的第一年免费(最多5GB存储空间)。此外,由于您的媒体请求是直接从亚马逊提供的,因此您的WordPress网站的负载更少,这意味着加载时间更快。

    不要将Amazon S3与Amazon CloudFront混淆。CloudFront是一种CDN解决方案,而S3是一种存储解决方案。但是,它们都可以互换使用,因为我们将在下面进行更多介绍。

    WordPress网站Amazon S3设置

    对于这种集成,我们建议使用WP Offload S3 Lite插件,由Delicious Brains的优秀团队开发。基本版是免费的。当文件上传到媒体库时,插件会自动将文件从您的WordPress站点复制到Amazon S3。然后有一个用于添加CDN的可选配置,例如Amazon CloudFront、KeyCDN或MaxCDN。

    WP Offload S3 Lite

    WP Offload S3 Lite

    这个插件非常轻量级,确切地说只有 204 KB。在撰写本文时,它目前拥有超过 30,000 次活跃安装,并获得 4 星评分(满分为 5 星)。请按照以下步骤操作。

    第 1 步

    接下来,安装免费的WP Offload S3 Lite插件。您可以从WordPress插件库下载它,也可以在WordPress仪表盘中的“安装插件”下搜索“wp offload s3”。单击“立即安装”并启用它。

    安装WP Offload S3 Lite

    安装WP Offload S3 Lite

    第 2 步

    您可以按照Delicious Brains的WordPress Amazon S3文档进行操作,或者我们将引导您更深入地了解其余部分。登录到您的亚马逊网络服务帐户。如果你没有,你可以免费注册。然后您需要创建一个新用户。选择一个用户名并确保选择“Programmatic access”。

    亚马逊网络服务 – 添加用户

    亚马逊网络服务 – 添加用户

    第 3 步

    现在您需要为用户设置权限以管理S3中的文件,因此选择“Attach existing policies directly”并单击“Create policy”。这将在新窗口中打开。一旦你完成了,你将需要回到这个。

    AWS中的权限

    AWS中的权限

    第 4 步

    单击创建您自己的策略选项旁边的“Select”。

    在AWS中创建策略

    在AWS中创建策略

    第 5 步

    接下来,您需要为您的保单命名和描述。这可以是任何你想要的。然后将以下代码复制到“Policy Document”部分。

    {
    “Version”: “2012-10-17”,
    “Statement”: [
    {
    “Effect”: “Allow”,
    “Action”: [
    “s3:CreateBucket”,
    “s3:DeleteObject”,
    “s3:Put*”,
    “s3:Get*”,
    “s3:List*”
    ],
    “Resource”: [
    “arn:aws:s3:::*”
    ]
    }
    ]
    }
    {
    “Version”: “2012-10-17”,
    “Statement”: [
    {
    “Effect”: “Allow”,
    “Action”: [
    “s3:CreateBucket”,
    “s3:DeleteObject”,
    “s3:Put*”,
    “s3:Get*”,
    “s3:List*”
    ],
    “Resource”: [
    “arn:aws:s3:::*”
    ]
    }
    ]
    }
    {
    "Version": "2012-10-17",
    "Statement": [
    {
    "Effect": "Allow",
    "Action": [
    "s3:CreateBucket",
    "s3:DeleteObject",
    "s3:Put*",
    "s3:Get*",
    "s3:List*"
    ],
    "Resource": [
    "arn:aws:s3:::*"
    ]
    }
    ]
    }

    此策略允许用户创建buckets、仅删除文件(不是buckets)、上传文件、下载文件以及列出文件和buckets。这是插件运行所需的基本权限级别。

    但是,我们建议您查看Delicious Brain关于额外bucket限制的文档。例如,修改上面的资源部分并添加您的存储桶名称以将其锁定(perftesting是我们在步骤 11中buck down的名称)。

    “Resource”: [
    “arn:aws:s3:::perftesting/*”,
    ]
    “Resource”: [
    “arn:aws:s3:::perftesting/*”,
    ]
    "Resource": [
    "arn:aws:s3:::perftesting/*",
    ]

    然后单击“Create Policy”。

    现在订阅 查看AWS中的政策

    查看AWS中的政策

    第 6 步

    从步骤4返回到窗口,您现在需要将策略添加到您正在创建的用户。单击“Refresh”,您应该会在顶部看到刚刚创建的新策略。选择它并单击“Next”。

    用户的AWS权限

    用户的AWS权限

    第 7 步

    然后点击“Create use”。

    AWS创建用户

    AWS创建用户

    第 8 步

    在最后一个屏幕上,您需要将您的访问密钥ID和私密访问密钥复制到一个安全的地方,因为您需要将其返回到您的WordPress仪表盘中。

    AWS访问密钥

    AWS访问密钥

    第 9 步

    然后回到WordPress,点击AWS下的“Access Keys”并输入您刚刚创建的凭证。或者,正如Delicious Brains建议的那样,最好在wp-config.php文件中定义它们。只需复制以下代码段并用键替换星号。

    define( ‘DBI_AWS_ACCESS_KEY_ID’, ‘********************’ );
    define( ‘DBI_AWS_SECRET_ACCESS_KEY’, ‘****************************************’ );
    define( ‘DBI_AWS_ACCESS_KEY_ID’, ‘********************’ );
    define( ‘DBI_AWS_SECRET_ACCESS_KEY’, ‘****************************************’ );
    define( 'DBI_AWS_ACCESS_KEY_ID', '********************' );
    define( 'DBI_AWS_SECRET_ACCESS_KEY', '****************************************' );

    在WordPress中连接亚马逊网络服务

    在WordPress中连接亚马逊网络服务

    第 10 步

    然后,您必须创建一个要使用的Bucket。如果您尚未注册Amazon S3,您可以在此处注册。他们有一个免费试用版,您可以开始使用。单击AWS插件设置下的“S3 and CloudFront”,然后单击“Create bucket”。然后,您可以选择一个地区。单击“Create New Bucket”。请记住,存储成本因地区而异。查看价格

    创建Amazon S3 Bucket

    创建Amazon S3 Bucket

    第 11 步

    要让WP Offload S3与某些第三方插件(例如WooCommerce)一起使用,您可能需要安装并激活它们的一些兼容性插件。这有时需要支付他们的高级许可证。但是,很多时候您也可以使用免费版本。默认情况下,会选中如下所示的以​​下选项。如果您通过HTTPS运行,则需要启用它。

    AWS插件设置

    AWS插件设置

    您的WordPress Amazon S3设置现已完成!当您的图像上传到您的WordPress媒体库时,它们现在将被复制到Amazon S3存储中。您也可以对您的资产(CSS、JS、字体等)执行相同的技术,但它需要高级许可证才能获得资源拉取插件

    注意:通过SFTP手动上传的文件不会被复制到Amazon S3。WP Offload Media仅迁移首次上传到您的WordPress媒体库的项目。

    上面的另一个重要设置是在将文件迁移到S3后从本地服务器中删除文件的选项。这有助于大幅减少WordPress主机的磁盘空间需求。如果启用此功能,请确保检查与其他插件的兼容性。您还可以查看有关从浏览器将文件上传到Amazon S3的教程。

    WordPress Amazon S3和CDN

    如果您使用CDN来加快资源交付速度,您可以在CloudFront或自定义域部分启用此功能。查看以下这些教程,让您快速上手。

    设置好CDN URL后,您可以将其输入到自定义域字段中,如下所示。

    CDN Amazon S3

    CDN Amazon S3

    请务必查看我们的教程,了解如何将媒体迁移到Google Cloud Storage

  • 为什么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、用户体验和转化率。另外,每个人都喜欢快速的网站!

  • 如何在WordPress中删除jQuery Migrate?

    如何在WordPress中删除jQuery Migrate

    jQuery Migrate通过识别不推荐使用的功能,极大地简化了将旧jQuery代码移动到更高jQuery版本的过程。然后它会恢复已弃用的功能和行为,以便旧代码仍能在当前jQuery版本及更高版本上正常运行。

    大多数最新的前端代码和插件不需要jquery-migrate.min.js。在大多数情况下,这只会给您的网站增加不必要的负载。如果您启动,您可以看到它正在运行Chrome开发工具控制台.

    删除jQuery Migrate的其他原因:

    • 保持你的代码、主题和插件更新比修补支持额外的文件更好。保持您的网站更新也可以防止它受到安全攻击。
    • 如果您正在运行使用旧jQuery代码的插件,最好更新它们或切换到保持更新的替代方案。

    如何从WordPress中删除jQuery Migrate?

    从WordPress中移除 jQuery Migrate非常简单。您只需要将以下代码行添加到主题functions.php文件中。

    //Remove JQuery migrate
    function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered[‘jquery’] ) ) {
    $script = $scripts->registered[‘jquery’];
    if ( $script->deps ) {
    // Check whether the script has any dependencies
    $script->deps = array_diff( $script->deps, array( ‘jquery-migrate’ ) );
    }
    }
    }
    add_action( ‘wp_default_scripts’, ‘remove_jquery_migrate’ );
    //Remove JQuery migrate
    function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered[‘jquery’] ) ) {
    $script = $scripts->registered[‘jquery’];
    if ( $script->deps ) {
    // Check whether the script has any dependencies
    $script->deps = array_diff( $script->deps, array( ‘jquery-migrate’ ) );
    }
    }
    }
    add_action( ‘wp_default_scripts’, ‘remove_jquery_migrate’ );
    //Remove JQuery migrate
    function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
    $script = $scripts->registered['jquery'];
    if ( $script->deps ) { 
    // Check whether the script has any dependencies
    $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
    }
    }
    }
    add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

    另一种禁用它的最简单方法是添加一个名为Remove jQuery Migrate的插件。

    使用WP Rocket插件删除jQuery Migrate

    WP Rocket插件带有内置功能,只需单击即可删除jQuery Migrate。

    要使用WP Rocket删除jQuery Migrate,请转到WP Rocket插件的设置 >> FILE OPTIMZATION。

    使用WP Rocket缓存插件删除jQuery Migrate

    使用WP Rocket缓存插件删除jQuery Migrate

    在JavaScript Files部分下,您可以选中Remove jQuery Migrate复选框。就是这样。

    参考阅读:使用WP Rocket插件加速您的WordPress网站.

    使用插件Remove jQuery Migrate删除jQuery Migrate:

    Remove jQuery Migrate这个插件从站点的前端删除jQuery Migrate脚本(注:该插件已经久未更新版本)。

    转到仪表板:登录到您的WordPress站点以打开仪表板。

    转到插件:您将在左侧菜单栏上看到插件菜单。单击它将展开更多选项,单击添加新的。

    如图所示,在搜索栏中搜索Remove jQuery Migrate。

    如何在WordPress中删除jQuery Migrate?-1

    搜索安装插件

    如何在WordPress中删除jQuery Migrate?-1

    点击立即安装

    激活插件,就是这样。该插件将完成您的其余工作。

    这是大多数开发人员建议的最常用的插件。您还可以选择其他可用的插件。

    正如我上面提到的,jQuery migrate给你的站点增加了不必要的负载。因此,我建议将其从您的网站或博客中删除。

  • 如何清理WordPress网站Header部分不必要代码?

    如何清理WordPress网站Header部分不必要代码?

    很长一段时间以来,我一直在使用几个插件来清理WordPress Headers中的一些字段。在大多数情况下,我会说您通常不需要很多信息。

    为什么WordPress将这些功能和链接添加到您的网站?

    嗯,原因很明显。WordPress是一个非常大的CMS平台,被超过27%的在线博客网站使用。每个出版商都有自己的要求。有些喜欢wp-admin浏览器页面发布文章,有些使用第三方工具,有些使用 iOS或Android应用。

    如果您使用网络版本在您的WordPress网站上发布文章,那么您应该从您的WordPress网站中删除所有不必要的链接。

    有什么优势?

    1. 页面加载速度肯定更快
    2. 内容代码比增加
    3. 您的重要网站内容现在略高于搜索引擎的读取方式

    让我们看一下WordPress Headers中的一些链接。以下步骤将帮助您清理和优化WordPress网站的header部分。

    WordPress添加EditURI到您的网站Header,如果您通过第三方工具发布文章,这是必需的。

    <link type=“application/rsd+xml” title=“RSD” href=“https://crunchify.com/xmlrpc.php?rsd”>
    <link type=”application/rsd+xml” title=”RSD” href=”https://crunchify.com/xmlrpc.php?rsd”>
    <link type="application/rsd+xml" title="RSD" href="https://crunchify.com/xmlrpc.php?rsd">

    怎么禁用?将下方代码添加到您的主题functions.php文件中:

    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action ('wp_head', 'rsd_link');

    2.删除WordPress版本号

    版本号可能会暴露您的WordPress版本信息,让某些有预谋的人有机可乘。

    <meta name=“generator” content=“WordPress 4.9.2”>
    <meta name=”generator” content=”WordPress 4.9.2″>
    <meta name="generator" content="WordPress 4.9.2">

    下面的代码将从站点中删除WordPress版本号。

    function crunchify_remove_version() {
    return ;
    }
    add_filter(‘the_generator’, ‘crunchify_remove_version’);
    function crunchify_remove_version() {
    return ”;
    }
    add_filter(‘the_generator’, ‘crunchify_remove_version’);
    function crunchify_remove_version() {
        return '';
    }
    add_filter('the_generator', 'crunchify_remove_version');

    如果您不使用Windows Live Writer写作,完全可以移除WordPress网站Header的以下内容。

    <link type=“application/wlwmanifest+xml” href=“https://www.wbolt.com/wp-includes/wlwmanifest.xml”>
    <link type=”application/wlwmanifest+xml” href=”https://www.wbolt.com/wp-includes/wlwmanifest.xml”>
    <link type="application/wlwmanifest+xml" href="https://www.wbolt.com/wp-includes/wlwmanifest.xml">

    在你的主题function添加以下代码:

    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( 'wp_head', 'wlwmanifest_link');

    如果您使用其他的固定链接形式,WordPress默认的短连接是完全没有意义的,可以考虑移除。

    <link href=“https://www.wbolt.com/?p=8112”>
    <link href=”https://www.wbolt.com/?p=8112″>
    <link href="https://www.wbolt.com/?p=8112">

    在你的主题function添加以下代码:

    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);
    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);
    remove_action( 'wp_head', 'wp_shortlink_wp_head');

    5.从所有静态资源中删除查询字符串

    静态资源查询字符串

    静态资源查询字符串

    添加下面的代码,所有查询字符串都将被删除。

    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];}
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];}
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    function wbolt_cleanup_query_string( $src ){
        $parts = explode( '?', $src );
        return $parts[0];}
    add_filter( 'script_loader_src', 'wbolt_cleanup_query_string', 15, 1 );
    add_filter( 'style_loader_src', 'wbolt_cleanup_query_string', 15, 1 );

    注: explore ('?', $src)将删除?符号后的所有内容。如果您只想删除with ver的查询字符串,请替换??ver.

    WordPress REST API使CMS能够与其他Web属性进行通信,无论它们是用什么编程语言编写的。

    但是,很多网站不使用它,因此在大多数情况下,它只是不必要的代码。默认情况下,每个站点的标题中都包含一个链接:

    <link href=“https://www.wbolt.com/wp-json/”>
    <link href=”https://www.wbolt.com/wp-json/”>
    <link href="https://www.wbolt.com/wp-json/">

    在你的主题function添加以下代码:

    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);
    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);
    remove_action('wp_head', 'rest_output_link_wp_head', 10);
    remove_action('template_redirect', 'rest_output_link_header', 11, 0);

    禁用WordPress网站上的嵌入将执行以下操作:

    • 它可以防止其他人嵌入您的网站,也可以防止您嵌入网站。
    • 删除oEmbed特定的JavaScript。
    • 禁用对oEmbed结果的过滤。
    • 删除oEmbed发现链接。
    • 关闭oEmbed自动发现。
    • 删除所有嵌入重写规则。
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);

    这是一个完整的代码:

    将以下代码添加到主题的functions.php文件中,一切就绪。

    // ******************** Clean up WordPress Header START ********************** //
    function wbolt_remove_version() {
    return ;
    }
    add_filter(‘the_generator’, ‘wbolt_remove_version’);
    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);
    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);
    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];
    }
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    // ******************** Clean up WordPress Header END ********************** //
    // ******************** Clean up WordPress Header START ********************** //
    function wbolt_remove_version() {
    return ”;
    }
    add_filter(‘the_generator’, ‘wbolt_remove_version’);

    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);

    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);

    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];
    }
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    // ******************** Clean up WordPress Header END ********************** //

    // ******************** Clean up WordPress Header START ********************** //
    function wbolt_remove_version() {
        return '';
    }
    add_filter('the_generator', 'wbolt_remove_version');
    
    remove_action('wp_head', 'rest_output_link_wp_head', 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);
    remove_action('template_redirect', 'rest_output_link_header', 11, 0);
    
    remove_action ('wp_head', 'rsd_link');
    remove_action( 'wp_head', 'wlwmanifest_link');
    remove_action( 'wp_head', 'wp_shortlink_wp_head');
    
    function wbolt_cleanup_query_string( $src ){
        $parts = explode( '?', $src );
        return $parts[0];
    }
    add_filter( 'script_loader_src', 'wbolt_cleanup_query_string', 15, 1 );
    add_filter( 'style_loader_src', 'wbolt_cleanup_query_string', 15, 1 );
    // ******************** Clean up WordPress Header END ********************** //
  • 从WordPress评论表单中删除网站URL的6种方法

    从WordPress评论表单中删除网站URL的6种方法插图

    评论垃圾邮件是接受博客评论的WordPress博主面临的最大挑战之一。许多用户发表评论只是为了留下他们的网站链接URL。这是从权威网站获取反向链接的简单方法。如果您只想接受感兴趣用户的评论,那么您可以在WordPress评论表单中删除网站URL或评论作者链接。

    管理WordPress评论中的垃圾邮件

    在我们之前的文章中,我们已经解释了如何有效地拦截WordPress中的垃圾评论。基本上,您可以使用以下选项:

    • 使用Akismet等插件自动过滤垃圾评论。
    • 阻止IP地址列表中的评论。
    • 通过阻止敏感词来防止激进的评论。
    • 限制注册用户的评论。
    • 保留所有评论以供审核和手动批准。
    • 适度发表评论,其中包含一定数量的超链接。

    尽管所有这些方法都会减少垃圾邮件,但由于一个原因,您无法完全摆脱垃圾邮件。那是WordPress评论表单中可用的网站URL文本框。

    WordPress评论表单行为

    默认情况下,WordPress评论表单具有以下字段:

    默认WordPress评论表单

    默认WordPress评论表单

    • 评论留言框
    • 姓名
    • 电子邮件
    • 网站
    • 在浏览器中保存名称/电子邮件/网站以供进一步评论
    • 提交按钮

    您可以在“设置 > 讨论”部分下的浏览器选项中启用或禁用保存名称/电子邮件/网站。

    禁用保存名称和电子邮件选项

    禁用保存名称和电子邮件选项

    除此选项外,WordPress管理面板中没有可用的设置来更改评论表单字段。

    评论表单中的网站URL

    几乎75%的用户留下评论只是为了提供他们的网站URL并获得反向链接。默认情况下,WordPress将rel="external nofollow ugc" 参数分配给注释链接,将它们指示为用户生成的内容。但是,这些链接仍然会损害您的网站,尤其是当它们与您的网站无关时,例如色情链接。用户在您的网站上发表评论后,WordPress将通过链接名称和URL字段来显示已批准的评论。

    与评论作者姓名链接的网站

    与评论作者姓名链接的网站

    在WordPress评论中删除网站URL的6种方法

    如果您收到数十万条垃圾评论,最好的选择是禁用评论表单中的网站URL字段。如果表单中没有URL选项,则以获取反向链接为目标的垃圾邮件发送者将停止。此外,您可以节省处理评论提交所需的服务器带宽。您可以使用多种方式删除WordPress中的评论作者链接。

    1. 使用CSS禁用WordPress评论表单中的网站URL

    当你查看评论表单的源代码时,你可以很容易地发现WordPress使用comment-form-url类在表单中显示网站URL。您需要做的只是简单地转到“外观 > 附加CSS”部分,粘贴以下CSS代码并发布您的网站。

    .comment-form-url{
    display:none;
    }
    .comment-form-url{
    display:none;
    }
    .comment-form-url{
    display:none;
    }

    这将从WordPress评论表单中删除评论作者链接框。下面是它在2021主题浏览器的开发者控制台上的外观。

    使用CSS在评论中禁用网站URL

    使用CSS在评论中禁用网站URL

    上述选项很容易做到,尽管它可能不适用于所有 WordPress 主题。由于主题可以使用自定义CSS来修改默认的WordPress评论表单,因此在使用上述方法之前,您必须检查主题的CSS。此外,您所有的旧评论仍将具有与作者姓名链接的网站URL。因此,从评论中删除作者链接的下一个选项是在主题的functions.php文件中使用一个函数。

    您可以转到“外观 > 主题编辑器”部分并为您的活动主题找到“functions.php”文件。将以下代码粘贴到文件末尾,然后单击“更新文件”按钮。

    /* Remove Comment Author Link */
    add_filter( ‘get_comment_author_link’, ‘remove_comment_author_link’, 10, 3 );
    function remove_comment_author_link( $return, $author, $comment_ID ) {
    return $author;
    }
    /* Remove Comment Author Link */
    add_filter( ‘get_comment_author_link’, ‘remove_comment_author_link’, 10, 3 );
    function remove_comment_author_link( $return, $author, $comment_ID ) {
    return $author;
    }
    /* Remove Comment Author Link */
    add_filter( 'get_comment_author_link', 'remove_comment_author_link', 10, 3 );
    function remove_comment_author_link( $return, $author, $comment_ID ) {
                return $author;
    }

    它在您的文件中应如下所示:

    添加删除评论作者链接的函数

    添加删除评论作者链接的函数

    如果您使用缓存插件,请确保清除缓存并检查您的评论表单。不要对评论表单上仍然存在网站URL字段感到惊讶。该代码的作用是删除已发布评论上评论作者姓名和网站URL之间的超链接。因此,您无需再担心评论表单中的网站URL字段。当您批准评论时,它将根本不使用。此函数还将从您网站上已发布的所有现有评论中删除评论作者链接。

    评论作者链接已删除

    评论作者链接已删除

    请记住,不建议编辑主题的functions.php,因为当您更新主题时更改将被清除。您可以为此目的使用子主题或使用代码片段插件将上述代码添加为独立片段。

    3. 使用功能删除WordPress评论表单中的网站URL

    您可以在主题的functions.php中插入以下代码,而不是上述函数。此功能将完全删除WordPress评论表单中提交的网站URL。但是,所有现有链接都将保留而不会产生任何影响。

    /* Remove Website URL in Comments */
    add_filter(‘comment_form’, ‘remove_url_field’);
    function remove_url_field($fields){
    if(isset($fields[‘url’]))
    unset($fields[‘url’]);
    return $fields;
    }
    /* Remove Website URL in Comments */
    add_filter(‘comment_form’, ‘remove_url_field’);
    function remove_url_field($fields){
    if(isset($fields[‘url’]))
    unset($fields[‘url’]);
    return $fields;
    }
    /* Remove Website URL in Comments */
    add_filter('comment_form', 'remove_url_field');
    function remove_url_field($fields){
    if(isset($fields['url']))
    unset($fields['url']);
    return $fields;
    }

    在您的评论表单中,它将如下所示。

    评论表单中的网站URL已删除

    评论表单中的网站URL已删除

    这是一种超级简单且免费的方法。转到WordPress管理面板中的“插件 > 安装插件”部分并安装“Hide Comment Author Link”插件。

    安装Hide Comment Author Link插件

    安装Hide Comment Author Link插件

    该插件没有任何设置页面,激活后将禁用已发布评论中的评论作者链接。请记住,此插件与上述方法3中解释的添加函数的工作相同。因此,您仍然会看到网站URL链接,用户可以在评论中留下他们网站的URL。但是,已发布评论中的评论作者姓名将不提供URL。

    5. 使用高级插件禁用评论URL

    下一个选项是为此目的使用高级性能优化插件。您可以使用终极性能优化插件,而不是为此使用专用插件。此插件的单站点许可证费用为24.95美元,可帮助您从WordPress安装中禁用不必要的项目。您只需单击几下即可禁用WooCommerce样式/JS、提要、XML-RPC和许多其他项目。

    此外,上述两种方法(添加功能和免费插件)是不可取的,因为它们会将评论者与表单上可用但在已发布评论中删除的网站URL混淆。因此,我们建议为此使用Perfmatters高级插件

    • 激活插件后,转到“设置 > 性能”菜单。
    • 导航到“选项 > 常规”部分。
    • 向下滚动并启用“删除评论URL”选项。
    • 单击“保存更改”按钮以在您的站点上应用更改。

    使用Perfmatters删除评论URL

    使用Perfmatters删除评论URL

    此插件将从您的评论表单中删除网站URL字段,并从所有现有评论中删除评论作者链接。

    6. 从主题设置中禁用网站URL

    有些主题允许您禁用在WordPress评论表单中提交的评论和网站URL。例如,您可以使用流行的Kadence主题轻松完成此操作,只需单击定制器设置。在尝试上述任何选项之前,请检查您的主题是否提供此类功能。

    删除Kadence主题中的评论网站字段

    删除Kadence主题中的评论网站字段

    小结

    评论形式的网站URL是WordPress网站中最大的垃圾邮件来源。但是,您没有任何默认选项来禁用评论作者链接或删除WordPress评论表单中的网站URL。您可以使用上述任何一种在您的网站上运行良好的方法。在测试了所有这些方法之后,我们建议使用Perfmatters,因为它可以通过许多其他优化来提高您网站的性能。尽管删除ReURL可以减少人工垃圾邮件,但您仍可能收到来自自动机器人的评论。在这种情况下,请使用安全插件来阻止机器人访问或在评论表单中添加验证码保护。

  • 前端CDNJS库及Google Fonts、Ajax和Gravatar国内加速服务

    前端CDNJS库及Google Fonts、Ajax和Gravatar国内加速服务

    由于某些众所周知的原因,好多开源的JS库采用的国外CDN托管方式在国内访问速度不如人意。所以u.sb特意制作了这个公益项目,托管了CDNJS的所有开源JS库以及反代了Google Fonts、Ajax和Gravatar。

    1、CDNJS开源JS库

    我们采用的方法是每天定时同步CDNJS的Github

    所有的JS/CSS库可以在这儿找到您需要的链接

    https://cdnjs.loli.net/ajax/libs/

    如果您使用cdnjs.com只需要替换 cdnjs.cloudflare.com 为 cdnjs.loli.net 即可,如

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    替换成

    <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    CDNJS的API开发文档请摸这里

    2、Google Fonts

    我们采用的方法是万能的Nginx反代 + 关键词替换

    使用的时候,您只需要替换 fonts.googleapis.com 为 fonts.loli.net 即可,如

    <link href="https://fonts.googleapis.com/css?family=Open+Sans">
    

    替换成

    <link href='https://fonts.loli.net/css?family=Open+Sans' rel='stylesheet'>
    

    如果需要Material icons ,把

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons">
    

    替换成

    <link href="https://fonts.loli.net/icon?family=Material+Icons">
    

    如果需要Early Access,把

    @import url(https://fonts.googleapis.com/earlyaccess/notosanskannada.css);
    

    替换成

    @import url(https://fonts.loli.net/earlyaccess/notosanskannada.css);
    

    如果需要下载单个字体,您只需要把 fonts.gstatic.com 替换成 gstatic.loli.net 或 themes.googleusercontent.com 替换成 themes.loli.net 即可

    比如

    https://fonts.gstatic.com/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2
    

    替换成

    https://gstatic.loli.net/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2
    

    或者

    https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/Zhfjj_gat3waL4JSju74E-V_5zh5b-_HiooIRUBwn1A.ttf
    

    替换成

    https://themes.loli.net/static/fonts/anonymouspro/v3/Zhfjj_gat3waL4JSju74E-V_5zh5b-_HiooIRUBwn1A.ttf
    

    Google Fonts的API文档请摸这里

    3、Google前端公共库

    方法同上,直接替换 ajax.googleapis.com 为 ajax.loli.net 即可,如

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    替换成

    <script type="text/javascript" src="https://ajax.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    Google前端库API开发文档摸这儿

    4、Gravatar头像

    方法还是同上,直接替换 *.gravatar.com 为 gravatar.loli.net 即可,如

    https://secure.gravatar.com/avatar/8406d089bc81b664a2610b8d214c1428
    

    替换成

    https://gravatar.loli.net/avatar/8406d089bc81b664a2610b8d214c1428
    

    5、赞助商

    国内外CDN, GeoDNS、域名、SSL证书等基础服务均由Riven Cloud赞助

    6、加速域名列表

    所有国内加速服务的域名列表如下,您只需要修改程序里的原域名即可

    原域名 加速域名 制作方法
    cdnjs.cloudflare.com cdnjs.loli.net 每日同步 Github
    ajax.googleapis.com ajax.loli.net Nginx 反代
    fonts.googleapis.com fonts.loli.net Nginx 反代
    fonts.gstatic.com gstatic.loli.net Nginx 反代
    themes.googleusercontent.com themes.loli.net Nginx 反代
    secure.gravatar.com gravatar.loli.net Nginx 反代

    注意: 个别国内的网络环境可能无法使用本服务,这也暂时没有办法解决这个问题,请自行检查或更换运营商。

    via u.sb