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

Wordpress大师

  

能够通过有效的缓存策略提供静态资产，通过减少服务器资源的负载并确保内容快速可靠地传递给访问者，从而提高网站的性能。本文将解释静态资产缓存的概念，用户体验和SEO如何受到缓存策略的影响，以及如何解决“使用有效的缓存策略提供静态资产”问题。像GTMetrix和Google pagespeedinsights这样的网站提供了如何提高网站性能的建议。如果你正在读这篇文章，你至少意识到每个网站都有机会提高性能，要么通过手动优化，要么通过使用像10Web Booster这样的插件。在这两个工具中，您可能会看到使用高效缓存策略提供静态资产的建议。这个建议是将文件存储在本地，这样重复访问网站的速度就会更快。在此建议的基础上改进的步骤并没有改善最初的站点访问（还有其他改进）。不过，所有后续访问都将受益于利用浏览器缓存。需要注意的是，使用有效的缓存策略提供静态资产的建议也被称为利用浏览器缓存或WordPress中的浏览器缓存。这篇文章解释了如何使用高效的缓存策略来提供静态资产，以及高效的缓存策略如何提高你网站的性能。

在这篇文章中

如何使用有效的缓存策略服务静态资产什么是静态资产?什么是缓存?什么使静态资产可缓存?什么是缓存策略?缓存策略如何影响UX和SEO ?如何修复服务静态资产与一个有效的缓存策略问题修复手动修复与WordPress插件仍然不能解决的问题?当使用GTMetrix时，建议将看起来像下面结果页面上的示例。它将突出实现浏览器缓存的潜在节省。



  

在Google pagesspeed Insights中，建议看起来很相似，给出了类似的信息。

  

这些建议是相似的，因为GTMetrix和PageSpeed Insights使用Lighthouse工具进行网页分析框架。Lighthouse是一个旨在提高站点性能的开源工具，可以以多种不同的格式运行。让我们花点时间快速回顾一下网站的性能是如何通过一系列指标来衡量的，其中最重要的是核心网络生命指标。最大内容绘制（LCP） -测量在页面视口中加载最大对象所需的时间。首次输入延迟（FID） -这衡量网站的响应能力。它测量用户点击或与站点交互到站点响应之间的时间。累积布局移位（CLS）——它测量页面布局意外移位的程度。对LCP和FID都有积极影响的一种方法是使用有效的缓存策略来提供静态资产，这意味着让浏览器知道它可以在本地存储一定数量的资源。高效的缓存策略意味着更快的加载时间，因为无论你的网速有多快，从本地缓存加载将更快，节省时间。有几个组件，所以让我们更详细地讨论它们。要了解如何使用有效的缓存策略为静态资产提供服务，我们首先需要了解不同的方面，例如静态资产、缓存和缓存策略。让我们在这里分解一下。什么是静态资产?

静态资产是文件。当我们在本文中提到静态资产时，我们指的是预计不会发生任何变化的单个文件很快，或者经常。像图片、javascript、CSS文件和字体这样的文件可以被认为是静态资产。对于WordPress，这些CSS、javascript、图像和字体文件通常是主题、插件或用户内容的一部分。动态生成的文件和页面不被认为是静态资产。在WordPress中，通过缓存插件生成的静态页面就是一个例子。下一节将对此进行详细阐述。什么是缓存?

缓存是将答案存储在缓存中的过程，以便下次问同样的问题时，可以更快地返回答案。

相关文章如何安全有效地清除WordPress缓存?



















如果你以前使用过WordPress缓存插件，你可能对整页缓存很熟悉。页面缓存不同于静态资产缓存。

页面缓存与静态资产缓存本文专门研究静态资产（文件）缓存。这不应该与全页缓存混淆，后者存储生成的页面以供以后使用。页面缓存和文件缓存都有助于提高站点的性能。在讨论静态资产缓存时，我们指的是特定的资产，如javascript、CSS和图像文件。

页面缓存存储WordPress动态生成页面的结果，并在特定的时间内重新提供该版本的服务。页面缓存通常存储在服务器或边缘网络（如CDN）上，而静态资产则存储在用户机器的本地。

关于我们如何用有效的缓存策略提供静态资产的缓存意味着告诉浏览器在重新下载资源之前它可以在浏览器本地存储多长时间。是什么让静态资产可缓存?

