避免 CMS 灾难:如何提高网站性能

已发表: 2022-04-15

没有人喜欢……等待……等待……。 等等……

拥有一个表现得像数字超级英雄的网站是一项业务需求,尤其是当您对正在研究您的组织的潜在客户留下第一印象时。

以下网站性能统计数据应该让每个网站开发人员和工程师感到恐惧,更不用说您的品牌营销团队了:

  • 如果加载时间超过四秒,二分之一的用户会放弃网站。 资料来源:英国广播公司。
  • 一秒钟的延迟会导致用户满意度下降 16%。 资料来源:LoadStorm。
  • 如果页面加载时间超过 3 秒,则 53% 的移动网站访问会被放弃。 资料来源:谷歌。

当您检查 Google 的 Core Web Vitals 性能指标时,您可能已经注意到网站性能不佳,但不确定如何补救?

当您的业务上线时,您无法承受将新业务发送到其他地方并通过让您的内容管理系统 (CMS) 提供糟糕的数字体验来玷污您的品牌的代价。

下面我们诊断出五个常见的减速罪魁祸首,以及如何使用像 WordPress VIP 这样的敏捷 CMS 来提高网站性能。

首先,当您加载 Web 应用程序时实际发生了什么?

对于任何浏览器来说,这是一个很大的要求,它必须立即进入高速档,在几毫秒内执行一系列动作。 这是Mozilla的礼貌:

  1. 浏览器转到 DNS 服务器,并找到网站所在服务器的真实地址。
  2. 浏览器向服务器发送一条 HTTP 请求消息,要求它向客户端发送网站的副本。 此消息以及客户端和服务器之间发送的所有其他数据都使用 TCP/IP 通过您的 Internet 连接发送。
  3. 如果服务器批准了客户端的请求,服务器会向客户端发送“200 OK”消息,意思是“你当然可以看那个网站! 这里是。” 然后它开始将网站的文件作为一系列称为数据包的小块发送到浏览器。
  4. 浏览器将这些小块组合成一个完整的网页并将其显示给您。

注意:当然,这并不像这一切那么容易。 每个步骤之间都有许多较小的步骤。 现在,让我们深入探讨“缓慢”发生的五个关键原因,以及我们的 WordPress VIP CMS 如何缓解它们。

那么,是什么导致浏览体验缓慢呢?

罪魁祸首 1. 缺乏 PoP 和 CDN

您的业​​务很可能是全球性的。 这增加了确保在各种设备上以各种连接类型为用户提供快速、一致、稳定连接的后勤挑战。

那么这对您的应用程序意味着什么?

当从上述步骤 2 发起网络请求时,该请求会经过多个网络跃点。 跃点是计算机网络术语,指的是数据包从源到目的地经过的路由器数量。

由于这些从用户的地理位置到您的服务器的跃点,您的用户在加载期间可能会经历更多的时间。 这可以通过内容交付网络 (CDN) 和入网点 (PoP) 向访问者提供更靠近访问者的内容来缓解。

WordPress VIP 答案

WordPress VIP 的 CDN 是一个由边缘和源 PoP 组成的全球网络,可以尽可能快速、高效和可靠地为全球客户提供您的站点。 一旦我们的边缘服务器收到来自您的应用程序的新内容通知,这种本地化可用性就会自动发生。 这意味着您的团队无需处理额外的配置,从而使他们能够专注于其他任务。

罪魁祸首 2. 未优化的媒体

今天大家用最新的移动设备拍摄的那些高质量的图像非常漂亮! 也就是说,直到它们被用作您主页上的缩略图。

添加 4K 图像并将其限制为 100×100 像素的容器意味着您的用户必须加载整个 4K 图像。 一张图片没什么好担心的,但是对于大规模发布内容的企业来说,页面加载很容易随着索引页面中的文章数量呈指数级增长。

WordPress VIP 答案

WordPress VIP 上的应用程序自动获得边缘缓存图像的所有好处,并自动调整上传图像的图像大小。 此外,图像可以动态调整大小。

罪魁祸首 3. 未优化的 Javascript 和 CSS

加载大文件时,每一位和每一个请求都很重要。 如果您已经优化了下载文件所需的网络跳数,则文件到达所需的最大时间是请求的打开和关闭。

为了解决这个问题,现代 Javascript 和 CSS 开发经常使用缩小和连接。

缩小是指删除文件中所有不必要的字符,通常是所有不必要的空格。 这里的目的是减少正在传输的比特总数。
连接是将多个文件粘合在一起以产生一个更大的文件的行为。 这里的目的是减少网络请求的数量。

WordPress VIP 答案

WordPress VIP 自动连接 JavaScript 和 CSS 文件,以减少单个页面加载时发生的请求数量。 CSS 文件被缩小和连接。 归功于我们选择的开源插件。

然后将缩小和连接的文件缓存 15 天,或直到检测到更改。

罪魁祸首4.缓存利用率低

缓存是一种特殊的临时存储来加快速度。 它们加速的速度取决于缓存的类型。

如果您没有使用某种形式的缓存,那么当您的应用程序处于负载状态时,您可能会严重影响页面响应速度。

WordPress VIP 答案

WordPress VIP 使用了几种不同类型的缓存:

  • 对象缓存——用于存储应用级数据。 这有助于在不影响数据库的情况下快速有效地检索数据。 简而言之,对象缓存可防止大量计算和/或查询占用宝贵的连接时间。
  • 查询缓存——数据库查询的轻量级内存缓存。 在 WordPress 中,任何使用 WP_Query API 的帖子查询都极大地受益于这种形式的缓存。
  • 页面缓存——完全绘制页面的存储,存储在每个边缘 PoP 位置。 这是大多数访问您的应用程序的用户遇到的第一级缓存。 页面缓存使我们的 CDN 能够在您的应用程序无需运行任何代码的情况下提供本地化内容。

所有这些协调工作以减少请求响应时间。

问题五、数据库连接饱和

当您的应用程序的内容和用户群增长时,那些最初执行良好的旧数据库查询现在会降低性能。

当查询需要时间来执行时,这会在数据库中占据一个席位,直到查询完成。 有时这些席位会很快填满,从而阻止执行更多查询。 这通常表现为应用程序性能下降,直到数据库提供 500 个响应。

连接饱和可以快速且随机地发生,使得根本原因难以诊断。

WordPress VIP 答案

作为 WordPress VIP 服务包的一部分,我们提供对 New Relic 的访问,这有助于主动诊断和监控上述潜在问题。 这可以节省您的团队时间、成本以及在数秒内保护其他工具和资源的麻烦。

综上所述

从网络跳数和缺乏点的存在到数据库内容饱和,解决网站性能不佳的根本原因应该是任何具有前瞻性的组织及其内容管理系统的 P0 优先事项。 毕竟,给观众留下良好的第一印象是数字时代的一切。 因为速度确实会杀人。

在此处了解有关 WordPress VIP 的更多信息。

作者

Michael Chan,高级软件工程师,WordPress VIP