教学

许多优化文章都关注如何加快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 如果您不知道外部服务的用途，您可以随时尝试浏览主域或在Google中搜索其名称，因为应该会出现相关的开发人员或公司。这是确定服务是否合法的好方法。正如您在下面看到的，搜索jQuery文件会导致一些知名公司（如jQuery和Google）描述托管此文件。所以你可能是安全的。 jQuery外部脚本 分析持续的第三方性能问题 如果您的网站总是很慢，那么您需要弄清楚是什么让它变慢了。如果您的网站有间歇性问题，那就有点困难了。让我们从持续缓慢开始。我们在这里假设您的网站由于外部服务而运行缓慢。虽然许多速度问题可能是由外部服务引起的，但还有大量其他问题，因此这可能无法解决您的问题。 首先，您需要确定是否有任何服务需要很长时间才能加载，以及它如何影响您网站的性能。所以我们建立了一个测试站点，其中包含以下内容： 2个AdSense广告 脸书点赞框 Instagram小工具 Disqus评论 Facebook转化跟踪像素 谷歌分析 WordPress测试站点 这将使我们能够一项一项地删除每项服务，并向您展示它们对您的整体网站负载的影响程度。我们还将分享一些加载它们的替代方法的策略。然后，您可以将相同的策略应用于您自己的WordPress网站。我们通过Pingdom运行测试站点，您可以看到的第一件事是“按域的内容大小”和“按域的请求”。如果您看到请求，而不是来自您的域名，则这些请求很可能是外部服务或外部资产。这是一个很好的起点。正如您在下面看到的，static.xx.fbcdn.net有37个请求，这不好！ Pingdom外部服务——（速度测试） 站点加载时间也是1.94秒，这真的很糟糕，因为正如您在上面看到的，测试站点上没有任何内容。这是一个较小规模的测试，可帮助您更好地分析第三方性能。WordPress网站越大，问题就越大。但从根本上说，大多数问题都可以通过类似的方式解决。 处理Google AdSense 我们首先要解决的是Google Adsense。通常，当您运行速度测试时，您可以将鼠标悬停在每个条上，以查看加载过程的每个部分花费了多长时间。您应该寻找超长的条（与其他条相比）以及仅在特定条完成后才开始加载条的地方——这些是您的瓶颈。一旦您发现某个特定元素的加载时间过长或阻止其他资源加载，您就需要弄清楚它为何存在以及它来自何处。 这可能有点困难，对服务的调用可以在您的主题中编码，也可以来自插件。但是，正如我们之前提到的，还有绝对数量的问题。如果我们查看下面来自pagead2.googlesyndication.com和tpc.googlesyndication.com的请求，我们可以看到这些条相当短，这意味着它们不会造成那么大的延迟。不过，其中一些确实有更长的接收时间（绿色条），这是Web浏览器从服务器接收数据所需的时间。最大的问题是一旦将所有请求加在一起。 我们喜欢将Google […]

您是否刚刚通过速度测试工具运行您的WordPress网站，却被告知您需要“Add Expires headers”到您的WordPress网站？ 缓存过期标头是让Web浏览器知道是从访问者的浏览器缓存还是从您的服务器加载网页资源（如图像）的规则。这些可以帮助提高您网站的性能。除此之外，它们也是YSlow性能建议的一部分，这意味着它们会影响您在GTmetrix等工具中的性能“分数” 。 在这篇文章中，我们将解释什么是过期标头以及它们如何影响您的网站。然后，我们将向您展示如何使用几种不同的方法在WordPress中添加过期标头。 但首先，我们需要快速绕道讨论另一个主题——浏览器缓存。 什么是浏览器缓存？ 什么是过期标头？ 如何修复WordPress中的“添加过期标头” 如何测试Expires标头是否正常工作 如何为外部脚本添加过期标头 什么是浏览器缓存？ 在讨论过期标头之前，我们首先需要向您介绍浏览器缓存的概念。这很重要，因为过期标头可以帮助您控制和实现浏览器缓存——因此，如果您不了解浏览器缓存，就无法理解过期标头。 简而言之，浏览器缓存让您的网站告诉访问者的浏览器将某些文件保存在访问者的本地计算机上并加载这些本地文件以供后续访问，而不是在每次页面加载时从您的服务器下载它们。 通过消除每次下载文件的需要，您可以加快站点的加载时间并减少带宽使用。 让我们看一个示例——您网站的徽标图像。您的徽标在每个页面上都是相同的，因此强制访问者的浏览器在每次页面加载时重新下载相同的徽标文件是没有意义的。通过浏览器缓存，您可以将该徽标文件存储在访问者的本地计算机上。访问者在第一次访问时仍需要下载您的徽标图像。但是对于后续的页面查看，该文件将从其本地浏览器缓存中加载。 什么是过期标头？ 过期标头让您告诉访问者的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文件相同的文件夹）。 这是您需要做的： 在您首选的FTP客户端中使用FTP连接到您的服务器 在根文件夹中找到.htaccess文件 将 .htaccess 文件的备份副本下载到本地计算机。这样，如果出现任何问题，您可以重新上传备份副本以解决任何潜在问题。 在文件顶部附近添加下面的代码片段 ## […]

