清远网页设计：控制缓存——使用边缘包含在清漆中

2019.08.12 mf_web

107

我坚信优化快速加载移动网站的最佳方法是为每个人优化。我们不知道有人在非移动设备上，但是拴在他们的手机上，或者只是在可怕的Wi-Fi上。

在本文中，我将解释如何使用Varnish，即使页面的某些部分无法长时间缓存，也可以使用Edge Side Includes。清远网页设计

缓存问题

大多数网页都是不会经常变化的内容。通常，当您发布某些内容时，它仍然是相当静态的，即使它已更新，在新版本出现前几分钟也许不是问题。如果在发布时缓存无效至关重要，则可以使用缓存失效从缓存中清除该页面。但是，可能存在一些您根本不想缓存的内容，例如个性化内容。可能还有一些内容需要缓存，但是在较短的时间内，可能是一个非常频繁更新的新闻窗口小部件。当页面包含此类内容时，您可能会认为它们无法访问。但是，Edge Side Includes（ESI）可以节省一天 - 以及您的网站性能。

什么是边缘包括？

ESI是用于在其他网页内组装网页片段的语言规范。该规范于2001年提交给W3C，但仍然是“W3C注释”，可供讨论，未经W3C认可或工作组更新。

ESI的工作方式与在页面中包含片段的其他方法类似，例如服务器端包含（SSI）或PHP包含语句，但它设计用于反向代理，如位于Web服务器前面的Varnish和缓存内容。

ESI如何与清漆配合使用？

Varnish实现了ESI功能的一个子集，其中三个是可用的七个语句。支持的语句列在Varnish文档中。这意味着我们可以在我们的页面上使用ESI并告诉Varnish在比主文档更短的时间内缓存包含，甚至根本不缓存包含。如果您已经启动并运行Varnish，那么使用ESI非常简单，并且会对您的命中率产生巨大影响：缓存中提供的页数。

一个例子

如果你想跟随并且没有使用Varnish安装，你可以从GitHub下载我的Vagrant软件包，它将安装一个基本的LAMP服务器和Varnish。查看GitHub上的README，了解如何为您的环境配置它。

我有一个使用开源Bootstrap模板的布局，这是一个标准的博客布局。在侧边栏中，我打算放置一些经常更新的内容，并且我希望确保它不会缓存太长时间。博客文章和其他内容我想要缓存几分钟，因为它不会经常更改。

首先要做的是使侧边栏成为PHP包含。我将include as保存inc/sidebar.php，然后在主页面中添加PHP include以包含它。我的页面看起来相同，但侧边栏的内容现在分为包含。

在我的主页面和我的包含中，我输出当前的日期和时间。这只是帮助我看看我的缓存是否正常工作。如果我没有进行缓存，每次重新加载页面时我都希望有时间改变。如果Varnish处于默认状态，则两次应该相同，并且只有在缓存清除时才会更新。

使用ESI包含文件

我现在要使用Varnish支持的两个ESI标签：

esi:includeesi:remove

复制

该esi:include标签用于包括通过ESI文件。所以我用这个替换我的PHP include：

<esi:include src="inc/sidebar.php"/>

复制

ESI不可用时创建回退

在esi:include标签之后我们添加esi:remove标签，并且这些标签内部是原始的PHP包含。在测试时我还添加了“Not ESI！”这一行，以便我可以看到是否通过PHP或ESI添加了包含。

<esi:include src="inc/sidebar.php"/><esi:remove>
  <?php include('inc/sidebar.php'); ?>
  <p>Not ESI!</p> </esi:remove>

复制

如果您现在在运行没有配置ESI的Varnish的服务器上加载页面，您应该看到“Not ESI！”文本。ESI未运行，因此将加载原始PHP包含。

通过这些esi:remove标记，您可以在Edge Side Includes不可用的情况下创建回退。这可能是因为Varnish尚未配置为将其用于该页面，或者您是通过Apache直接为站点提供服务，这可能是开发中的情况。

