诶哎一下

分类： 学习

  • 什么是谷歌缓存（Google Cache）？

    什么是谷歌缓存（Google Cache）？-1

    Google的网络爬虫不断在互联网上搜索新的和更新的网页。

    当这些爬虫为站点的内容编制索引时，它们不仅仅使用该信息来提供搜索结果。他们备份页面并将它们添加到名为 Google Cache 的统一数据库中。

    您可能已经使用 Google 缓存查看已关闭或​​未正确加载的旧版本网站。但是您知道您也可以使用它来解决您网站上的问题吗？它甚至可以帮助您进行SEO工作。

    本文介绍了Google Cache及其检查方法。我们还将了解Google缓存如何提供帮助 – 以及何时不应过分依赖它。

    1. 什么是谷歌缓存？
    2. 为什么Google缓存很重要
    3. 如何查看Google缓存
    4. 使用Google缓存的原因
    5. Google缓存的限制
    6. 为什么找不到缓存的网页？
    7. 如何解决网站缓存页面的问题
    8. 如何从Google缓存中删除页面

    什么是谷歌缓存？

    Google缓存页面是在Google抓取过程中获取的页面内容的原始HTML备份。谷歌缓存作为一个整体由这些备份页面组成。

    如果您查看网站的缓存版本，它可能看起来很像该网站在被抓取时的样子。但有几个原因有时会出现与您预期不同的情况。

    两个主要原因是：

    • 网页由您的浏览器呈现，而不是由 Google呈现。这可能会导致与网站的当前版本存在差异。
    • JavaScript不会保存到缓存中，因此您网站的某些部分可能会丢失。

    在缓存页面的顶部，您会看到一个横幅，显示三件事：

    1. 缓存页面的URL — 这通常是您要访问的URL。在某些情况下，例如重定向的URL，它会有所不同。
    2. 缓存此版本页面的日期– 您可以查看您正在查看的缓存页面是昨天还是上周创建的。这不一定是最后一次抓取您的网页；我们稍后会讲到。
    3. 版本— 您可以选择查看完整版本、纯文本版本或页面来源。完整版向您显示浏览器呈现的页面。纯文本版本已关闭CSS且不显示图像，但您仍会看到超链接。单击查看源代码会显示页面的源代码：

    闪电博主页谷歌缓存

    闪电博主页的缓存版本示例

    为什么Google缓存很重要

    Google Cache的主要用途是供人们浏览互联网。它允许他们查看已关闭或加载有问题的网页。

    作为网站所有者，Google缓存至关重要还有其他原因。您希望您的网站永远不会关闭或出现故障，但它确实发生了。拥有缓存可使用户可以使用您的内容，即使某些内容无法正常工作。

    您还可以使用您网站的缓存版本来了解您的网站是如何编入索引的并诊断问题。请继续阅读以了解更多信息。

    如何查看Google缓存

    您如何从Google搜索引擎结果访问缓存的Google页面取决于您使用的设备类型。在桌面Web浏览器中，您有两个选择：

    1. 您可以点击指向Google搜索结果中页面缓存版本的链接。
    2. 可以直接进入页面。

    在移动浏览器上，您只能选择使用直接URL。

    从Google搜索结果查看缓存页面

    即使您有从搜索结果页面查看缓存站点的经验，您也可能希望阅读本文，因为Google在2021年初改变了查找缓存链接的方式。

    首先，在Google上搜索您要查看的页面。在搜索结果中页面的URL旁边，您应该会看到一个下拉的三角图标。单击它们，会出现一个标有“页库存档”的弹出窗口：

     

    如何查看链接谷歌缓存

     

    Google 的“页库存档”功能

     

    此功能目前处于测试阶段。它旨在让您在单击之前了解有关站点的更多信息（例如它是否安全）。

    在某些情况下，您可能看不到页库存档按钮。这可能意味着页面没有被缓存；我们稍后会讨论这意味着什么。

    但是，如果您使用的是移动设备，则不会看到任何页面的按钮。在这种情况下，请继续阅读以了解查看缓存页面的其他方法。

    修改URL查看缓存页面

    对于这种方法，您必须知道要查看的页面的URL。只需进入cache:website.xyz搜索栏。

    例如，cache:www.wbolt.com将带您直接访问我们缓存的主页。

    查看谷歌缓存的其他工具

    您不需要任何特殊工具来查看缓存页面；谷歌本身就让它变得非常容易。但是有一些工具具有您可能喜欢的功能。

    Chrome的Web缓存查看器扩展程序允许您右键单击任何链接以查看页面的Google缓存版本和Wayback Machine Web存档版本。

    来自Small SEO Tools的Google Cache Checker可让您一次查看最多五个页面缓存的URL和日期：

     

    google cache checker

    谷歌缓存检查器

     

    使用Google缓存查看页面的旧版本

    您的页面说它是昨天缓存的，但您想查看上周的版本。谷歌缓存可以吗？

    抱歉不行。

    Google只能向您显示缓存页面的一个版本。要查看以前的网站版本，您可以使用Wayback Machine之类的工具，这是过去网页版本的存档。

    看看我们以前的样子！

     

    2016年闪电博主页

    Wayback Machine上的2016 闪电博网站。

     

    使用Google缓存的原因

    事实是，还有其他工具可用于完成以下所有工作——在许多情况下，是更复杂的工具。

    但是Google缓存因其快速且易于检查而难以匹敌。这使其成为监视网页某些方面的一种有价值的方式。

    作为网站所有者，您可以通过以下五种方式使用Google缓存。

    1.检查重复内容

    有时，您单击缓存的链接并进入与您预期不同的页面。

    发生这种情况的原因之一是重复的内容。当Google看到两个高度相似的页面时，它可能会决定不在索引中将它们分开。这导致只有一个被保存在缓存中。

    Google 在同一链接下缓存多个页面可以提醒您您的网站上有重复的内容。重复的内容不仅会造成令人困惑的缓存情况——它对SEO不利。

    请借此机会检查这两个页面并找到区分它们的方法。

    2. 验证Google是否遵循您的规范标签

    也许您网站上的重复内容是有意为之，但您已添加rel=canonical标签来告诉Google抓取哪个版本。

    检查您不想抓取的页面之一的Google缓存版本。您应该被带到规范页面的缓存。

    3. 确保您的营销工作已被抓取

    您已经加大了SEO或内容制作的力度，并且希望确保Google正在将这些更改编入索引。

    快速查看页面的缓存版本可以告诉您它已被抓取。

    请注意，如果您的更改未出现在缓存页面上，则它们可能仍被编入索引。如果您担心，可以前往Google Search Console的URL Inspector进行确认。但是，如果您在缓存中看到您的更新，您就知道它们已被编入索引，并将开始影响您的搜索结果排名。

    4. 密切关注竞争对手网站的变化

    当竞争对手突然占据您的位置时，您会关心自己的事情，享受您在关键关键字的搜索结果顶部的位置。他们做了什么才能到达那里？您可以使用Google缓存来查找。将他们的缓存页面与当前版本进行比较——您将能够看到竞争对手最近所做的更改。

    5. 检索您网站的最新版本

    您应该始终备份您的网站，以防万一。也就是说，有时最坏的情况会发生，即使是最有准备的人。

    虽然您网站的Google缓存版本不会取代完整备份，但它有时确实可以让您在灾难发生之前查看页面的外观。您可以使用它来检索丢失的旧内容或代码。

    Google缓存的限制

    谷歌的缓存可以提供有用的信息，如果有什么东西看起来很奇怪，它可能值得调查。但谷歌缓存有一些已知的限制。

    谷歌缓存不会告诉你你的页面最后一次抓取的时间

    让我们从最大的误解之一开始。

    很多人认为每次Googlebot抓取页面时都会更新缓存。关于这个主题的许多其他文章会告诉您使用缓存来查看您的页面被抓取的频率。

    这不是真的。

    我们知道，因为谷歌的约翰·穆勒 (John Mueller) 在帮助主题中亲自告诉我们，他说：

    一般来说，我们并不总是在每次抓取页面时更新缓存页面。特别是当页面没有显着变化时，我们可能会选择只保留 [原文如此] 上的旧日期。

    这是一个专业提示：如果您正在寻找有关Google抓取您网站的频率、原因以及使用哪些漫游器的信息，请忘记缓存。该数据位于Google Search Console上。您可以在侧边栏中的“设置”下找到抓取报告。

    但是，您只能在域级别查看此信息。Search Console不会告诉您每个页面的抓取频率。

    页面可能无法正确呈现

    幸运的是，在这方面已经取得了一些进展。Google的Web Rendering Service用于在Web上呈现实时页面，它曾经基于过时的Chrome版本。因此，最新的浏览器有时呈现缓存页面的方式与Google呈现的当前页面不同。

    自2019年以来，Google Web Rendering Service使用最新版本的Chrome。

    但是，如果您的Chrome版本较旧，或者您使用的是其他浏览器，则缓存页面可能无法正确呈现。

    另一个渲染问题与缺少资源有关。Google备份的代码可能会引用CSS或JavaScript等资源。如果这些资源不再存在或已更改，则页面将无法正确呈现。

    显示错误页面

    我们已经研究了重复的内容或不正确的规范标签如何导致Google缓存显示错误的页面。正如您可能想象的那样，这限制了查看特定网页缓存的用处。

    某些页面未缓存

    这可能会让人感到意外，但事实证明，许多页面根本没有被缓存。

    一个普遍的误解是，未缓存的网站意味着Google认为它不是必不可少的，但这不一定是真的。接下来，我们将查看页面可能不会被缓存的一些原因。

    为什么我找不到缓存的网页？

    并非所有被抓取的页面都被缓存。如果您的页面没有缓存版本，请不要惊慌！这并不意味着您的页面尚未编入索引。

     

    什么是谷歌缓存（Google Cache）？-1

    404错误表示页面没有缓存版本

     

    如果您担心它确实没有被编入索引，您可以使用Google Search Console的URL Inspector进行检查。

    为了证明索引页面并不总是被缓存，我们回到谷歌的约翰穆勒。在Twitter上，他回答了一位用户询问未缓存页面的问题：

    我们不会缓存我们索引的所有页面，所以这可能会发生。有时需要一段时间，有时我们根本不缓存它。

    当用户问他未缓存的网站是否总是低质量时，他说：

    它可以是各种奇怪的技术怪癖的页面。缓存有点独立，所以它不代表我们索引和排名的内容。

    换句话说，缓存页面不是排名因素。即使您的网页没有缓存版本，您也可以将其置于搜索结果的顶部。

    但是未缓存的页面仍然值得研究。您可以探索几种不同的可能性。

    您的页面是基于JavaScript的

    与其他网页相比，Google可以更轻松地为某些基于JavaScript的网页编制索引。但是许多JavaScript页面最终都没有缓存，甚至没有索引。

    这是因为大多数HTML直到JavaScript执行后才会加载。如果没有可索引的内容，Google将不会创建缓存页面。

    元标记阻止缓存

    在你的网页的HTML代码元标记noindex是指页面无法通过谷歌进行索引，另外noarchive也会阻止谷歌缓存阻止它。任何一个都将导致页面不被谷歌缓存。

    也许这正是你想要的。但是如果您没有意识到页面上有一个noindexornoarchive标记，删除它可以解决您的缓存丢失问题。

    该页面是重复的（或谷歌认为是）

    如果Google确定您的两个页面是重复的，请想办法使它们独一无二。考虑每个页面的不同搜索意图。

    如何解决网站缓存页面的问题

    您的页面不必被缓存，但如果您想实现它，您可以做一些事情。

    将您的页面提交给Google

    如果您担心Google根本没有将您的网页编入索引，您可以查看Google Search Console。

    在Search Console顶部的 URL 检查搜索栏中输入页面的URL。如果是“URL is on Google”的结果，则该页面已被编入索引。如果该页面最近发生了变化，并且您认为Google未将新版本编入索引，则可以单击请求编入索引，请求Google对其重新编入索引。

    您可能还会得到“Page is not on Google”的结果。如果这样做，请向下滚动，您将能够看到有关该页面的一些详细信息。例如，您可以检查该页面是否允许抓取以及用户选择的规范是否与Google选择的规范相匹配。要请求索引，请单击请求索引：

     

    什么是谷歌缓存（Google Cache）？-1

    Google Search Console-URL索引请求

    如果你希望您的网站页面URL可以主动提交至Google Search Console，请求编入索引，您可以安装搜索推送插件来实现。

     

    检查常见站点问题

    我们已经介绍了您的页面可能不会被缓存的几个原因，例如大量JavaScript和重复的内容。

    除此之外，鼓励频繁索引的最好办法就是创建一个高质量的站点。确保您已针对移动设备优化了您的网站，并且您的网站速度很高。

    如果您的页面加载时间太慢，它甚至会减慢Google的漫游器速度，从而导致索引延迟。

    如何从Google缓存中删除页面

    我们认为Google缓存非常有用，但出于各种原因，您可能不希望将旧版本的网页存储在Google的服务器上。例如，您可能不希望停产产品的页面可用。

    防止页面缓存的一种方法是使用上面提到的noindex和noarchive标签。如果您想保留页面但从不希望它们被缓存，这些标签是理想的永久解决方案。

    您也可以直接要求Google从Google缓存中删除网址。要做到这一点，去谷歌搜索控制台，并单击侧边栏的删除。然后单击新要求。此时，您有两个选项：暂时删除网址和清除缓存的网址。

    临时删除意味着该网址在大约六个月内不会出现在Google搜索结果中。缓存也会消失。该页面将在再次上线时重新索引并重新缓存（如果您不希望发生这种情况，则必须添加元标记）。

    清除缓存的URL正是它听起来的样子。缓存会被移除，但是当网站被抓取时页面会被再次缓存。

    如果您希望更新页面的旧版本消失，这是一个很好的方法。您还可以通过在更改页面后提交用于索引的页面来推动Google更新页面的缓存。

    小结

    谷歌缓存并不是传闻中的一切。你不能用它来检查你的网站上次被抓取的时间——拥有它不会提高你的搜索引擎排名。有时，它存储的网站版本很奇怪、不完整或完全错误。

    但谷歌缓存对网站所有者有其用处。这是检查您的网站是如何编入索引的一种快速方法，它可以帮助您发现和诊断问题。您还可以使用Google Search Console来提高您的搜索引擎排名。

  • 如何提升WordPress评论加载性能

    如何提升WordPress评论加载性能

    你有没有注意到你最受欢迎的博客文章——那些引发大量评论的文章——需要更长的时间才能加载？如果您的评论系统没有经过仔细配置，很高兴看到WordPress评论滚滚而来，但它确实会减慢您的网站速度。

    想想使评论起作用的资源：

    • 查询数据库以提取现有评论，
    • 为每个新评论创建数据库条目，
    • 评论和评论元数据由访问者的浏览器接收和处理，
    • 请求、下载和加载外部资源，例如Gravatar，以及
    • 在许多情况下，必须下载和处理大型JavaScript和jQuery资源，才能使评论系统按预期方式工作。

    结果，繁忙的评论部分会增加网络服务器的负载，增加页面的整体大小，增加所需的HTTP请求数量，并添加额外的JavaScript资源供浏览器应对。无论您是使用原生WordPress评论还是插入了第三方评论系统（如Disqus或Facebook评论），评论都会拖累您网站的速度，您应该优先考虑优化您的网站的性能网站的评论部分。顺便提一句。如果您在处理垃圾评论时遇到问题，请务必阅读我们关于如何阻止WordPress垃圾评论主题的详细指南。

    修复加载缓慢的评论的策略

    如果您发现评论部分正在减慢您最受欢迎的博客文章的加载速度，您可以做一些事情：

    • 完全禁用评论。这肯定会解决问题。但是，如果您的评论部分没有增加任何价值，您真的应该考虑它。如果您的评论部分太忙而使您的网站变慢，那么它可能会增加足够的价值，您不会想将其杀死。查看我们关于如何在WordPress中禁用评论的完整教程。
    • 优化原生WordPress评论。如果您使用的是原生WordPress评论系统，您可以采取一些措施来加快速度。
    • 使用第三方评论系统。如果您的网站托管在廉价且资源匮乏的共享服务器上，那么使用第三方评论系统可能会加快包含大量评论的页面的速度。
    • 延迟加载评论。无论您使用的是WordPress原生评论还是Disqus之类的第三方评论系统，都要找到一种延迟加载评论的方法，以免它们减慢初始页面渲染速度。

    让我们分别考虑每种策略，以便您找出最适合您网站的策略。

    优化原生WordPress评论

    您可以做两件事来加速已经加载了大量原生WordPress评论的网页：限制最初加载的评论数量并使用本地托管的头像。让我们依次看看每个选项。

    限制显示的评论数量

    默认情况下，WordPress设置为在初始页面加载时加载您的所有评论。但是，加载数十甚至数百条评论，每条评论都包括一个独特的头像，确实会扩大您的页面并创建大量额外的HTTP请求。

    您可以非常轻松地减少初始页面加载时加载的评论数量。

    • 转到WordPress管理区域中的设置 > 讨论。
    • 查找其他评论设置部分。
    • 选中分页显示评论旁边的复选框，并为您希望在初始页面加载时显示的评论数量添加一个值。
    • 滚动到页面底部单击按钮保存更改。

    WordPress管理后台中的评论设置

    WordPress管理后台中的评论设置

    完成这些步骤后，您指定的评论数量将在初始页面加载时显示。

    使用本地托管的头像或在您的CDN上

    WordPress内置了对Gravatar的支持。这意味着任何拥有Gravatar帐户的用户在使用原生WordPress评论系统对博客发表评论时，都会将他们的自定义图像添加为头像。这为评论部分添加了一个很好的个性化元素，但成本很高。加载WordPress评论时，每个唯一的Gravatar都需要一个HTTP请求。因此，如果一个页面加载了来自50个不同评论者的评论，则需要50个HTTP请求才能下载所有这些Gravatar。可以想象，这会对页面速度产生相当大的影响。

    如果您认为Gravatar不值得添加HTTP请求，您可以有两种选择。首先，您可以通过转到设置>讨论，找到头像部分并取消选中头像显示框来完全禁用头像。

    如果您不想采取如此激烈的措施，另一种选择是切换到本地托管的头像。为此，请安装WP User Avatar插件。安装完成后，转到Avatars > Settings并选中复选框以Disable Gravatar and use only local avatars。如果您不喜欢WP User Avatar附带的默认头像，woorkup教程中有一张关于使用本地托管头像的干净神秘用户图片，您可以上传并用作默认头像。

    请记住，进行此更改后，所有评论都将使用默认头像显示，除非用户在您的网站上注册并上传自定义头像。

    您最后的选择是将您的Gravatars加载到您自己的CDN上。

    使用第三方评论系统

    您可能出于多种原因对切换到第三方评论系统感兴趣。首先，需要考虑服务器负载。创建和加载评论是一个资源密集型过程。如果您的博客评论部分真的很忙，那么将该工作卸载到第三方评论系统将减轻您网站服务器的负载。

    此外，第三方系统提供比原生WordPress评论系统更好的用户体验。他们还可能鼓励更多访问者发表评论，因为已经拥有第三方系统帐户的访问者可以立即发表评论，而无需注册或向您的网站提供详细信息。

    在某些情况下，所有这些好处都会发挥作用。然而，这并不是普遍正确的。

    不是每个人都喜欢第三方评论系统，其他人担心在幕后收集的数据。此外，第三方评论系统比原生 WordPress 评论更快的想法在理论上听起来不错，但实际上事情通常不会这样发展。

    如果您决定使用第三方评论系统，那么这样做是因为您喜欢使用该特定系统的体验，并且因为您确信您的网站访问者会像您一样喜欢它。不要切换到第三方评论以获得可能比现实更理论的感知性能改进。如果您确实跳转到第三方系统，请务必考虑实施下一个策略：延迟加载。

    延迟加载评论

    无论您是使用原生WordPress评论还是第三方系统，延迟加载评论都是一种几乎可以肯定会加快页面加载时间的技术。延迟加载的评论系统会从初始页面渲染中删除，并在访问者到达页面中的某个点时由JavaScript加载，或者通过单击“查看评论”之类的按钮来加载。

    如果实现延迟加载听起来有点技术性，那是因为它是。谢天谢地，你不必弄清楚。您可以使用一些插件来延迟加载您选择的评论系统。

    延迟加载原生WordPress评论

    延迟加载评论的功能并未内置于WordPress核心中。但是，我们推荐的一个很棒的轻量级免费解决方案是Lazy Load for Comments插件。

    WordPress插件-Lazy Load for Comments

    WordPress插件-Lazy Load for Comments

    该插件可从WordPress插件目录中获得。因此，您可以直接从WordPress管理区域安装它。这将通过延迟加载所有WordPress头像来减少HTTP请求的数量。配置非常简单。只需安装并在讨论设置下，有两个选项。默认情况下，它设置为“On Scroll”，这是大多数人可能更喜欢的。您还可以将其设置为“On Click”，这将创建一个按钮供访问者在评论加载之前单击。

    滚动或点击

    滚动或点击

    延迟加载本机评论的另一个选项是使用wpDiscuz插件。

    WordPress插件-wpDiscuz

    WordPress插件-wpDiscuz

    该插件可从WordPress插件目录中获得。因此，您可以直接从WordPress管理区域安装它。

    • 转到插件 > 安装插件。
    • 搜索“wpDiscuz”，然后选择立即安装按钮。
    • 安装插件后，转到Comments > Settings。
    • 向下滚动，直到看到显示Comments loading/pagination type的行，然后选择Lazy loading comments on scrolling单选按钮。
    • 接下来，转到设置 > 讨论。
    • 在“其他评论设置”部分中，减少“分页显示评论”字样后面框中的数字。
    • 使用小于10的数字，然后保存更改。
    • 请注意不要选中此行旁边的复选框。如果选中此框，默认的WordPress评论分页将覆盖wpDiscuz实现的延迟加载功能。

    现在，当您访问任何评论超过10条的页面时，只会加载前10条评论。到达评论部分的底部后，其他评论将自动加载。

    延迟加载Disqus

    如果您确实使用Disqus，那么延迟加载Disqus评论非常重要。如果您不这样做，Disqus可能会成为您网站加载速度的真正障碍。但是，与原生WordPress评论相比，延迟加载Disqus评论实际上可以加快您的网站速度。

    Disqus Conditional Load插件

    Disqus Conditional Load插件

    Disqus Conditional Load是一个免费插件，可用于在您的网站上延迟加载Disqus。如果您以前从未使用过Disqus，您首先需要注册一个帐户并将新站点添加到Disqus。设置Disqus站点后，通过转到插件> 安装插件，搜索“Disqus Conditional Load”并选择立即安装来安装Disqus Conditional Load 。

    安装完成后，转到Comments > Disqus并选择Upgrade以配置您的数据库以使用Disqus。在以下屏幕上，使用您的Disqus用户名和密码登录Disqus。在下一个屏幕中，选择几分钟前添加的Disqus站点，然后选择“Next”按钮。完成最后一步后，Disqus将安装在您的网站上，并配置为在读者到达您博客的评论部分时延迟加载。

    除了延迟加载所有图像（头像）之外，如果您不使用它，它还可以让您禁用计数脚本。因此，您的WordPress网站上的JavaScript调用减少了一次。

    延迟加载Facebook评论

    上面提到的Disqus Conditional Load插件的同一开发者还创建了一个免费插件，用于在您的WordPress网站上延迟加载Facebook评论。Facebook的脚本以使网站陷入瘫痪而闻名，即使这些脚本是异步加载的。

    Lazy Facebook Comments插件

    Lazy Facebook Comments插件

    Lazy Facebook Comments是一个免费插件，您可以使用它来加载滚动评论或单击按钮。这可确保您仅在需要时加载Facebook脚本。您还可以调整评论数量、配色方案、语言、宽度、排序顺序等。

    小结

    评论是大多数博客的核心功能，但新兴的评论部分确实会降低您网站的加载速度。您可以通过优化原生WordPress评论和延迟加载评论以将其从初始页面加载中删除，从而加快评论和WordPress网站的速度。

  • 有损与无损压缩两种图片格式初学者指南

    有损与无损压缩两种图片格式初学者指南

    数字图像是网络的固有部分，没有媒体就很难创建任何内容。不起眼的静止图像是为您的写作提供额外背景的绝佳方式。

    但是，如果没有优化，图像的文件大小可能会很大。有损与无损压缩是一个常见的考虑因素，因为每个都可以减小图像的大小，尽管也需要考虑质量权衡。

    您几乎总是需要对图像应用一些压缩。这样可以将质量保持在您指定的可接受的水平，同时减小文件大小。选择正确的压缩级别将取决于您的最终目标和要求。

    在这篇文章中，我们将研究有损与无损压缩。在整个过程中，我们将讨论图像“成型”的过程、压缩是什么，以及优化图像的许多其他方面。

    1. 有损与无损之间的差异
    2. 数字图像的元素
    3. 网络图像优化的工作原理
    4. 有损压缩的优缺点
    5. 无损压缩的优缺点
    6. 如何在有损与无损之间进行选择
    7. 使用在线压缩服务来优化您的图像

    有损与无损之间的差异

    当涉及到任何数字图像压缩时，有几种不同的格式可供选择。有时这些会根据许多因素而有其他名称。但是，在核心级别，您会发现两种类型：

    • 有损压缩：这里的目的是为图像提供尽可能小的文件大小。因此，图像质量通常在优先级列表中处于低位。
    • 无损压缩：您仍然会发现使用这种压缩格式可以显着减小文件大小，但图像不会受到伪影和其他问题的影响。

    在大多数情况下，您决定使用哪种格式将归结为您的最终目标：您想要小文件，还是专注于保持质量？

    有损压缩将从图像中永久删除它认为不必要的数据。它使用许多不同的技术来实现这一点，从而产生更小的文件大小。

    无损压缩也会删除数据，但如果需要，它可以恢复原始数据。目标是保持高质量，同时减小文件大小。

    有几种方法可以实现这一点，但结果通常是相同的。要找到适合您需求的正确选项，让我们先退后一步，回顾一下图像和压缩的基本知识。

    数字图像的元素

    与软件和Web开发一样，通常有一个“堆栈”将图像从相机拍摄到Web。

    图像以“原始”数据开始（因此名称为RAW）。这类似于应用程序的代码：片段、行和值转换为带有颜色、图像占位符、动态元素等的背景。

    对于图像，RAW文件根据相机制造商、编辑软件、色彩空间算法等呈现略有不同的图像表示。从那里，您编辑图像并将其导出为多种文件格式之一（稍后将详细介绍）：

    在Capture One中编辑RAW文件的示例

    在Capture One中编辑RAW文件的示例

    构成标准数字图像的几个不同元素：

    • 文件类型：不同类型将提供可能适合或不适合您的最终图像的质量。关键是为应用程序选择最合适的文件类型。
    • 分辨率：您经常会看到这表示为百万像素 (MP)，但您也将使用每英寸像素 (PPI) 或每英寸点数 (DPI)。更高的分辨率提供更高的质量，但它们也会增加初始文件大小
    • 位深度：这个方面决定了图像中的颜色信息。低位深度只会渲染几种颜色，而高位深度可能会一次渲染数百万种颜色。一般来说，越高越好。
    • 尺寸：这是图像占用的物理空间。例如，1,000像素x500像素可以定义图像的总大小。
    • 颜色空间：这是一种确定颜色显示方式的算法。每个色彩空间的设置都不同，这通常取决于摄影师的偏好。

    这些元素结合起来提供不同质量的最终图像。例如，一张高分辨率、高位深度的大型JPEG照片将提供最高的质量和清晰度：

    高质量的图像

    高质量的图像

    相比之下，即使是大尺寸且能够显示多种颜色的图像，在低分辨率下也会显得很差：

    低质量的图像

    低质量的图像

    这种平衡是您在应用压缩之前开发核心图像的方式。但是，您用于图像的格式对最终质量有很大影响。

    网络图像优化的工作原理

    因为图像压缩在一般意义上是相同的，所以您可以将标准规则应用于优化网络图像的方式。

    我们在其他地方介绍了很多这些概念，但值得快速总结以供参考：

    • 使用72PPI分辨率，因为这是网络的标准。出于存档原因，您可以使用更高的PPI/DPI，但我们假设您正在发布到网络。
    • 将图像的“长边”设置为2048像素，因为这对于许多不同的应用程序来说是最佳的。
    • 如果可以选择，请使用8位颜色深度。
    • 在发布之前通过压缩和优化工具运行图像。

    这是一种简单的格式，可以为您提供一致的结果，尽管压缩和优化是我们将在本文其余部分进行扩展的内容。

    为此，让我们看看有损压缩与无损压缩的优缺点。

    图像压缩如何帮助您的Web图像

    一般而言，“压缩”将最小值和最大值压缩在一起。例如，压缩会提高音乐中的最低音量并降低最高音量。这使得平均电平对耳朵更响亮。

    对于图像，压缩更像是一个还原过程。这意味着更加强调从图像中删除数据以减小文件大小，同时保持尽可能高的质量。

    有许多不同的专有算法可以帮助减少图像文件的大小。在许多情况下，这些都是特定公司专有的。您会发现许多“有损”和“无损”压缩标准，每个都有独特的描述符：

    ShortPixel中的压缩选项

    ShortPixel中的压缩选项

    综上所述，应用图像压缩有很多好处，这些好处不是特定格式独有的：

    • 您可以保持较小的文件大小，从而提高您网站的性能。
    • 通过扩展，您站点的服务器将有更少的工作要做，从而影响性能。
    • 小文件大小有助于减少服务器排放。因此，您有助于为可持续和合乎道德的未来做出贡献。
    • 根据您选择的算法和压缩质量，您可以显示近乎完美和可比的质量。

    就像创建可共享的图像一样，使用各种压缩值，使用特定的公司以及选择正确的算法对于找到适合您的结果至关重要。

    有损压缩的优缺点

    有损压缩减少了图像的文件大小，几乎排除了所有其他方面。该算法的工作方式是永久删除数据。这可能和听起来一样具有破坏性。

    虽然我们不会过多地讨论具体细节，但要知道一些数据有损压缩删除在图像中是可见的。这个想法是以更轻的重量提供原始、高质量图像的最佳表示——这意味着一些数据不会被削减。

    一般来说，使用有损压缩有几个好处：

    行列，他们会通过WordPress内幕技巧获得我们的每周时事通讯！

    • 文件大小会很小——在某些情况下，小于10KB。
    • 尽管存在伪像，但在许多情况下，质量损失是可以接受的。

    这给我们带来了使用有损压缩的负面影响——图像质量会随着任何数量的压缩而降低：

    JPEG图像的压缩滑块

    JPEG图像的压缩滑块

    你会发现色带——颜色阴影没有以正确的方式呈现——并且在某些情况下会看到边缘清晰度的损失。颜色较少的图像会显示较少的这种情况，但仍然会出现清晰度的降低。

    此外，图像质量下降是压缩过程的永久特征。这意味着以后无法扭转这种影响。

    尽管有这些缺点，但有损压缩对于Web和您网站的性能来说还是非常出色的。微小的文件大小并不总是会产生颗粒状的图像，尽管您可以（当然）将事情推向极端：

    过度压缩图像的示例

    过度压缩图像的示例

    然而，有损并不是唯一的选择。无损压缩是注重质量的网站所有者的替代方案。

    无损压缩的优缺点

    无损压缩就像标签上所说的那样：它在不影响可见质量的情况下尽可能地压缩图像的文件大小。它通过删除图像元数据来做到这一点，这会占用不必要的空间：

    图像的元数据

    图像的元数据

    无损压缩算法还寻找重复的像素序列，然后编码一个快捷方式来显示它们。例如，以“命令行界面”为例。您通常会定义其首字母缩写词一次，然后使用“CLI”（或您选择的首字母缩写词）以闪电般的速度引用它

    无损压缩的工作方式相同，因为它的破坏性较小。虽然删除元数据是不可逆的，但一些压缩将是可逆的，使其成为适用于多种用途的灵活算法。

    使用无损压缩的优点在于保持质量：

    • 与所有其他算法相比，无损压缩在图像中保留了最高质量。
    • 无损对于存档目的来说非常棒。例如，摄影师可以平衡存储资源与保留最多数据的图像。
    • 无损是视觉艺术的首选压缩算法：摄影、平面设计、数字艺术等。将无损算法与适当的深度和分辨率相结合，几乎可以实现“一对一”的复制。

    然而，关于无损压缩对特定领域的服务程度，有一点需要注意：应用范围很小。这会降低其整体可用性。

    以下是要考虑的无损压缩的其他一些缺点：

    • 如果网站使用许多图像，则无损压缩可能不是显示它们的最佳选择。这是因为在大多数情况下，您会希望在这些类型的情况下重视较小的文件大小。
    • 尽管压缩减小了文件大小，但无损算法不会像有损那样改变图像数据。正因为如此，您可能只会看到尺寸略有减少，而不是极端的瘦身效果。

    接下来，我们将研究最快（并且可能是最好）的方法。

    如何在有损与无损之间进行选择

    至此，您了解有损压缩与无损压缩之间的区别。但是，您可能仍然不知道在您的网站上使用哪种算法最好。

    有两种情况需要考虑：

    1. 对于网络上的大多数用例，可以使用有损压缩。
    2. 如果您想展示摄影或摄影艺术，无损压缩会更好地为您服务。

    这些注意事项依赖于使用标准 Web 图像格式之一，例如JPEG、PNG或GIF。但是，您的压缩需求可能会因HEIC和WebP等更现代的格式而有所不同。

    我们甚至会说，除非您在网站上显示照片，否则有损压缩应该是您的默认选择。WordPress默认压缩图像，这足以说明有损压缩几乎适用于所有应用程序。

    使用在线压缩服务来优化您的图像

    在将图像显示在您的网站上之前，您可以通过多种方式压缩图像。例如，您可以选择在编辑阶段应用压缩。无论如何，这可能是从RAW格式转换的副产品。

    然而，一个流行的选择是许多在线服务之一。每一个都将提供一系列算法和示例性用户界面 (UI)。更重要的是，大多数都有一些免费服务，至少在您提交之前试用该应用程序。

    我们在关于图像优化的文章中介绍了一些选项，尽管这些是连接到应用程序编程接口 (API) 的特定于WordPress的插件。好消息是这些插件中的许多也提供了在线界面。例如，考虑ShortPixel：

    ShortPixel接口

    ShortPixel接口

    在这里，您将图像拖到上传器上，然后等待应用程序压缩和处理它们。但是，您需要先选择算法，因为该过程将立即开始。

    选择很简单：两种形式的有损压缩（“有损”和“光泽”），以及无损选项。ShortPixel的界面很好地解释了每种算法之间的区别，您可以在几秒钟内下载图像。

    虽然两者都可以满足您的需求，但Imagify界面看起来比ShortPixel的更流畅、更专业。这里还有三个“压缩级别”——Normal、Aggressive和Ultra：

    Imagify界面

    Imagify界面

    这里的细微差别是Imagify从无损压缩开始，然后逐步发展为具有严重伪影的有损算法。但是，您在其他解决方案中找不到其他几个选项。

    对于初学者，您可以保持图像的EXIF数据完整，甚至在转换后调整它们的大小。这有时是无价的，特别是如果您想应用可能会删除EXIF数据或限制调整图像大小的方式的压缩级别。

    就像它的神话同名一样，Kraken可以处理您的图像并应用各种类型的压缩。大多数用户会选择有损或无损类型。

    Kraken界面

    Kraken界面

    但是，还有一个专家模式：

    Kraken专家模式选项

    Kraken专家模式选项

    这使您可以根据自己的需要调整压缩，以及其他选项。例如，您可以调整JPEG和PNG压缩级别，选择保留图像中的元数据，甚至使用色度子采样来进一步更改颜色。

    小结

    图片看起来像是您网站的一个简单方面：您获取一个文件，将其上传到 WordPress，然后添加一个图片块来显示它。

    但是，在为网络准备图像的过程中还有很多事情可能比您意识到的要多。您选择的压缩格式会影响文件大小、图像质量等。

    这篇文章研究了有损与无损压缩，并总结了你应该选择哪一个。尽管在质量与大小之间走钢丝，但有损压缩对于网络上的大多数用例来说都是完美的。摄影师或那些担心篡改图像质量的人会希望使用无损压缩，尽管在文件大小方面的好处较少。

  • 如何在WordPress中延迟JavaScript解析（4种方法）

    如何在WordPress中延迟JavaScript解析（4种方法）

    您是否通过性能测试工具运行您的WordPress网站，却遇到了延迟在WordPress中解析JavaScript的指令？

    实施此更改可以对您网站的页面加载时间产生积极影响，尤其是对于移动访问者。但是警告可能有点难以理解，这就是为什么我们要准确解释延迟解析JavaScript的含义以及如何在WordPress网站上实现此更改。

    以下是您将在本文中学到的内容：

    1. 在WordPress中延迟解析JavaScript意味着什么？
    2. 如何判断是否需要延迟解析JavaScript
    3. 延迟解析JavaScript的不同方法
    4. 如何在WordPress中延迟JavaScript解析（4种方法）

    如果您只想直接跳到教程，可以单击上面列表中的最后一个链接。

    在WordPress中延迟解析JavaScript意味着什么？

    如果您曾经通过Google PageSpeed Insights、GTmetrix或其他页面速度测试工具运行过您的WordPress网站，您可能会遇到过延迟解析JavaScript的建议。

    但是……这实际上是什么意思？为什么它是一个重要的性能考虑因素？

    基本上，当有人访问您的WordPress网站时，您网站的服务器会将您网站的HTML内容传送到该访问者的浏览器。

    然后访问者的浏览器从顶部开始，并通过代码呈现您的网站。如果在从上到下的移动过程中找到任何JavaScript，它将停止呈现页面的其余部分，直到它可以获取并解析JavaScript文件。

    它会对找到的每个脚本执行此操作，这可能会对您网站的页面加载时间产生负面影响，因为访问者需要在浏览器下载和解析所有JavaScript时盯着空白屏幕。

    如果您网站的核心功能不需要某个脚本（至少在初始页面加载时），您不希望它妨碍加载网站更重要的部分，这就是为什么这些页面速度测试工具总是告诉你推迟对JavaScript的解析。

    那么延迟解析JavaScript是什么意思呢？

    本质上，您的网站会告诉访问者的浏览器等待下载和/或解析JavaScript，直到您网站的主要内容已经完成加载。此时，访问者已经可以看到您的页面并与之交互，因此下载和解析该JavaScript的等待时间不再具有如此负面的影响。

    通过加快内容的首屏加载时间，您可以让Google感到高兴，并为您的访问者创造更好、更快的体验。

    如何判断是否需要延迟解析JavaScript

    要测试您的WordPress站点是否需要延迟解析JavaScript，您可以通过GTmetrix运行您的站点。

    GTmetrix会给你打分，还会列出需要推迟的特定脚本：

    在GTmetrix中延迟解析JavaScript测试

    在GTmetrix中延迟解析JavaScript测试

    延迟解析JavaScript的不同方法

    有几种不同的方法可以延迟JavaScript的解析。首先，您可以将两个属性添加到脚本中：

    1. Async
    2. Defer

    这两个属性都允许访问者的浏览器在不暂停HTML解析的情况下下载JavaScript。但是，不同之处在于，虽然async不会暂停HTML解析以获取脚本（如默认行为那样），但它会暂停HTML解析器以在获取脚本后执行脚本。

    使用defer，访问者的浏览器在解析HTML时仍然会下载脚本，但他们会等待解析脚本，直到HTML解析完成。

    与Web一起成长的这张图表很好地解释了这种差异：

    图形解释异步与延迟

    图形解释异步与延迟

    Varvy的Patrick Sexton推荐的另一种选择是，仅在初始页面加载完成后才使用脚本调用外部JavaScript文件。这意味着在初始页面加载完成之前，访问者的浏览器不会下载或执行任何JavaScript。

    最后，您将看到的另一种方法是将JavaScript移动到页面底部。但是，这种方法并不是一个很好的解决方案，因为即使您的页面将很快可见，访问者的浏览器仍会将页面显示为正在加载，直到所有脚本完成。这可能会阻止一些访问者与您的页面进行交互，因为他们认为内容没有完全加载。

    如何在WordPress中延迟JavaScript解析（4 种方法）

    要在WordPress中延迟JavaScript的解析，您可以采取三种主要途径：

    • 插件——有一些很棒的免费和高级WordPress插件可以推迟JavaScript解析。我们将向您展示如何使用两个流行的插件来做到这一点。
    • Varvy方法——如果您精通技术，您可以直接编辑您网站的代码并使用Varvy的代码片段。
    • Functions.php文件——您可以将代码片段添加到子主题的functions.php文件中以自动延迟脚本。

    您可以单击上方直接跳转到您喜欢的方法或通读所有技术以找到最适合您的方法。

    1. 免费的异步JavaScript插件

    Async JavaScript是来自Frank Goossens的免费WordPress插件，他是流行的Autoptimize插件背后的同一个人。

    它为您提供了一种使用异步或延迟延迟解析JavaScript的简单方法。

    首先，您可以从WordPress.org安装并激活免费插件。然后，转到设置 →  Async JavaScript以配置插件。

    在顶部，您可以启用插件的功能并在异步和延迟之间进行选择。记住：

    • Async下载JavaScript，同时仍解析HTML ，但随后暂停HTML解析以执行 JavaScript。
    • Defer在仍然解析HTML的同时下载JavaScript并等待执行它，直到HTML解析完成。

    如何使用异步JavaScript插件

    如何使用异步JavaScript插件

    再往下，你还可以选择如何处理jQuery。许多主题和插件严重依赖jQuery，因此如果您尝试推迟解析jQuery脚本，您可能会破坏您网站的一些核心功能。最安全的方法是排除jQuery，但您可以尝试推迟它。只要确保彻底测试您的网站。

    再往下，您还可以手动包含或排除特定的脚本被延迟，包括一个很好的用户友好功能，让您可以定位在您的网站上活跃的特定主题或插件：

    异步JavaScript包含/排除规则

    异步JavaScript包含/排除规则

    2.使用WP Rocket插件

    除了一堆其他性能优化技术外，WP Rocket还可以帮助您在WP Rocket仪表盘的“File Optimization”选项卡中延迟JavaScript的解析。在JavaScript Files部分中查找Load JavaScript deferred选项。

    与Async JavaScript插件一样，WP Rocket还允许您排除jQuery以避免网站内容出现问题：

    如何使用WP Rocket延迟解析JavaScript

    如何使用WP Rocket延迟解析JavaScript

    3. 使用Varvy推荐的方法（代码）

    早些时候，我们提到Varvy的Patrick Sexton建议使用一个代码片段，该代码片段会等待下载和执行JavaScript，直到您的网站完成初始页面加载。

    您可以通过调整Varvy提供的代码片段，然后将脚本添加到您的主题中，紧接在结束</body>标记之前来实现此方法。

    这是来自Varvy的代码：

    <script type=“text/javascript”>
    function downloadJSAtOnload() {
    var element = document.createElement(“script”);
    element.src = “defer.js”;
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener(“load”, downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent(“onload”, downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>
    <script type=”text/javascript”>
    function downloadJSAtOnload() {
    var element = document.createElement(“script”);
    element.src = “defer.js”;
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener(“load”, downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent(“onload”, downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>
    <script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

    确保将“defer.js”替换为您要延迟的JavaScript文件的实际文件名/路径。然后，您可以使用wp_footer钩子通过子主题的functions.php文件注入代码。

    使用这种方法，您可以将Varvy的代码包装成这样：

    /**
    Defer parsing of JavaScript with code snippet from Varvy
    */
    add_action( ‘wp_footer’, ‘my_footer_scripts’ );
    function my_footer_scripts(){
    ?>
    REPLACE_WITH_VARVY_SCRIPT
    <?php
    }
    /**
    Defer parsing of JavaScript with code snippet from Varvy
    */
    add_action( ‘wp_footer’, ‘my_footer_scripts’ );
    function my_footer_scripts(){
    ?>
    REPLACE_WITH_VARVY_SCRIPT
    <?php
    }
    /**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

    4.通过functions.php文件延迟JavaScript

    最后，您还可以通过将以下代码片段添加到您的functions.php文件中，将defer属性添加到您的JavaScript文件中，而无需插件：

    function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don’t break WP Admin
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.js’ ) ) return $url;
    return str_replace( ‘ src’, ‘ defer src’, $url );
    }
    add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );
    function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don’t break WP Admin
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.js’ ) ) return $url;
    return str_replace( ‘ src’, ‘ defer src’, $url );
    }
    add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );
    function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

    本质上，这个片段告诉WordPress将defer属性添加到除jQuery之外的所有JavaScript文件。

    它既快速又简单，但它并没有像Async JavaScript插件提供的那样为您提供细粒度的控制。

    小结

    推迟WordPress网站上的JavaScript解析是一个重要的性能考虑因素。

    一旦您使用上述方法之一来延迟WordPress中的JavaScript解析，我们建议您做两件事：

    1. 测试您的网站以确保推迟某些脚本不会破坏首屏内容的关键。同样，这通常发生在jQuery中，这就是为什么很多工具允许您排除jQuery.js。但是，它也可能发生在其他脚本中。
    2. 再次通过GTmetrix运行您的站点，以确保您的站点延迟了尽可能多的脚本（如果排除jQuery，您可能无法获得完美的分数——但您的分数应该会更好）。

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

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

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

    什么是第三方外部服务？

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

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

    外部服务如何导致问题

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

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

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

    识别外部服务

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

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

    外部服务——JavaScript

    外部服务——JavaScript

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

    jQuery外部脚本

    jQuery外部脚本

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

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

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

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

    WordPress测试站点

    WordPress测试站点

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

    Pingdom外部服务——（速度测试）

    Pingdom外部服务——（速度测试）

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

    处理Google AdSense

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

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

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

    Google AdSense外部请求

    Google AdSense外部请求

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

    选项 1 – 异步加载

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

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

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

    选项 2 – 删除它们

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

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

    删除Google AdSense后（速度测试）

    删除Google AdSense后（速度测试）

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

    解决Facebook Like框

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

    Facebook小部件请求

    Facebook小部件请求

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

    选项 1 – 异步加载

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

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

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

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

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

    选项 2 – 改用图片横幅

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

    选项 3 – 摆脱它

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

    删除Facebook点赞框后（速度测试）

    删除Facebook点赞框后（速度测试）

    处理Instagram小部件

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

    Instagram外部请求

    Instagram外部请求

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

    选项 1 – 改用图片横幅

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

    选项 2 – 摆脱它

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

    删除Instagram小部件后

    删除Instagram小部件后（速度测试）

    处理Disqus评论

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

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

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

    Disqus外部请求

    Disqus外部请求

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

    选项 1 – 延迟加载Disqus评论

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

    延迟加载Disqus后

    延迟加载Disqus后（速度测试）

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

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

    延迟加载原生WordPress评论后

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

    处理Facebook转化跟踪像素

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

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

    Facebook转化跟踪像素外部请求

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

    去除FB像素后

    去除FB像素后（速度测试）

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

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

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

    CDN后

    CDN后（速度测试）

    进一步优化

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

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

    优化后

    优化后（速度测试）

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

    防止停滞加载

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

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

    使用谷歌标签管理器

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

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

    但是，这样做也有一些缺点：

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

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

    googletagmanager.com请求

    googletagmanager.com请求

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

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

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

    New Relic Monitoring – 外部广告网络

    New Relic Monitoring – 外部广告网络

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

    GTmetrix报告时间

    GTmetrix报告时间

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

    GTmetrix瀑布图

    GTmetrix瀑布图

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

    小结

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

  • 如何在您的WordPress网站上安装Cloudflare

    如何在您的WordPress网站上安装Cloudflare

    Cloudflare是一家提供内容交付网络 (CDN)、DNS、  DDoS保护和安全服务的公司。他们在网络性能行业因快速的DNS查找时间而闻名，并拥有由全球100多个不同数据中心组成的强大网络。他们得到了谷歌、微软和高通等业内知名人士的支持。他们的一些客户包括纳斯达克、Digital Ocean、Zendesk和思科。

    如果您正在寻找一种简单的方法来加快和增强WordPress网站的安全性，Cloudflare是一个很好的解决方案。大多数客户甚至可以使用他们的免费计划，该计划提供无限的CDN带宽。请按照以下步骤在您的WordPress网站上安装Cloudflare。

    注意：如果您使用Cloudflare，则无法使用来自Amazon Route 53的高级DNS。Cloudflare作为完整的代理服务运行，这意味着您必须选择其中一个。如果您想使用我们的高级DNS，您可以使用替代CDN来加速您的网站，例如KeyCDN，它不是一个完整的代理。

    1. 安装Cloudflare
    2. 常见的Cloudflare问题
    3. 如何清除Cloudflare缓存

    安装Cloudflare

    本教程假设您已经有一个Cloudflare帐户。如果您不这样做，您可以访问Cloudflare网站并注册一个免费帐户。

    第 1 步

    登录Cloudflare仪表盘，然后单击“+ 添加站点”。输入您的WordPress站点的域名，然后单击“Begin Scan”。（不需要加www或者HTTP/HTTPS，根域就可以了）

    将WordPress站点添加到Cloudflare

    将WordPress站点添加到Cloudflare

    可能需要一两分钟，然后单击“Continue Setup”。

    第 2 步

    Cloudflare为您提供了两种选择。您可以使用他们的CDN和protection（加速和保护您的网站），或者您可以简单地使用他们的DNS。大多数客户会想要前者，因为这是您将从Cloudflare提供的一切中受益的地方。为确保您的域已启用，请确保云以橙色点亮。如果您有其他记录，例如电子邮件（MX记录），这些记录应该关闭Cloudflare（灰色）。验证完所有内容后单击继续。您以后可以随时修改这些记录。

    验证DNS记录

    验证DNS记录

    第 3 步

    在下一页上，您需要选择 Cloudflare 计划。我们建议从适用于大多数用户的免费计划开始。然后点击“继续”。您可以阅读有关Cloudflare 计划差异的更多信息。

    免费Cloudflare计划

    免费Cloudflare计划

    第 4 步

    然后，您需要将域上的名称服务器更改为指向Cloudflare（使用它们提供的名称）。因为Cloudflare是一个完整的代理服务，所以基本上它的工作原理是将您的域指向Cloudflare，然后Cloudflare将您的域指向服务器地址。切换名称服务器时没有停机时间。这里有几个指向不同域名注册商的文档链接，说明如何更改它们。

    然后点击“Continue”。

    更改为Cloudflare的名称服务器

    更改为Cloudflare的名称服务器

    这应该不会花费很长时间，但最多需要24小时才能处理此更改。

    第 5 步

    如果您的站点尚未指向服务器，则需要更新A记录以指向Cloudflare仪表盘中的服务器IP。单击“DNS”并在A名称记录旁边，将其更改为您的服务器的IPv4地址。

    更新Cloudflare A名称记录
    更新Cloudflare A名称记录

    就是这样！您的WordPress网站现在已安装Cloudflare。

    第 6 步（可选）

    对于WordPress用户，我们确实推荐了一个额外的步骤。这不是必需的，但如果您不安装官方Cloudflare插件，Cloudflare的某些功能可能无法正常运行。

    免费的Cloudflare WordPress插件

    免费的Cloudflare WordPress插件

    您可以从WordPress插件库下载它， 也可以在WordPress仪表盘中的“插件-安装插件”下搜索它。它具有以下特点：

    • 修复来自同一IP地址的WordPress评论
    • 自动缓存清除
    • 启用Cloudflare的Universal SSL时重写标头以防止重定向循环
    • 能够从插件本身更改Cloudflare帐户的设置（缓存清除、安全级别、图像优化等）
    • 查看分析，例如总访问者、节省的带宽和阻止的威胁
    • 支持HTTP2/服务器推送

    安装插件后，您需要在设置中输入您的Cloudflare电子邮件地址和API密钥。您可以在此处获取您的API密钥。复制写着“Global API Key”的那个。然后单击“Save API Credentials”。

    Cloudflare WordPress插件API凭据

    Cloudflare WordPress插件API凭据

    在“Home”选项卡下，您可以根据需要应用默认设置或更新设置。

    Cloudflare插件默认设置

    Cloudflare插件默认设置

    在“Setting”选项卡下，如果您使用专业计划，您可以启用图像优化、打开开发模式、更改安全级别并启用自动HTTPS重写。

    Cloudflare插件速度和安全设置

    Cloudflare插件速度和安全设置

    在“Analytics”选项卡下，您可以查看WordPress网站上的请求数量、带宽、访问者和威胁。

    Cloudflare插件分析

    Cloudflare插件分析

    常见的Cloudflare问题

    用户尝试在其WordPress网站上安装Cloudflare时遇到的一个非常常见的错误是Chrome中的“ ERR_TOO_MANY_REDIRECTS ”或“页面未正确重定向”(Firefox)。

    如何在您的WordPress网站上安装Cloudflare-1

    Cloudflare的常见flexible SSL错误

    这是因为已经在您的Web服务器上设置了SSL，然后使用Cloudflare启用了flexible SSL。

    将Cloudflare加密级别设置为Full

    将Cloudflare加密级别设置为Full

    否则，您可以创建页面规则来解决此问题。

    如何清除Cloudflare缓存

    遇到问题？有时您需要清除（清除）Cloudflare缓存。有两种简单的方法可以做到这一点。

    选项 1 – 清除WordPress插件中的Cloudflare缓存

    如果您安装了Cloudflare WordPress插件，您可以从“设置 → Cloudflare”中清除缓存。

    清除WordPress插件中的Cloudflare缓存

    清除WordPress插件中的Cloudflare缓存

    选项 2 – 从控制面板清除Cloudflare缓存

    您的另一个选择是从他们的控制面板中清除Cloudflare缓存。为此，请单击“Caching”选项卡，然后单击“Purge Everything”。

    清除Cloudflare缓存

    清除Cloudflare缓存

    一旦一切就绪并顺利运行，最好只清除单个文件的缓存。Cloudflare提供了一种简单的方法来执行此操作。

    自定义清除文件缓存

    自定义清除文件缓存

    注意：如果您清除所有内容，您可能会暂时降低网站的性能，因为资产必须重新缓存。但是，有时这是不可避免的，尤其是当您不确定站点上的哪些脚本或资产需要刷新时。

    其他Cloudflare设置

    既然您知道如何安装Cloudflare，我们建议您查看我们关于WordPress用户最佳Cloudflare设置的详细帖子。您还可以了解Cloudflare 的自动平台优化 (APO)工具。

  • 如何为WordPress设置Cloudflare APO – 将性能提升高达300%

    如何为WordPress设置Cloudflare APO - 将性能提升高达300%

    对于性能爱好者来说，Cloudflare的APO代表着在最大化WordPress性能方面向前迈出了一大步。

    在我们的基准测试中，我们发现在我们的测试站点上启用APO可以将页面加载时间减少70-300%，具体取决于测试位置。

    在本文中，我们将深入探讨Cloudflare APO的工作原理以及如何使用它来提高WordPress网站的性能！

    1. 什么是自动平台优化 (APO)？
    2. 边缘的静态HTML
    3. 2022年Web性能状况
    4. Cloudflare的自动平台优化如何工作
    5. 使用高性能托管和Cloudflare APO最大限度地提高WordPress性能
    6. 如何为WordPress使用Cloudflare自动平台优化
    7. 如何确认适用于WordPress的Cloudflare APO是否正常工作
    8. 不使用Cloudflare插件的自动平台优化

    什么是自动平台优化 (APO)？

    Automatic Platform Optimization（以下简称APO）是Cloudflare提供的一套新的一键式平台定制优化服务。

    第一个接受“APO待遇”的平台是WordPress，它是全球最受欢迎的CMS，市场份额超过60%。未来，我们希望看到类似的APO服务适用于其他CMS和平台。

    在较高的层面上，Cloudflare的WordPress APO通过两种主要方式提高了网站性能。

    1. WordPress站点页面的静态HTML副本缓存在全球各地的Cloudflare边缘服务器中。
    2. 第三方字体由Cloudflare缓存和提供。

    让我们深入了解一下APO在技术层面上的工作方式和原因。

    边缘的静态HTML

    Cloudflare的APO与其他传统页面缓存和CDN解决方案之间的关键区别在于它能够在Cloudflare的边缘直接缓存静态HTML。为了描绘更清晰的画面，让我们通过从“无优化”到APO的四种不同的WordPress设置。

    WordPress设置 #1 – 无页面缓存或CDN

    默认情况下，WordPress不提供页面缓存或CDN支持。使用此配置，即使请求之间没有更改页面内容，所有请求也需要由PHP动态生成。

    此外，没有内容交付网络 (CDN) 集成意味着所有静态资产（如CSS、JS、图像和字体）都由源服务器提供服务。

    这种配置会使WordPress站点变得非常慢，尤其是对于远离源服务器的访问者而言。

    WordPress设置 #2 – 没有CDN的页面缓存

    实施页面缓存是提高WordPress性能的最佳策略之一。在一些WordPress托管服务器，托管堆栈包括一个高度调整的页面缓存层，由Nginx的FastCGI缓存模块提供支持。

    页面缓存极大地减少了源服务器上的CPU负载，因为可以从缓存中提供请求，而无需生成动态HTML。

    没有CDN的页面缓存

    这可以释放您的CPU以专注于其他重要的动态任务，并使您的WordPress网站更加稳定。虽然此配置可能允许您的站点每秒处理更多请求，但它并不能解决“距离问题”。

    如果没有合适的CDN，向遥远的访问者提供静态资产仍然是一个问题。

    WordPress设置 #3 – 使用CDN进行页面缓存

    到目前为止，添加用于提供静态资产的CDN的页面缓存是托管WordPress网站的最高效方式。

    在这个模型中，源服务器仍然负责为页面提供实际的HTML。但是，CSS文件、图像和字体等静态资产被卸载到世界各地的各种CDN存在点 (PoP)。该模型背后的想法是静态资产，尤其是大图像，构成请求页面大小的大部分. 因此，通过将资产卸载到更靠近访问者的服务器，可以减少加载时间并提高性能。

    使用CDN的全球流量路由

    使用CDN的全球流量路由

    虽然此配置比前两个配置提供了显着改进，但它确实让您想知道如果WordPress性能不再因必须从源服务器提供HTML而成为瓶颈，会发生什么。

    令人惊讶的是，在为WordPress引入Cloudflare的APO之前，这样的设置是不可行的——至少对于非技术用户来说是不可行的。

    WordPress设置 #4 – 适用于WordPress的Cloudflare APO

    Cloudflare APO是世界上最新的WordPress性能优化解决方案。与之前受源站服务器性能限制的WordPress设置不同，启用APO的站点从访问者的角度来看基本上变得“无源”。

    使用Cloudflare APO进行全球流量路由

    使用Cloudflare APO进行全球流量路由

    为此，Cloudflare利用其全球分布的CDN以及Workers/Workers KV来创建您的WordPress站点的静态HTML表示。我们将在本文后面深入了解Cloudflare APO的工作原理。

    现在，只要知道启用了APO的兼容WordPress站点不再受制于来源引起的延迟。换句话说，来自美国、德国和日本的访问者的请求将由附近的数据中心而不是您的源服务器提供服务。

    2022年Web性能状况

    在过去的几年里，专业的Web开发行业发生了很大的变化。越来越多的开发人员正在从WordPress这样的单体架构转向更灵活和高性能的静态站点生成器，比如Hugo和JavaScript框架，比如Gatsby。

    我们明智地使用“性能”一词，因为Web性能通常可以被解释为一个主观指标。

    例如，页面的加载时间可能会根据测试位置和一天中的时间而波动。

    因此，一味地说Gatsby静态网站比WordPress网站快是没有任何意义的，直到建立了一些论证的上下文。

    在当今高度连接的世界中，Web性能测试最重要的环境之一是世界不同地区的加载时间。

    这就是静态网站在性能方面优于WordPress的地方。默认情况下，静态站点可以直接上传到全球分布的CDN——这使得它们在全球范围内快速传播，无需任何额外工作。

    由于WordPress站点需要某种类型的源服务器来生成HTML，因此它无法直接利用Netlify、Vercel和Cloudflare自己的Workers Sites等平台进行无摩擦的全球交付。从业务角度来看，这意味着您可能会失去远离原始服务器的潜在访问者和客户，因为Google在生成搜索结果时会考虑页面速度。

    这就是Cloudflare的WordPress APO发挥作用的地方。

    启用Cloudflare APO将WordPress性能提高了300%

    启用Cloudflare APO将WordPress性能提高了300%

    Cloudflare的WordPress自动平台优化是对2022年WordPress性能意味着什么的彻底重新思考。正如我们之前提到的，在我们的测试站点上启用APO可将加载时间从70%减少到300%，具体取决于测试位置。这是可能的，因为APO有效地消除了作为性能瓶颈的源服务器。

    Cloudflare的自动平台优化如何工作

    使用Cloudflare APO，您的WordPress站点的HTML缓存在Cloudflare的全球边缘服务器中。这可以通过Workers KV实现，这是一种分布式键值数据库服务，具有超快的全局传播（不到60秒）。

    当数据通过Cloudflare API写入Workers KV时，它会在几秒钟内自动复制到全球150多个Cloudflare数据中心。

    这使得Workers KV成为加速WordPress网站的主要候选者，因为文章和页面可以很容易地用键值机制表示——URL是“键”，HTML页面内容是“值”。

    在Cloudflare Workers KV中存储为键值对象的网页

    在Cloudflare Workers KV中存储为键值对象的网页

    为您的WordPress站点启用APO后，对您站点的大多数请求将不再访问您的源服务器。

    相反，请求将从本地Cloudflare CDN缓存（如果缓存页面存在）或Workers KV（如果缓存页面在Cloudflare的CDN上不存在）提供。

    如果CDN缓存或Workers KV数据库中不存在页面，则Cloudflare将向您的源服务器发出单个请求并缓存新页面的HTML。

    这里的神奇之处在于Cloudflare Workers KV充当您的源服务器的某种分布式镜像。回想一下，存储在Workers KV中的数据会在Cloudflare的整个服务器网络中自动复制。

    这意味着即使您运行WordPress的源服务器位于美国某处，来自日本的访问者的请求也不需要访问您的源服务器来启动本地CDN缓存区域。

    相反，来自日本的访问者将获得来自附近Cloudflare数据中心的Workers KV数据库或CDN缓存的缓存HTML。

    这种新的交付模型与以前为WordPress缓存HTML页面的尝试大不相同。 

    以前，最流行的“整页缓存”方法涉及创建Cloudflare页面规则来“缓存所有内容”。虽然这种方法可以显着提高性能，但它并不是一种非常有效的缓存方法，因为它依赖于“拉”模型而不是Workers KV的“推”模型，后者会自动在全球范围内推送HTML。

    通过上一页基于规则的设置，访问美国Cloudflare缓存区的访问者不会为其他位置的访问者缓存资产——这意味着从全球内容交付的角度来看，网站无法有效利用Cloudflare的网络。

    自动平台优化通过缓存第三方字体更进一步。在许多情况下，字体最终会占据页面请求大小的很大一部分。

    与通常从根域提供的CSS、JS和图像不同，字体通常来自第三方服务，如Google Fonts。这意味着Cloudflare等基于代理的缓存服务无法缓存字体和提供字体。

    由于APO由Cloudflare Worker（位于源服务器和访问者之间的可编程JavaScript服务工作者）提供支持，因此可以注入额外的逻辑来完成基本缓存之外的任务。

    在这种情况下，APO使用Cloudflare Worker来缓存第三方字体并使用内联CSS修改页面的HTML，以指向Cloudflare CDN上的缓存字体。这消除了获取字体的额外外部请求的需要，并减少了服务页面所需的连接数量和加载时间。

    最后，由于APO通过WordPress插件与您的站点集成，因此每当您更新站点上的页面时，都会自动清除Cloudflare缓存。这可确保访问者始终能够看到您网站的最新版本，而无需任何人工干预。

    使用高性能托管和Cloudflare APO最大限度地提高WordPress性能

    然而，Cloudflare APO并不是灵丹妙药。选择以性能为中心的WordPress主机仍然非常重要，主要有两个原因。

    1. Cloudflare APO仅缓存未登录用户的前端页面。与服务器级页面缓存配置类似，APO不会缓存具有特定cookie和已登录用户的页面。这意味着原始服务器性能仍然是等式的关键部分。
    2. 出色的WordPress体验不仅仅包括快速的前端性能。由于WordPress本质上是一个动态CMS，因此在运营WordPress网站时需要考虑许多因素。

    这里有四个用例展示了为什么即使您使用Cloudflare APO仍应选择高性能WordPress主机。

    1. WooCommerce, Easy Digital Downloads和电子商务

    当检测到某些与电子商务相关的cookie时，Cloudflare APO会选择性地绕过缓存。例如，当访问者在WooCommerce网站上将商品添加到购物车时，WordPress会自动设置woocommerce_items_in_cart cookie。当检测到此cookie时，APO会绕过缓存以避免缓存和提供客户特定的数据。因此，即使启用了自动平台优化，WooCommerce和其他基于WordPress的电子商务平台仍将严重依赖原始服务器的性能。

    2. WordPress仪表盘性能

    由于Cloudflare APO不会为登录用户缓存HTML，因此在WordPress仪表盘中导航将始终完全依赖于您的源服务器性能。如果您没有使用性能优化的主机，那么在您的WordPress网站上编写和发布内容、管理图像和其他媒体资产以及运行维护例程等任务可能会变成非常缓慢的体验。这会对您的业务成果产生直接的负面影响。

    3. WordPress会员网站和论坛

    如果您使用Ultimate Membership Pro之类的插件来管理您的WordPress会员网站，或者使用bbPress来支持WordPress论坛，Cloudflare APO将无法优化您的大部分流量。由于会员网站和论坛通常需要用户登录，Cloudflare APO将自动绕过这些用户的HTML缓存。因此，使用高性能主机仍然是WordPress会员网站和论坛保持快速用户体验的最佳方式。

    4. WordPress Cron作业

    WordPress cron (WP-Cron)可帮助您在WordPress网站上安排和自动化后端任务。您的站点可能会使用cron作业在特定时间发布文章。像这样的简单任务在CPU资源方面不需要太多，但其他任务可能会占用更多资源。例如，使用备份插件每12小时自动将您的WordPress站点备份到ZIP存档之类的任务会占用更多CPU。

    由于Cloudflare APO仅有助于优化前端内容，因此您仍需要将站点托管在高性能主机上，以最大限度地提高后端任务的性能和登录用户体验。

    如何为WordPress使用Cloudflare自动平台优化

    既然我们已经讨论了为什么Cloudflare WordPress自动平台优化会改变游戏规则，那么让我们来看看如何将服务添加到您的WordPress网站。

    APO适用于Cloudflare免费和付费计划。对于免费的Cloudflare用户，需要额外支付5美元/月的APO费用。如果您在Cloudflare上使用Pro、Business或Enterprise计划，则可以免费启用APO。

    以下是开始使用Cloudflare APO所需的操作：

    1. 在Cloudflare仪表盘中创建API令牌。
    2. 安装官方Cloudflare WordPress插件。
    3. 启用自动平台优化。

    1. 创建Cloudflare API令牌

    在启用APO之前，您需要先生成API令牌并安装Cloudflare WordPress插件。要生成API令牌，请单击Cloudflare仪表盘右上角的个人资料图标，单击“My Profile”，选择“API Tokens”选项卡，然后单击Create Token。

    创建Cloudflare API令牌

    创建Cloudflare API令牌

    在“API Token Templates”下，单击WordPress选项旁边的Use Template。

    选择WordPress API令牌模板

    选择WordPress API令牌模板

    “WordPress”模板将生成一个具有必要权限的API令牌，以允许自动平台优化正常运行。默认设置是您开始使用APO所需的全部，但如果您需要将API令牌锁定到特定用户或区域，请随意调整“Account Resources”和“Zone Resources”设置。

    完成令牌参数配置后，向下滚动并单击Continue to Summary。

    配置Cloudflare API令牌参数

    配置Cloudflare API令牌参数

    最后，单击Create Token以完成该过程。

    确认Cloudflare API令牌的创建

    确认Cloudflare API令牌的创建

    请务必将API令牌复制到安全位置。稍后安装Cloudflare WordPress插件时将需要它。将API令牌记录在密码管理器等安全位置后，请随时关闭页面。

    在安全的地方记录您的Cloudflare API令牌

    在安全的地方记录您的Cloudflare API令牌

    2. 安装Cloudflare WordPress插件

    Cloudflare WordPress插件可以直接从WordPress插件库安装。要找到它，请在WordPress仪表盘中搜索“Cloudflare”。请务必安装官方Cloudflare插件，而不是“WP Cloudflare Super Page Cache”，这是第一个搜索结果。

     

    安装官方Cloudflare WordPress插件

    安装官方Cloudflare WordPress插件

    接下来，转到WordPress仪表盘侧边栏中的设置 > Cloudflare，然后单击“Sign in Here”。

    登录您的Cloudflare帐户

    登录您的Cloudflare帐户

    输入与您的Cloudflare帐户关联的电子邮件地址以及您之前生成的API令牌。单击Save API Credentials以完成登录过程。

    输入您的电子邮件地址和Cloudflare API令牌

    输入您的电子邮件地址和Cloudflare API令牌

    现在Cloudflare WordPress插件已全部设置完毕，让我们前往Cloudflare仪表盘以启用自动平台优化。

    3. 在Cloudflare中启用自动平台优化

    Cloudflare Pro、Business和Enterprise计划中包含WordPress的自动平台优化，无需额外费用。如果您使用免费的Cloudflare计划，则APO附加组件每月5美元。要启用APO，请转到Cloudflare仪表盘中的Speed > Optimization。

    启用APO

    要启用APO，请导航到Speed > Optimization

    向下滚动到“Optimized Delivery”部分，并启用“Automatic Platform Optimization for WordPress”。如果您使用的是免费计划，Cloudflare将在此期间提示您提供账单详细信息。启用APO后，您应该会看到一条消息“WordPress plugin successfully detected on [your domain]”。如果您没有看到此消息，我们建议您重新安装Cloudflare插件或联系Cloudflare支持以获得进一步帮助。

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

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

    在您的WordPress仪表盘中，转到侧栏中的设置 > Cloudflare。单击“Apply Recommended Cloudflare Settings for WordPress”旁边的Apply按钮——这将优化您的WordPress的Cloudflare设置。最后，确保在插件设置中也启用了“Automatic Platform Optimization”。

    Cloudflare WordPress插件设置

    Cloudflare WordPress插件设置

    如何确认适用于WordPress的Cloudflare APO是否正常工作

    此时，Cloudflare自动平台优化应该在您的站点上处于活动状态！以下是确认APO是否正常工作的方法。首先，确保为您的WordPress站点的域启用了Cloudflare的DNS选项卡中的橙色云。如果未启用橙色云，Cloudflare将不会为您的域代理流量——这意味着APO将无法正常工作。

    确认Cloudflare橙色云已启用

    确认Cloudflare橙色云已启用

    如何使用浏览器检查器检查Cloudflare APO缓存状态

    接下来，您可以使用Web浏览器的内置检查器检查对您网站的请求的HTTP标头。我们将在下面的示例中使用Google Chrome。首先，在隐身模式下启动一个新的浏览器窗口。

    在Google Chrome中启动一个新的隐身窗口

    在Google Chrome中启动一个新的隐身窗口

    接下来，转到您的WordPress站点，右键单击该页面，然后选择“Inspect”以打开浏览器检查器。您还可以通过转到Chrome更多按钮菜单栏中的更多工具 > 开发者工具来访问检查器。单击对您的域的请求（下例中的brianwp.com）。在子菜单中，单击“Headers”以显示HTTP响应标头。

    使用浏览器检查器检查Cloudflare缓存状态

    使用浏览器检查器检查Cloudflare缓存状态

    启用APO后，您应该会看到一些与APO相关的标头。

    • cf-apo-via指示从何处提供请求。此标头有几个可能的值——“origin, no-cache”、“origin, bypass”和“cache”。如果您看到此标头的“origin, no-cache”值，则表示源服务器已向Cloudflare发送了“Cache-Control: no-cache”标头。“origin, bypass” 值表示Cloudflare的HTML缓存被绕过，请求是从源端提供的。最后，“cache”值表示请求是从Cloudflare的缓存中提供的。
    • cf-cache-status指示页面是否从Cloudflare的CDN提供。刷新页面几次后，您应该会看到“HIT”状态。如果您的cf-cache-status标头在几次刷新后显示“DYNAMIC”，则可能是由于配置错误或与cookie相关的不兼容而绕过了APO。
    • cf-edge-cache根据来自您的原始服务器的缓存指令指示页面的缓存兼容性。此标头有两个可能的值——“no-cache”和“cache, platform=wordpress”。当使用Cloudflare WordPress插件正确配置APO时，此标头将为不应缓存的页面返回“no-cache”，为可缓存的页面返回“cache, platform=wordpress”。
    • age表示页面在Cloudflare的CDN中缓存的秒数。

    如果您在检查WordPress站点时看到上面的标头，则表示APO已全部设置。现在，继续进行速度测试，看看您的网站有多快！

    如何使用curl检查Cloudflare APO缓存状态

    您还可以在终端中使用下面的curl命令确认Cloudflare APO是否正常工作。请注意，该命令传递了一个“Accept: text/html”标头。这是检查APO缓存状态时所必需的。

    curl --request GET -I -H "Accept: text/html" https://www.website.com

    运行命令后，您应该会看到如下所示的响应标头列表。如您所见，cf-cache-status、cf-apo-via、cf-edge-cache和age标头显示请求由Cloudflare的缓存提供服务。

    使用curl检查Cloudflare APO缓存状态

    使用curl检查Cloudflare APO缓存状态

    不使用Cloudflare插件的APO自动平台优化

    Cloudflare建议将自动平台优化与官方Cloudflare WordPress插件一起使用。这也是我们建议的方法，因为它可以确保您从APO中获得最大的性能优势。如果您的网站与Cloudflare WordPress插件不兼容，我们建议您与开发人员合作以使您的网站兼容。

    如果您真的无法安装Cloudflare插件，则可以在没有插件的情况下使用APO。如果您选择这条路线，您仍然可以利用一些性能优化，但有几个重要的限制需要注意。

    带有WordPress插件的Cloudflare APO

    安装Cloudflare WordPress插件后，自动平台优化提供以下HTML边缘缓存功能。

    • 具有30天TTL的HTML边缘缓存。
    • 文章发布或更新后30秒内缓存失效。
    • 为登录用户绕过HTML缓存。
    • 绕过某些cookie（如WooCommerce）的HTML缓存。
    • 如果可以从Cloudflare的CDN提供页面，则跳过对源服务器的请求。这减少了源服务器上的负载。

    没有WordPress插件的Cloudflare APO

    如果未安装Cloudflare WordPress插件，您可能会看到以下APO HTML边缘缓存功能。

    • 具有30天TTL的HTML边缘缓存。
    • 缓存在30分钟内失效（而不是30秒）。
    • 绕过某些cookie（如WooCommerce）的HTML缓存。
    • 为了提供正确的缓存失效逻辑，仍然需要向源服务器发出请求。

    如您所见，将自动平台优化与官方Cloudflare WordPress插件一起使用有几个优点。

    小结

    WordPress的Cloudflare自动平台优化无疑是近期历史上提升WordPress性能的最重要服务。它超越了通常的Web服务器优化、服务器端页面缓存和CSS/JS缩小策略，并呈现了一些全新的东西。

    自成立以来，WordPress一直受到以下事实的限制：在CDN上缓存HTML页面没有一种简化且简单的方法。通过利用其由150多个数据中心、Workers和Workers KV组成的网络，Cloudflare在WordPress站点和采用尖端框架设计的静态站点之间拉平了性能竞争环境。

    这是一项不小的壮举，我们期待看到Cloudflare在未来如何将其自动平台优化功能扩展到其他CMS平台。

  • 提高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）

    我建议您开始使用以下网站速度测试工具之一：WebPagetest、Pingdom、Google PageSpeed Insights或GTMetrix。

    您还可以使用免费的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 Login和Rename 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提供的免费主题，而Shoptimizer、Divi和WoondrShop是高级主题。由于这些主题是为运行电子商务网站而构建的，因此无需安装第三方插件即可获得所需的所有功能。

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

    我建议留下页面构建器以减少臃肿。相反，选择支持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、SVG、WebP）。
    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 Coupons和Follow-Ups）容易受到此问题的影响。

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

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

    GTMetrix的瀑布图

    GTMetrix的瀑布图

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

    使用Google Chrome DevTools中的网络标签

    使用Google Chrome DevTools中的网络标签

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

    您可以使用wp_dequeue_script和wp_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-Sweep或WP 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 Fragments或Disable 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调用，以及它们的大小和加载时间。寻找具有最多请求和最慢加载时间的请求。

    在下面的测试站点上，经典编辑器插件在管理端加载最慢。其他插件，如Loginizer、All-in-One WP Migration和WP 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 Level和Bypass选项。
    4. 您还可以添加额外的设置，例如Disable Performance和Disable 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网站的一项有用功能。如果您使用的是ShortPixel或Imagify等图像优化插件，Polish可以显着降低服务器的CPU使用率——这可以为访问者带来更稳定的浏览体验。由于Polish的图像是在服务器外存储和缓存的，因此您不必担心用尽磁盘空间来存储图像的WEBP版本。

    Auto Minify

    Cloudflare的Auto Minify功能会自动缩小缓存的CSS、JSS和HTML资产。如果您不使用Autoptimize或WP-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 headers或cache-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

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

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

    我们在上面向您展示的方法将让您控制WordPress站点服务器上所有文件的过期标头。但是，这些方法不允许您控制您可能正在加载的第三方脚本的过期标头，例如Google Fonts、Google 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中添加过期标头。您可能对下列文章也会感兴趣：