在之前的教程中，我们向您展示了如何将媒体迁移到Amazon S3。今天，我们将向您介绍如何将WordPress网站上的媒体卸载到Google Cloud Storage，以及选择直接从Google Cloud Storage或CDN提供媒体服务的几个选项。 谷歌云存储只是谷歌云平台众多产品和服务的一小部分。由于Google拥有庞大的基础架构以及他们处理批量存储的事实，他们能够提供非常低的存储成本。远低于WordPress主机。 通常，像这样的云存储用于需要使用我们的外部备份插件等解决方案进行额外备份或正在提供大文件（图像、照片、下载、软件、视频、游戏）的站点。他们的一些客户包括Spotify、Vimeo、可口可乐、飞利浦、Evernote和摩托罗拉。 谷歌云存储与谷歌云CDN 谷歌云存储定价 WP-Stateless的WordPress谷歌云存储设置 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 […]

弄清楚WordPress速度慢的原因可能具有挑战性。WordPress网站涉及许多部分，从其Web服务器和相关设置到各种主题和插件。这也可能是由于未优化的内容，例如图像、视频和嵌入。 但是你怎么能找出导致性能问题的原因呢？很难马上说问题出在哪里——有多种可能性，我们将在这篇文章中探讨它们。 我们不会仅仅停留在找出您的WordPress网站运行缓慢的原因。您还将学习许多加快慢速WordPress网站的方法。 为什么WordPress慢？ 确定WordPress网站是否运行缓慢的4个步骤 改善WordPress网站速度的17种方法 为什么WordPress慢？ 一些Web开发人员完全忽略了WordPress，理由是它有多慢。虽然以前可能是这种情况，但现在已经有一段时间了，这并不是一个准确的说法。如今，许多大品牌都使用WordPress来托管他们的网站。 但是，许多因素会影响您的WordPress网站的性能。一些最常见的包括： 您网站的网络托管服务提供商 服务器端优化（PHP版本、缓存、压缩等） 缓慢的WordPress主题 缓慢的WordPress插件 未优化的内容（主要是图片） 外部HTTP请求过多 不使用专用资源来提供内容（CDN、视频托管等） 典型WordPress网站的各种元素 除了由您的网络托管服务提供商实施的适当的服务器优化之外，您还可以进行许多优化以确保您的网站超快。我们将在本文后面讨论这些，但首先，让我们弄清楚是什么让您的网站变慢。 确定WordPress网站是否运行缓慢的4个步骤 第 1 步：运行页面加载速度测试 第 2 步：对网站进行负载测试 第 3 步：查看您的WordPress主题和插件 第 4 步：使用应用程序性能监控 (APM) 工具 在您的网站上运行测试是确定是什么导致您的网站变慢的好方法 – 无论是您的网络托管服务提供商、网站本身，还是两者兼而有之？让我们来看看您可以运行的一些网站测试。 第 1 步：运行页面加载速度测试 您的网站加载速度有多快？任何加载时间超过两秒的网页都不利于用户体验。理想情况下，您的目标应该是加载时间低于1秒——介于两者之间的任何时间都可以，但您应该始终考虑进一步优化它。 您可以为此目的使用不同的网站速度测试工具 ——GTmetrix、Pingdom Tools、Google PageSpeed Insights和WebPageTest都是不错的选择。 我将使用GTmetrix和Pingdom工具 来演示此步骤。 首先，让我们启动GTmetrix并测试一个网页。选择离您（或您网站的访问者）最近的服务器位置以获得更好的结果（提示： 注册一个免费的GTmetrix帐户以获得更多服务器位置选项）。 GTmetrix主页 在这里，我们正在测试WordPress网站的主页，因为这是大多数用户会访问的地方。此外，主页包含大量内容，因此非常适合测试。 测试完成后，您将看到如下GTmetrix性能报告。 GTmetrix报告示例 GTmetrix根据许多指标对网页进行评分。它还提供了测试期间页面加载方式的可视化时间线。要详细了解它，您必须向下滚动。 GTmetrix报告的“Summary”选项卡 Summary选项卡突出显示了影响您网站性能的所有主要问题。在这种情况下，最重要的问题是服务器的响应时间。这几乎总是意味着考虑升级您的托管计划或迁移到更好的主机。但是，在你得出这个结论之前，最好先解决所有其他问题并重新审视这一点。 […]