在ESI可用的<esi:remove></esi:remove>地方，当解析包含时，整个块将从页面中删除。使用该esi:remove语句不会阻止PHP代码被执行。如果ESI不可用，每次加载页面时仍会执行它，如果是，则根据缓存策略执行。

使用的另一个选择esi:remove是使用Varnish支持的第三个语句<!–esi … –>。如果您不希望在ESI不可用时发生任何事情，您可以使用此功能。

<!--esi <esi:include src="inc/sidebar.php"/>  -->

复制

在上述情况下，如果ESI不可用，则不会加载侧边栏 - 浏览器会将该语句视为HTML注释 - 因此网站访问者无法看到任何内容。如果由ESI处理，则将删除注释并解析包含。

配置清漆以使用ESI

我们告诉Varnish在vcl_backend_response子程序中使用我们的VCL中的ESI 。

sub vcl_backend_response { 
  set beresp.do_esi = true;  }

复制

注意：在Varnish 3中你会把它放在里面sub vcl_fetch。在这些升级说明中查看Varnish 3和4之间的其他差异。

如果您重新启动Varnish并重新加载页面，您会发现“Not ESI！”文本已经消失，如果您查看源文件，则没有包含的内容，但是包含了侧边栏。然而，我们的时代应该保持不变，因为我们仍然以相同的方式缓存页面的两个部分。

调整TTL

我希望我的侧边栏在刷新之前仅缓存30秒，而我的主要内容为120秒。在vcl_backend_response子例程内添加以下内容：

if (bereq.url ~ "sidebar.php") { 
  set beresp.ttl = 30s; } else { 
  set beresp.ttl = 120s; }

复制

在这里我要说的是，如果URL只匹配字符串sidebar.php缓存30秒，否则缓存120秒。

保存VCL并重新启动Varnish，然后重新加载页面 - 两次都应该相同。等待30秒并重新加载页面 - 侧栏时间应该更新，但主时间保持不变。您现在以不同方式缓存这些页面组件并使用ESI组合页面。

传递给的值bereq.url是正则表达式。您可能想要做的事情是将无法访问的文件或具有共同TTL的文件放入一个文件夹，然后定位该文件夹。

if (bereq.url ~ "^/inc") { 
  set beresp.ttl = 30s; } else { 
  set beresp.ttl = 120s; }

复制

Fastly正则表达式备忘单上还有一些简单表达式的例子。

将某些内容设置为永不缓存

如果存在您永远不想要缓存的包含（例如，如果它包含一些个性化内容），您可以选择性地将事物标记为不可缓存，并直接从Web服务器传递它们。

我有一个名为的文件夹personalized，我希望该文件夹中的任何包含直接从Web服务器提供，绕过缓存。我可以使用类似于if我用来设置TTL的声明来做到这一点vcl_backend_response。

if (bereq.url ~ "^/personalized") {
  set beresp.uncacheable = true; 
  return(deliver); }

复制

该行return(deliver);意味着内容完全绕过缓存并始终以新鲜的方式提供，而页面的其余部分则从缓存中提供。您可以通过创建包含，再次使用包含时间并将其放在personalized文件夹中来对此进行测试。

<esi:include src="personalized/panel.php"/>  <esi:remove>  
  <?php include('personalized/panel.php'); ?></esi:remove>

复制

此内容应始终显示从缓存提供的更新时间。

完整的VCL可以在GitHub上找到。您可以尝试ESI的不同组合以满足您自己的缓存要求。

进一步阅读

Edge Side Includes可以是一种调整Varnish性能的强大方法。但是，如何使用它们可能对您自己的网站非常具体。希望本文突出了一些可能性。为了完成，这里有一些我在编写本教程时看到的链接，以及一些详细介绍了各种CMS的实现。仔细检查文章所指的Varnish版本 - 有很多关于Varnish 3甚至Varnish 2的信息，并且语法已经发生了重大变化。但是，从一个转换到另一个通常很简单。

清远网页设计