使用有效的缓存策略服务静态资产(3 种方法)

已发表: 2022-04-12

当您使用有效的缓存策略提供静态资产时,用户的浏览器将在本地存储这些文件,并且加载页面所需的时间更少。 通常,一旦页面被加载,就必须下载该页面的所有资源,例如 HTML、CSS、JavaScript 和图像。

浏览器缓存允许浏览器从其本地缓存中检索静态资源,例如 CSS、JavaScript 和图像。 因此,页面加载速度更快。 缓存内容意味着对页面的后续访问将比用户第一次访问更快,但在第一次访问时不会。

目录

什么是缓存?

缓存是计算中的高速数据存储层,它保存通常是临时性质的一部分数据,以便可以比访问数据的主存储位置更快地处理对该数据的后续请求。 缓存允许您快速重用以前检索或计算的数据。

缓存实际上是如何工作的?

缓存中的数据通常保存在 RAM(随机存取存储器)等快速访问硬件中,但也可以与软件组件结合使用。 缓存的基本目标是通过消除联系其后面较慢的存储层的需要来加速数据检索。

与存储完整和持久数据的数据库相比,缓存通常会临时存储部分数据。

缓存的优点

让我们来看看缓存的一些优点。

提高应用程序的性能

从内存缓存中读取数据的速度非常快,因为内存比磁盘(磁性或 SSD)(亚毫秒)快几个数量级。 这种显着更快的数据访问提高了应用程序的整体性能。

应减少后端负载

通过将部分读取负载从后端数据库转移到内存层,缓存可以减轻数据库的压力,使其在重负载下不会遭受性能低下甚至在尖峰下崩溃。

应消除数据库中的热点

许多应用程序往往比其他应用程序更频繁地检索数据子集。 因此,数据库中可能会出现热点,您可能需要根据最常用数据的吞吐量要求过度配置其资源。 对于频繁访问的数据,内存缓存可减少过度配置要求,同时提供快速、可预测的性能。

降低数据库成本

每秒输入/输出操作(IOPS)可以由单个缓存实例执行,允许它替换多个数据库实例并显着降低成本。 如果主数据库按数据量收费,这一点至关重要。 在某些情况下可能会有很大的价格差异。

可预测的性能

处理应用程序利用率的激增是现代系统中的一个普遍问题。 增加的数据库负载会导致更长的数据检索时间,从而使整体应用程序性能不可预测。 这个问题可以通过使用高吞吐量的内存缓存来解决。

增加阅读人数(IOPS)

除了减少延迟之外,内存系统的请求率 (IOPS) 比类似的基于磁盘的数据库要高得多。 当用作分布式侧缓存时,单个实例每秒可以满足数百甚至数千个请求。

什么是资产缓存?

缓存是一个简单的概念。 当浏览器下载资产时,它使用服务器的策略来确定是否应该在后续访问时再次下载它。 如果服务器不提供策略,浏览器默认,这通常意味着缓存该会话的文件。

什么是静态资产缓存?

指定浏览器应临时保留或缓存资源的时间。 对该资源的任何后续请求都来自浏览器的本地副本,而不是来自网络。

每当您的站点访问者获取尚未在浏览器或服务器中缓存的内容的新版本时,您就使用了低效的缓存策略。 实际上,您可能正在为他们提供缓存和随时可用的保存内容。

另请阅读:如何修复 WordPress 中损坏的永久链接

什么是有效的缓存策略?

如果您的静态文件没有更改(或者您有可接受的缓存清除机制),我们建议您将缓存策略设置为 6 个月或 1 年。

全局 CSS/JS 文件、徽标、图形等元素在已完成的网站上很少更改,因此 6 个月或一年是可以使用的公平缓存到期时间。

当然,如果你经常修改上述静态文件,你可以选择更短的缓存过期时间,只要大于 3 个月。

使用高效的缓存策略服务静态资产

有多种方法可以使用高效的缓存策略来服务静态文件,我们将讨论 3 种方法

  1. 如果您使用的是 LiteSpeed Enterprise 或 Apache,请使用 .htaccess 文件
  2. 使用 LiteSpeed 缓存
  3. 使用 W3 Total Cache 插件

在 Apache 和 LiteSpeed Enterprise 上使用 .htaccess 文件提供静态资产

注意:如果您使用的是 OpenLiteSpeed 或 NGINX,此方法将不起作用。

登录到您的 WordPress 仪表板

点击插件 - >从左侧菜单中添加新的

搜索“文件管理器”。 安装并激活插件

单击左侧菜单中的“文件管理器”

在 public_html 文件夹中,右键单击 .htaccess 并单击重命名

更改文件名 (.htaccess-error)

单击顶部的“新文件”图标

将文件命名为“.htacess”

粘贴以下代码并保存并关闭

<IfModule mod_expires.c> ExpiresActive On # CSS, JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Others ExpiresByType application/pdf "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>

使用 LiteSpeed Cache 提供静态资产

您需要安装并激活 LiteSpeed Cache 插件,安装后,请按照以下指南进行操作:

  • 转到您的 WordPress 仪表板
使用高效的缓存策略服务静态资产
  • 单击左侧菜单中的 LiteSpeed Cache -> Cache
  • 单击顶部的“浏览器”选项卡
  • 打开“浏览器缓存”切换
  • 点击“保存更改”

使用 W3 Total Cache 提供静态资产

首先安装并激活 W3 Total Cache 插件,然后按照以下指南进行操作。

  • 转到您的 WordPress 仪表板
  • 单击左侧菜单中的性能 -> 浏览器缓存
  • 向下滚动到“媒体和其他文件”。 将“Expires Header Lifetime”更改为至少 15552000 秒(180 天)。
  • 点击“保存所有设置”

结论

当您为静态资产提供有效的缓存策略时,用户的浏览器会将这些文件保存在本地,从而减少页面加载所需的时间。 页面的所有资源,如 HTML、CSS、JavaScript 和图片,必须在加载后立即下载。