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

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组合页面。

添加ESI后的屏幕截图
添加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的信息,并且语法已经发生了重大变化。但是,从一个转换到另一个通常很简单。


清远网页设计

最新案例

联系电话 400-6065-301

留言