根据GTMetrix的定义，如果资产满足以下要求，则资产是可缓存的:它是字体、CSS、javascript或媒体文件。它返回一个200,203或206 HTTP状态码。它没有明确的无缓存策略

什么是缓存策略?

我们已经了解了什么是静态资源以及缓存资源的含义。缓存策略就是决定文件缓存多长时间的规则。术语“新鲜”和“不新鲜”在这里可以用来描述缓存文件的状态。如果可以从缓存中提取文件，则可以将其称为fresh。当它过期时，它就会被称为stale。策略将回答诸如文件被认为是新鲜的时间有多长以及如何检查文件是否新鲜之类的问题。该策略指出，我们只需要在特定的时间之后与服务器进行检查，或者让我们知道在每个请求时与服务器进行检查，但只有在文件发生更改时才重新下载文件。

在我们进一步讨论之前，还有一些术语需要理解。源服务器这是您的网站托管的服务器。它有原始文件，被认为是权威的来源。共享缓存共享缓存位于源服务器和客户端之间，也可能存储文件。代理服务器或CDN提供商就是一个例子。私有缓存私有缓存是浏览器的缓存。用户体验和搜索引擎优化如何受到缓存策略的影响?用户体验（UX）和搜索引擎优化（SEO）是紧密相连的。根据谷歌的研究表明，用户关心网站的响应性，因此谷歌将响应性更高的页面排名更高。如果静态资源被有效地缓存，由于加载这些资源所需的时间减少，页面将呈现得更快。时间的减少导致了核心网络指标（如LCP和FID）的改善，并最终提高了搜索引擎排名。

你可以阅读更多关于核心网络的信息契约页面排名在这里。

使用有效的缓存策略服务静态资产不是wordpress特定的设置，您可以通过修改web服务器配置文件或使用10Web Booster托管之类的插件来手动设置它，以确保您的站点配置了优化的缓存设置。本节将介绍编辑一个web服务器的配置文件，直接启用缓存控制和过期的HTTP头在你的服务器上，所以当它提供静态资产时，它在响应中应用HTTP头。当一个资源被请求时，web服务器用资源和一些额外的信息来响应，这些信息被称为HTTP头。将HTTP标头视为有关连接的元数据。在缓存的情况下，HTTP头cache - control和Expires控制我们如何缓存资源。缓存控制头包含关于是否和/或如何缓存静态资源的指令。缓存控制有很多指令，让我们来了解一些最流行的指令。指令描述max-age=N这是在请求被提出后，资产被认为是“新鲜的”的时间量。如果原始服务器响应为N秒或更短，则认为静态资产是新的。名称no-cache可能具有欺骗性。无缓存并不意味着不缓存文件，它意味着在每次请求时重新验证文件的新鲜度。如果文件没有更改，则将使用缓存版本。服务器将响应一个304 Not Modified http响应代码，表示文件没有更改。如果你不想要一个资产被存储，no-store是必需的指令。private表示文件只能存储在私有（浏览器）缓存中。public表示文件可以存储在一个公共的，例如CDN，代理缓存。这里有一些缓存控制头文件的例子。



示例:缓存一个资产7天cache - control: max-age=604800

示例:可以保存，但每次请求都要重新验证cache - control: no-cache

示例:不能缓存cache - control:缓存控制头是更新的，有更多的选项，但在不支持缓存控制的情况下，expires HTTP头完成相同的头任务，并指示资产在需要重新验证之前有效多长时间。（注意，在缓存控制头最大年龄指令优先于过期）过期:星期三2月13日21:01:38 CST 2023直接修改服务器配置

首先，让我们看看“困难的方式”，所以我们了解发生了什么，当我们使用其他工具和服务，使它更容易为我们。在Apache HTTP服务器中，可以将以下代码片段添加到站点定义或.htaccess文件中。

解释这段代码，它说任何扩展名匹配。ico或。pdf等的资产将为该资产设置Cache-Control标头。< filesMatch”。（ico pdf | | flv | jpg | jpeg | png | gif | js | css | swf） $ “ >报头集Cache-Control “max-age=3600, public“< / filesMatch >

在Apache中，许多主机提供商会给你在。htaccess文件中添加指令的选项。请注意，虽然这是一种添加到服务器配置的简单方法，但使用.htaccess文件会在服务器级带来负面的性能影响。在Nginx中，这段代码可以添加到服务器块中。

