Hartwell Insurance

我们刚刚为Hartwell Insurance上线了一个崭新的网站，我真的为此感到非常自豪。这次与以往Tomango的网站构建方式不同，我们使用了一些新技术和一些经典的网络标准。

这是一个使用Hugo编写的多页面、单页面(!)网站，Hugo是一个以性能为优先的静态网站生成器。如果你感兴趣的话，我在这里详细介绍了使用Hugo和静态网站的许多好处。

简而言之，静态网站生成器将整个网站预先渲染成HTML文件，然后像在1995年那样提供服务。

没有Apache或Node后端在运行时进行编译，所有工作都在构建阶段完成。这意味着服务器（在这种情况下是Netlify）只需执行一项任务——提供文件服务。毫不奇怪，提供简单文件的速度非常快。

起点是Netlify创建的Victor Hugo仓库。它让我能够立即开始使用Hugo、PostCSS、Browsersync和ES6，而无需自行设置任何工具——这总是一种胜利！

然后，我将设计文件中的所有内容转换为Markdown，并在必要的情况下添加了短代码。这个网站确实需要一些自定义的短代码来处理像扩展圆圈和全宽背景这样的呈现元素。但大部分情况下，只是干净的语义化HTML，加上一些CSS和JS的改进。

例如，下面显示的这个两列布局。我使用CSS的break-after: always;属性在<h1>标签上使用了多列布局。没有多层包装或难以清除的短代码，只有干净的HTML。

为了在部分标题上实现涟漪效果，我使用JS在标题前添加了一个<canvas>元素，并使用RequestAnimationFrame对其进行了动画处理。这给页面增添了一些动感。

在Hartwell Profitmaker部分，我考虑使用Vue.js来创建计算器，但是在仔细考虑后，我决定使用纯JS进行编码。结果，整个网站的JS代码总共只有3.2KB！

计划是使用Netlify来托管网站，从而可以使用Netlify表单功能。这意味着我不需要花费任何时间来设置后端，可以全力专注于前端。

在构建网站时，缓存验证通常不是我花费大量时间思考的事情。但由于本网站将成为渐进式Web应用程序，因此在进行更改时，文件的缓存失效将非常重要，以确保网站不会出现错误。由于我使用的是Victor-Hugo，我并不确定如何最好地解决这个问题，所以不幸地花费了很多时间来处理Webpack和Gulp文件，以使哈希文件名正常工作。

然后，在等待理发时，我阅读了一篇Netlify博客文章，了解到他们如何通过HTTP2实现缓存验证，这真是让我大开眼界。

当你请求一个资产时，他们会在头部发送一个ETag，它是文件的哈希值。还有一个标头告诉浏览器不要相信自己的缓存（听起来有点疯狂）。

因此，当你请求页面时，它会打开一个持久的HTTP2连接（因此文件请求不会建立新连接）。当它到达请求该文件的部分时，浏览器将ETag发送回Netlify，如果ETag匹配，则返回空内容，否则返回带有新的ETag的新文件。没有app.klfjlkdsfjdslkfjdslkfdsj.js或app.js?v=20180112之类的东西，只有一个干净的app.js，它能够立即使缓存失效。太神奇了。

最后，Service Worker可以被添加。由于Netlify的缓存失效系统解决了大部分问题，这一步相对简单。我采用了网络优先、缓存回退的设置，用于资产和HTML。这意味着在线连接的每个请求都是最新的，并且在任何更新之后立即生效。离线连接则会回退到最后缓存的状态。它似乎非常好地发挥作用，如果资产发生更改，则不需要更新提示。

结果

WebPageTest的结果看起来不错。速度指数为456，是Alexa前300,000名网站的平均值的十分之一。

TestMySite.io从CDN边缘节点返回的时间为～2毫秒。Lighthouse的审查结果也非常有希望。还有一些改进空间，比如延迟加载图像和内联CSS。对于第二个建议我不是很感兴趣，但我肯定会考虑使用lazy-loading，尤其是我已经在一些动画中使用了IntersectionObserver。

最令人鼓舞的结果是网站在全球范围内的快速加载速度。大多数Tomango的客户（以及他们的客户）都是非常本地化的，几乎全部在英国。我们在萨里郡有一台专用服务器，为我们的市场提供了相当好的服务。但是，让我意外的是，从美国、澳大利亚和日本的服务器连接速度非常慢。他们等待首字节的时间约为500毫秒，更不用说下载每个资源了。

Hartwell Insurance是美国一家公司，因此将它们放在我们的服务器上，他们的本地响应时间将立即受到严重影响，甚至可能多达数秒。这也是选择Netlify的主要原因之一。他们提供全球CDN托管，无论在世界任何地方，都可以很快地访问网站。

这个项目的开发非常有趣，在生产环境中使用新技术并从中获得实际的性能和可用性好处真的是一种享受。即使是使用经典的将文件放在文件夹中的Web方法时，当你已经使用数据库一段时间后，这也是很有意思的——其中有某种“纯粹”的感觉。

本文最初发布在我的个人网站上