WordPress Autosave是我最喜欢的功能之一，它让我们在编辑我们许多网站上的文章或页面时高枕无忧。 如果您使用过其他没有自动保存功能的CMS，您可能会经历过那个可怕的时刻，当您按下“保存”时，您的登录超时，您将失去一切。 WordPress自动保存可以防止这样的悲惨故事，这种故事一次又一次地发生在很多人身上。 默认情况下，WP会在您更新内容后每60秒自动保存您的文章、页面或自定义文章类型。 这可以非常方便地保留未保存内容的副本，否则您可能由于不同的原因而丢失，例如过期的cookie、浏览器崩溃、互联网连接丢失、无意导航、WP核心或插件错误/崩溃等。 除了自动将内容保存到数据库之外，从最近的WP版本开始，该功能现在还利用浏览器的本地存储功能来防止在您意外快速离线（例如突然断电）时丢失您的内容。 虽然WordPress自动保存功能可以成为那些经常在WP管理员中编辑内容的人的救命稻草，但由用户决定是否需要启用该功能。好消息是您可以根据自己的喜好禁用该功能或​​自定义保存间隔。在我们设计的网络博客上，我们倾向于保持原样或缩短一点。 在这篇文章中，让我们详细了解一下自动保存功能。 什么是WordPress自动保存 当您撰写或编辑内容时，您对文章所做的更改将每60秒自动保存一次。 当文章更新或自动保存时，它将在您的文章编辑器的右下角被视为通知。 请参阅下面的屏幕截图。 自动保存后，如果您的文章被更新，下一次保存将覆盖旧的。这意味着您的表格每60秒不会增长超过一次。每个文章只存储一个（最新的）自动保存。 这与您按下更新按钮时完全不同，每次都会创建一个新的WordPress文章“修订”。 现在您可能已经注意到这一点 – 当您尝试关闭浏览器选项卡而不保存您的文章时，您会看到一个警告弹出，通知您文章未保存。 使用自动保存的好处是，即使您在未保存的情况下离开选项卡，下次登录时您在文章编辑器中看到的第一件事就是文章的自动保存版本。 最好的是，这些自动保存不会覆盖您发布的文章或保存的修订。因此，您可以在下次登录时轻松开始编辑自动保存的文章。 在浏览器上临时保存WordPress文章 除了将您的内容保存在数据库中之外，如果您离线，WP现在还利用浏览器的本地存储功能。当您在线返回时，它会通知您是否发现任何差异。 此功能使您能够准确地从离开的位置继续书写。 自动保存使WordPress成为更好的内容编辑工具 虽然WP无疑是目前最好的CMS，但它仍然缺乏MS Word和Google文档的许多内容编写、内容编辑和协作功能。 由于这个事实，仍然有许多博主更喜欢离线创建文章或使用Google文档进行协作编辑。此类用户仅在文章完成编写后才使用WP管理员。 这为网站的编辑和作者创造了更多的工作 – 将内容从文档迁移到您的后端需要大量时间，因为大部分格式都会在此过程中丢失。 但是，这种增强的WordPress自动保存功能使该CMS向前迈进了一步，成为更可靠的内容编辑工具。 如果您仍在使用第三方应用程序进行内容创建和协作，除了此功能之外，以下是WordPress管理员可能是您最佳选择的几个原因。 WordPress文章修订 WordPress文章修订允许您比较已保存文章的不同版本。如果您需要查看文章的以前版本（也许如果您错误地进行了更改），这可以成为救命稻草。截至目前，没有其他离线文字处理器提供这一惊人的功能。 锁定文章编辑 自3.6版本以来，WordPress发布了一个名为post lock的新编辑控制功能。这允许文章作者锁定文章，直到完成编辑。对于多作者博客来说，这可能是一个有用的功能，其中作者协作为每篇文章做出贡献。 更好的语法检查器 尽管WordPress提供了大量的文章编辑器功能，但它仍然落后于MS Word等可靠的语法检查工具。如果这就是您仍然使用离线文字处理应用程序的原因，您需要做的就是安装Grammarly浏览器插件。 Grammarly是一款免费的在线语法检查器，在校对和语法检查方面比MS Word好得多。 毫无疑问，所有这些功能将使WordPress成为可靠的内容创建和编辑工具。 如何更改自动保存间隔 现在我们已经了解了WordPress自动保存功能的各种好处，让我们看看如何根据您的喜好更改保存间隔。 例如，如果您使用慢速互联网连接来写博客，您可能需要增加自动保存间隔，以确保您的浏览器不会在WordPress每分钟强制保存时频繁挂起。 或者，如果您想尽量减少因操作系统崩溃或断电而丢失内容的可能性，您可能需要缩短时间间隔，以便更频繁地保存内容。 更改WordPress自动保存设置只需进行一些调整。 如果您想更改自动保存间隔，只需找到您网站的wp-config.php文件，在其上插入以下代码片段并保存即可。 define(‘AUTOSAVE_INTERVAL’, 120 ); 上面的代码将自动保存间隔更改为120秒。在保存之前，请根据您的喜好随意编辑上述代码中的数字（以秒为单位）。 请务必在wp-config.php文件中的以下代码行之前添加上述代码片段，否则设置将不起作用。 require_once(ABSPATH […]

使用商业主题时，WordPress网站看起来很漂亮。这些高级主题使用缩略图和好看的字体来制作吸引人的外观。然而，酷炫的外观伴随着您作为网站所有者需要承担的一定成本。在本文中，让我们探讨字体问题以及如何在WordPress站点中禁用Google字体。 在WordPress中使用字体 以下是在WordPress中使用字体的流行方式，您可以随时切换使用字体的方式。 使用第三方字体，如Google Fonts 在您的服务器上托管自定义字体 使用系统字体 无论您使用什么方式；您需要以下三件事才能使用任何字体系列： 具有不同扩展名的字体文件，如woff、eot、ttf或svg。虽然主要使用一个文件，但其余文件用于后备和兼容性目的。或者，您可以使用CSS字体文件，尤其是从Google字体网站加载时。 将字体从文件导入到您的站点。CSS字体导入在早期很流行，现在在标题部分链接外部字体文件很常见。 在HTML元素中使用CSS规则来提及字体系列和其他属性。 这是一个使用外部文件链接的示例CSS，用于在标题部分使用具有常规400粗的Roboto系列。 <link href=”https://fonts.googleapis.com”> <link href=”https://fonts.gstatic.com” crossorigin> <link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap”> 以下是如何在HTML中使用带有H1标题的Roboto字体系列： h1 { font-family: ‘Roboto’, sans-serif; } 据说页面上的每个HTML元素都需要一个字体系列来呈现它在浏览器上的预期显示方式。 WordPress中的谷歌字体 通常为HTML body元素声明字体系列，以便整个页面使用相同的字体。然而，那些好看的主题需要对标题、块引用、预格式化、表格、按钮等元素使用不同的字体系列。为了避免设计多种字体或支付许可费用，许多WordPress主题和插件开发人员使用免费的第三方 -派对字体。谷歌字体的使用与谷歌的流行和CDN的能力一起提供了更接近您网站访问者的字体文件。 谷歌字体 10个商业WordPress主题中几乎有7个使用Google字体并提供自定义主题面板。您可以从1250多种可用字体系列中选择一种。由于有大量的字体可供免费使用，开发人员可以简单地将所需的Google字体文件与标题部分中的系列和重量详细信息联系起来。您可以通过查看您网站的源代码来查看您网站上的Google字体文件。 源代码中的Google字体CSS文件 您可以看到字体是从fonts.googleapis.com服务器加载的。Open Sans和Roboto是字体系列，400/600表示字体粗细。有时您可能还会看到字体是从诸如fonts.gstatic.com之类的Google域加载的。 使用多种和外部字体的问题 在WordPress中使用Google字体会产生以下问题： 任何第三方资源都会影响您网站的页面加载速度。示例包括Google字体、分析跟踪、Facebook像素等。 使用多个字体系列和字体粗细会增加 Google 服务器所需的外部文件数量。这将增加从您的站点发送的 HTTP 请求的数量，从而降低页面加载速度。 在从Google服务器下载所有字体文件之前，浏览器不会加载文本。这可能需要一些时间，在此期间用户将看到空白的空白页面。您将在Google PageSpeed Insights工具中看到警告，以确保在网络字体加载期间文本可见。 您可能需要使用预连接和DNS预取来连接到Google字体域，以加快网站的加载速度。 由于速度是Google搜索中的官方排名因素之一，因此您没有其他选择可以避免使用第三方Google字体。 如何在WordPress中禁用谷歌字体？ 现在很明显，您必须在WordPress中禁用Google字体以提高页面加载速度。但问题是当您的主题和插件使用Google字体时，如何在影响或不影响网站外观的情况下做到这一点。以下是可供您选择的选项。 完全禁用Google字体，以便您的网站使用浏览器的备用字体。 将swap参数添加到Google字体文件并继续使用它们。 通过添加自定义CSS或更改主题来使用系统字体。 我们将在以下部分探讨所有这些选项。 […]

如果您的WordPress网站严重依赖视觉内容，您可能需要为其添加懒加载功能。此WordPress功能有助于提高网站的页面速度和性能，使其对您的SEO工作至关重要。 根据HTTP Archive，网页平均体积为3719 kB，其中图像和视频占总体积的近78％。 这对于网站访问者的浏览器下载和渲染来说是很多字节，并且未来的趋势网页越来越大及使用更多的图像或者视频内容。 在共享媒体和将媒体文件整合到网站设计中时，WordPress正在引领潮流。 使用WordPress，可以轻松地将图像和视频集成到文章，页面甚至主题的背景中。 但是，过多的媒体资源使得网页加载变得非常缓慢，因为用户在查看网页之前必须等待下载大文件（包括最初未显示的文件）。 这是为什么我们要对WordPress做图片或者视频懒加载（延迟加载）的原因。 什么是懒加载以及它如何工作？ WordPress懒加载的优缺点 为什么要做图像懒加载？ 如何为您的WordPress添加懒加载 懒加载对SEO的影响 WordPress延迟加载技巧 什么是懒加载以及它如何工作？ 延迟加载（又称懒加载）是一种加载可见内容的优化技术，即延迟下载和呈现在首屏下方需要显示的内容。延迟加载不是一次加载所有图像，而是仅下载用户屏幕上可见的图像。它用占位符图像或空白区域替换所有其他图像。当用户向下滚动时，您的网站会加载在浏览器查看区域中可见的图像。 这也是谷歌极力推广的网页优化策略“缩减首屏内容的大小”，如果您的WordPress文章和页面包含大量嵌入式视频和高分辨率图像，这是一种应该考虑的技术。 延迟加载的工作方式如下： 浏览器在不下载图像和预加载视频下构建网页DOM而。 JavaScript用于确定要下载哪些图像以及根据页面加载时最初可见的内容预加载哪些视频。这些图像和视频会根据需要下载和预加载。 下载和呈现其他视频会延迟，直到网站访问者向下滚动页面并且其他内容进入视图。 最终结果是，在实际需要之前，不会下载图像和加载视频。这可以为包含大量高分辨率图像和嵌入视频的网站实现显着的性能提升。 延迟加载对您的WordPress网站非常有利。 它减少了初始网页加载时间，因此用户会更快地看到您的网站 它通过仅提供可查看的图像来节省带宽，并可节省托管成本 WordPress 5.5的发布添加了延迟加载作为默认功能。 但是，如果您想自定义图像延迟加载和背景图像延迟加载的方式，则需要使用WordPress插件。 注意：虽然延迟加载有助于提高网站加载速度，但在上传到WordPress之前，您应该始终针对网络优化图像以获得最佳性能。 WordPress懒加载的优缺点 如果您仍然想知道是否应该在WordPress中实现图像延迟加载，以下是该功能的优缺点： 优点： 减少带宽使用，降低托管成本。 提高网站速度，使访问者的浏览体验更好。 提升移动体验。 优化最大内容绘制分数 改进SEO工作，提高您网站的搜索排名。 缺点： 导致内容缓冲，影响加载速度。 减慢快速滚动。 为什么要做图像懒加载？ 延迟加载您的WordPress图片可以加快您的网站速度并提供更好的用户体验。 没有人喜欢慢速网站。事实上，一项性能研究发现，页面加载时间延迟一秒会导致转化次数减少7%，页面浏览量减少11%，客户满意度降低16%。 任何搜索引擎也不喜欢加载缓慢的网站。这就是速度越快的网站在搜索结果中排名越高的原因。 与其他网络元素相比，图像在您的网站上加载所需的时间最长。如果您在文章中添加大量图片，那么每张图片都会增加您的页面加载时间。 处理这种情况的一种方法是使用CDN服务，例如又拍云CDN。CDN将让用户从离他们最近的Web服务器下载图像并降低网站加载速度。 但是，您的图像仍将被加载并影响整体页面加载时间。为了解决这个问题，您可以通过在您的网站上实现延迟加载来延迟图像加载。 如何为您的WordPress添加懒加载 与许多其他网站性能问题一样，WordPress延迟加载也是可以通过插件来解决。 实际上，WordPress插件库有许多插件可用于懒加载图像和视频。 这样的插件林林总总，我们从中挑了五个可以显着提高网站性能的插件。 如果您已准备好实施懒加载，可以考虑这五个插件。 图像和视频真的会让网站变慢吗？ 首先，在将任何图像上传到WordPress之前，请确保已经执行了优化（关于图片体积优化，可以参考文章《如何做到Google […]

网站速度对其成功至关重要，因为47%的访问者可能会离开加载时间超过两秒的网站。 虽然有几个因素会影响您的网站性能，但图像需要特别注意。除了使用适应不同屏幕尺寸的图像外，您还应该提供缩放图像。 提供缩放图像涉及通过将图像重新调整为完美尺寸来优化图像——不要太小，也不要太大。使用正确缩放的图像将对网站速度和性能产生积极影响，从而改善您网站的SEO（搜索引擎优化）。 本文将解释如何在您的WordPress网站上提供缩放图像。我们还提供了插件推荐，以帮助您自动提供缩放图像。 什么是缩放图像？ 如何提供缩放图像？ 步骤 1-分析网站 步骤 2-使用检查工具找出最大显示尺寸 步骤 3-重新缩放图像 步骤 4-替换图像 5个提供缩放图像支持的插件 1. Smush 2. Optimole 3. EWWW Image Optimizer 4. ShortPixel 5. Perfect Images 什么是缩放图像？ 缩放图像是经过调整以适合网站所需的确切尺寸的图像。 如果您使用小图像填充较大的区域，则放大时会变得模糊。另一方面，如果你使用过大的图像，浏览器会缩小它们以适应给定的尺寸，但图像尺寸会保持不必要的大。 例如，如果您将500 x 500像素的图像用于50 x 50像素的缩略图，则浏览器必须先下载并缩小图片，然后才能将其显示给访问者。此过程效率低下，并且会减慢网站加载时间。 但是，如果您通过提供缩放图像来优化图像，则不会出现此问题。 如何提供缩放图像？ 现在是时候学习如何在您的WordPress网站上正确提供缩放图像了。有两种方法可以做到这一点——手动或使用插件。本节将向您展示如何手动缩放图像。 步骤 1-分析网站 如果您想在完全优化整个媒体库之前尝试使用少量图像，请尝试缩放在您网站的多个页面上重复出现的图像。例如，网站徽标或标题图像。 首先，您需要在网站上找到需要重新缩放的图像以及要使用的适当尺寸。为此，我们将使用GTMetrix。 1. 打开GTMetrix并输入您的WordPress网站URL。单击Test Your Site按钮。 2. 完成网站分析后，转到“Structure”选项卡并单击“Properly size images”部分。 3. 本部分将显示您网站中的哪些图像需要优化。Potential Savings列将显示提供缩放图像后的潜在节省。保存图像的URL以备后用。 步骤 […]

拥有一个快速加载的网站对于用户体验和SEO（搜索引擎优化）至关重要。具有优化速度的网站往往具有较低的跳出率，从而导致更高的参与度和转化率。谷歌也偏爱快速网站，并在搜索结果页面上排名更高。 从编码标准到托管服务提供商，许多组件都会影响网站速度。因此，有很多方法可以提高网站性能，而Web缓存是最有效的方法之一。 Web 缓存存储站点数据的副本以供将来请求。Web缓存不是从服务器下载原始数据，而是将这些缓存文件提取给您的网站访问者。因此，您的内容显示得更快。 但是，缓存文件可能会过期——这将阻止访问者看到您网站的更新版本。 为了解决这个问题，我们将向您展示如何使用流行的WordPress插件清除缓存。我们还将包括删除浏览器缓存以获得更有效结果的步骤。让我们先解释一下什么是缓存以及它是如何工作的。 解释WordPress缓存是什么以及它是如何工作的 使用LiteSpeed清除缓存 使用WP Super Cache清除缓存 使用W3 Total Cache清除缓存 使用WP Fastest Cache清除缓存 使用Cloudflare清除缓存 清除浏览器中的缓存 解释WordPress缓存是什么以及它是如何工作的 缓存是静态内容的临时存储位置，例如HTML、Javascript、CSS和媒体文件。 每当您访问网站时，您的浏览器都会向该网站的服务器发送请求。服务器可能需要一两分钟来获取和显示请求的内容——网络缓存使这个过程更快。 Web 缓存下载站点的静态内容并将其存储为缓存文件。因此，您的浏览器可以向服务器创建更少的请求，因为它已经有缓存的内容。 Web缓存有两个主要系统： 客户端缓存——也称为浏览器缓存，这种类型的缓存将静态内容存储在本地存储中。当用户重新访问网站时，它会加载得更快，因为缓存的版本已经存储在浏览器缓存文件夹中。 服务器端缓存——具有与客户端缓存类似的概念。但是，它使用服务器来存储网站的缓存数据。服务器缓存可以存储来自多个数据库的各种站点数据，使其成为高流量网站的绝佳解决方案。 总而言之，Web缓存通过存储网站的静态版本来减少对服务器的请求，从而提高网站性能。 它还减少了您的网络资源，因为处理更少的请求需要更少的带宽，这可以使资源有限的网站受益。 清除WordPress中的缓存 有时您更改和调整您的WordPress网站，但您的内容没有在前端更新。这可能是因为您的WordPress服务器仍在显示页面的缓存版本。 幸运的是，清除WordPress缓存通常可以解决此问题。当您的网站缓存为空时，缓存系统可以存储更新的数据并将其显示给您的访问者。 清除WordPress网站缓存的最简单方法是安装插件。以下部分将说明如何使用四个流行的WordPress缓存插件清除缓存，并展示如何在您的域指向Cloudflare时清除缓存。 使用LiteSpeed清除缓存 使用LiteSpeed Cache for WordPress (LCWP) 插件来有效管理缓存的存储和使用方式。这个缓存插件使用LiteSpeed服务器缓存来改善站点加载时间，并带有LiteSpeed独有的功能。 LiteSpeed Cache插件提供了多种清除WordPress缓存的方法。从根据特定条件设置自动缓存清除到为计划清除包括特定网站URL。请按照以下说明进行操作： 安装并激活插件后，访问您的WordPress管理仪表盘。然后，转到LiteSpeed Cache。 选择工具箱菜单，将出现LiteSpeed缓存工具箱窗口。 您可以清除各种类型的缓存，从页面缓存到CSS/JS缓存。选择您要执行的缓存清除类型。 如果您想完全清除WordPress缓存，请选择Purge All。请注意，它不会删除您WordPress网站上的关键数据——您可以继续清除缓存。 但是，如果您只想清空站点某些部分的缓存，请向下滚动到“Pure By”部分。从那里，使用类别、标签或URL输入您的内容。 除了访问您的WordPress仪表盘之外，您还可以通过访问它来清除特定页面的缓存——请记住，您需要以管理员身份登录。只需将鼠标悬停在管理栏上的LiteSpeed图标上，然后选择Purge this page。 使用WP Super Cache清除缓存 WP […]

关键渲染路径是浏览器首先在屏幕上渲染页面所执行的一系列任务，即下载、处理并将HTML、CSS和JavaScript代码转换为实际像素并将它们绘制在屏幕上。 关键渲染路径优化是最小化浏览器执行序列的每个步骤所花费的时间的过程，优先显示与当前用户操作相关的内容。 此过程的大部分与无需向下滚动浏览器窗口即可看到的页面部分有关。该部分也称为“折叠上方（Above the Fold）”。为了更好的可用性，应该尽快渲染ATF，这可以通过至少减少网络往返次数来实现。渲染ATF所需的资源被认为是关键的，优化Above the Fold意味着将关键资源对首页渲染时间的影响降至最低。 在这篇文章中，我们将介绍关键渲染路径优化序列。 首先，我将概述浏览器呈现页面内容的任务。 接下来，我将剖析我们可以执行的最相关的操作来优化关键渲染路径。 最后，我将列出一些有用（且流行）的WordPress优化插件。 关键渲染路径序列 以下是浏览器为呈现页面而执行的一系列步骤： 首先，浏览器下载并解析HTML标记并构建DOM 然后它下载并处理CSS标记并构建CSS对象模型 它在渲染树中结合了渲染页面所需的DOM和CSSOM节点，渲染树是所有可见节点的树形结构 它计算页面上每个对象的尺寸和位置 最后，它在屏幕上绘制像素 DOM 正如Google的关键渲染路径优化指南中所解释的那样，浏览器按四步顺序构建文档对象模型： 首先，浏览器读取行字节并将它们转换为单个字符。 然后它将尖括号内的字符串转换为标记。 这些标记被转换为节点对象。 节点对象以树状数据结构链接，其中包含HTML内容、属性和节点之间的关系。这个结构就是文档对象模型。 这里需要注意的重要一点是浏览器是逐步构建DOM的。这允许我们通过创建高效的DOM结构来加速页面的渲染。 DOM结构 CSSOM 当解析器遇到一个引用外部CSS样式表的标签link时，它会阻止解析并发出对该资源的请求。收到CSS文件后，浏览器开始构建CSS节点的树形数据结构。 浏览器读取 .css 文件的行字节并将它们转换为单个字符 它将大括号内的字符串转换为标记 这些标记被转换为节点对象 节点对象以树状数据结构链接，其中包含每个节点的CSS属性以及节点之间的关系。这种结构就是CSS对象模型( CSSOM )。 与DOM构建不同，CSSOM构建不是增量的。浏览器不能使用样式表的一部分，因为样式可以在同一个样式表中进行细化和重新声明。出于这个原因，浏览器会阻塞渲染过程，直到它接收并解析所有CSS。这意味着CSS是渲染阻塞的。 CSSOM结构 渲染树 浏览器将DOM和CSSOM组合到渲染树中，最终的树结构包含用于将页面渲染到屏幕的所有节点和属性。 渲染树仅包含渲染页面所需的节点。结果，忽略了不可见的节点。 浏览器使用渲染树计算节点尺寸和位置作为绘画过程的输入。 渲染树结构 布局和绘制 在布局阶段，浏览器计算渲染树每个节点的尺寸和位置。浏览器从根开始遍历渲染树，并在此阶段生成一个盒子模型。该信息最终用于将渲染树的每个节点转换为屏幕上的实际像素。 关键渲染路径优化 运行整个过程所需的时间是可变的。这取决于文档大小、请求数量、应用的样式、用户设备等。最相关的Google建议之一是优先考虑可见内容以尽可能快地呈现“首屏”，并提供两个主要规则跟随： 构建HTML以首先加载关键的首屏内容 减少HTML、CSS和JS资源使用的数据量 正如Google的PageSpeed指南中所解释的那样，如果渲染ATF所需的数据量超过了初始拥塞窗口 (14.6kb)，则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读有关延迟的更多信息）。浏览器以增量方式构建DOM，允许我们通过构建HTML以首先加载首屏并延迟页面的其余部分来减少渲染ATF所需的时间。 折叠上方的内容因用户设备而异 但是优化并不会随着构建有效的DOM结构而结束。相反，它是一个涉及整个关键渲染路径序列的改进和测量过程。 让我们深入研究。 最小化资源维度 我们可以通过压缩、压缩和缓存HTML、CSS和JavaScript资源来减少浏览器要下载的数据量： 最小化是从源代码中删除不必要的字符（如注释和空格）的过程。这些字符在开发中很有帮助，但它们对于渲染页面没有用。 […]

经营在线业务最困难的方面之一是将您的访问者转变为付费客户。涉及的因素太多了，错过一两步是可以原谅的。然而，如果您要使用WordPress创建漏斗，那么赢得客户的机会就更大。 在创建销售渠道方面，对我们而言，WordPress胜过竞争对手。无论您是初创公司还是企业，它都具有可扩展性、灵活性和适合您的预算。 在这篇文章中，我们将向您展示如何使用WordPress创建漏斗分析。我们将概述您需要的所有工具，并引导您完成整个过程。 ClickFunnels快速入门 在我们真正进入文章之前，值得花几分钟谈谈ClickFunnels。这是创建可重复且有效的销售渠道的领先解决方案。成千上万的用户使用该工具产生流量、客户和收入。 在纸面上，它具有许多令人兴奋和创新的特性和功能。例如： 有一个可靠的漏斗构建器，具有拖放功能。 它提供内置于平台的内容营销。 社区丰富而专注。 “哎呀，是的！”中还有更多内容。用于选择ClickFunnels的列。即便如此，它并没有捕获100%的用户群。 为什么你想找到一个ClickFunnels替代品 鉴于ClickFunnels提供的出色功能，它并不是市场上唯一的解决方案。以下是几个原因： 价钱。ClickFunnels价格比较贵的，这是无可避免的。最低级别是每月97美元，这不像每月297美元的计划那样功能齐全。 ClickFunnels的生态系统。虽然封闭源代码的多合一托管平台非常适合入门，但您永远被锁定在ClickFunnels中。换句话说，没有办法让您的业务脱离ClickFunnels的系统。 功能。ClickFunnels是一个“万事通”。因此，虽然某些功能是一流的，但其他功能需要一些工作。 它的外观和设计。就像WordPress网站过去有某些“告密”元素一样，所以ClickFunnels网站也会大声疾呼它的名字。 为了进一步讨论最后一点，如果您查看ClickFunnels网站的任何模板或默认设置，它们都具有与整个销售渠道相关联的过时外观： 所以，ClickFunnels有一个“垃圾邮件”的默认设计，尽管我们承认它是一个成功的设计。无论如何，您想要使用WordPress创建漏斗的原因会有一个独特的组合——所以让我们接下来讨论一下。 为什么你应该使用WordPress创建漏斗 在构建任何类型的网站时，我们认为WordPress排名第一，这不应该让人感到震惊。我们总结一下关键方面： WordPress核心软件是免费的。它不仅下载和使用成本为零，而且是开源的。这意味着您几乎可以控制网站的各个方面，而无需锁定。 它可以伴随您的整个业务旅程。WordPress非常适合作为博客平台使用。它也是一个功能齐全的内容管理系统 (CMS)，适用于每月点击数百万次的企业级网站。 WordPress可以通过数以千计的主题和插件进行扩展。事实上，很多都是免费的。我们将在整篇文章中讨论的主题和插件还有一个丰富的高级市场。 WordPress社区强大、多样且知识渊博。有易于访问的支持渠道和丰富的开发人员网络，以确保WordPress始终在发展和改进。 以上只是冰山一角。即便如此，不是每个人都会在不调查竞争对手的情况下使用WordPress创建漏斗。接下来我们将重点介绍这一点。 使用WordPress创建漏斗的替代解决方案 任何产品或服务之间的竞争都是有益的。销售漏斗也不例外。我们过去曾介绍过登录页面，在许多情况下，它们可以与更“传统”的漏斗构建器竞争。 尽管如此，我们建议有两个工具更接近WordPress，第一个是我们已经提到的。 1. ClickFunnels 我们将不再讨论相同的细节，因为我们已经在本文和其他文章中讨论了ClickFunnels。无论如何，值得总结一下ClickFunnels的吸引力： 这是一个多合一的漏斗构建器平台。 社区旨在帮助您取得成功。 您将获得一个经过验证的系统来创建、利用销售渠道并从中获得成功。 更重要的是，启动和运行起来轻而易举。完成注册过程后，您将执行以下步骤： 导航到您的仪表盘，然后单击构建漏斗按钮。 从弹出的对话框屏幕中，选择要使用的漏斗类型。 使用漏斗生成器中的启动清单创建您的销售漏斗。 这里的最后一步涉及设计挤压和销售页面、订单表格、确认和感谢页面。这一切都布置得很好，您很快就会准备好您的漏斗并等待访客。 2. Systeme 另一个解决方案是Systeme。 这将自己定位为ClickFunnels的直接竞争对手，并且具有许多相同的功能： 拖放式漏斗构建器，也可兼作网站构建工具。 电子邮件和内容营销功能。 用于销售订阅和课程的内置工具。 强大的联系人管理。 在我们的评论中，我们认为Systeme与ClickFunnels接触的用户不同。后者专注于核心概念，而Systeme希望成为您整个业务的中心。 因此，入门步骤比ClickFunnels更加多样化： 单击“创建”按钮以构建新渠道。 为您的渠道选择最终目标，例如捕获电子邮件或举办网络研讨会。 使用模板构建订单表格和感谢页面。 根据您的要求自定义每个页面。 使用内置页面构建器进一步设计您的渠道。 […]