解释这段代码，它说任何扩展名匹配。ico或。pdf等的资产将同时具有过期和缓存控制头集。位置~* \.（ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf）$ {过期1 h;add_header Cache-Control “public, no-transform“;}对于Apache和Nginx，我们展示了如何修改/添加头文件。我们正在展示用于缓存的特定头，但该方法可用于任何其他形式的缓存。如果上面的内容感觉很多，那是因为它确实是。修改服务器配置并保持手动更改的最新状态既耗时又容易出错。

10Web Booster免费计划可以配置Apache为静态资产添加标头，它也可以为缓存网页添加标头。如果您还没有使用10Web主机，并且您的主机使用Apache，那么这是开始实现高效缓存策略的好方法。如果你需要更多的选项或更多的HTTP头控制，你可以使用10Web Booster Pro. 10Web Booster Pro利用它的Cloudflare。当您使用Cloudflare时，它会将缓存控制标头添加到静态资产和缓存页面中。这绕过了任何服务器配置或限制，因为您的访问者直接从Cloudflare提供文件。

是什么使10Web Booster插件在这里的最佳选择是，它做了所有这些，并自动完成。您不需要管理任何服务器配置或.htaccess文件。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡，想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上!获得10Web Booster，它是免费的 不需要信用卡   



或者，如果你使用10Web Hosting，它会自动实现缓存，你不需要担心添加静态资产的头。仍然无法解决问题?如果您已经实现了上述步骤，并且您仍然看到具有有效缓存策略的服务静态资产仍然出现在您的报告中，那么您可以尝试以下几个方法。如果GTMetrix和PageSpeed仍然报告您应该使用缓存策略来提供静态资产，那么您可能需要验证您的实现是否确实进行了预期的更改。在大多数浏览器中，有一种简单的方法来验证文件是否来自缓存。在Chrome浏览器中，在视图和开发人员下，选择开发人员工具:



  

在网络选项卡下，您将能够识别来自（磁盘缓存）或（内存缓存）的文件。磁盘缓存和内存缓存的区别在于，当浏览器关闭时内存会消失，而当浏览器关闭时磁盘会继续存在。根据Lighthouse的统计数据，高效的缓存策略是具有较高的缓存命中率和未命中率的策略，这意味着大多数静态资产都设置了最大年龄或过期时间。对于正在生产或不经常更改的站点，建议使用最多三个月甚至一年的站点。他们建议开始一个大约三个月（大约7890000秒）的策略，如果你已经设置了这个，如果你的网站是活的，可能值得将最大年龄增加到一年或更长。

能够通过有效的缓存策略提供静态资产，从而提高您网站的性能。本文介绍了什么是静态资产，什么是HTTP标头，并研究了如何启用和验证缓存标头是否到位。我们查看了通过修改服务器配置手动启用标头的具体细节，以及如何使用10Web Booster等WordPress插件使其更容易，并利用10Web与Cloudflare的集成来访问设置缓存控制HTTP标头。

10Web Booster不仅仅是一个缓存插件。您可以在这篇10Web Booster文章中了解更多关于许多缓存和速度优化特性的信息。想要加快你的网络速度尽管立即吗?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡，想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡  

常见问题

缓存的资产会导致我的网站出现问题吗?在本地缓存到期之前，静态资产可能会发生变化。这将导致资产的最新版本与从缓存中加载的版本不同，并有可能出现问题。避免这种情况的一种方法是将Cache-Control头设置为no-cache。no-cache指令让浏览器知道它应该检查服务器以确保它有一个最新的版本。

不要让无缓存的内涵欺骗了您，它仍然缓存数据。没有缓存意味着每次都要检查服务器，而不是假设没有更新的版本。

是否可以强制刷新缓存的静态资源?目前，没有办法强制清除已经存储在缓存中的资源。如果你知道你将频繁更新资源，一个选择是在缓存控制头中添加一个max-age，或者显式声明expires头。如果用户清空了他们的缓存会发生什么?如果用户清空了他们的缓存，静态资产将从服务器再次下载。

用户如何清除缓存?用户可以从浏览器的隐私设置中清除缓存。如何强制浏览器刷新缓存中的文件?

你可以做一个shift+Refresh，这将重新下载文件，不管他们的新鲜度