Hartwell 保险

我们刚刚为 Hartwell 保险 发布了一个全新的网站 – 我为此感到非常自豪。它采用了一种与以往 Tomango 网站构建方式不同的方法，使用了各种新的工具和一些经典的 Web 标准。

这是一个多页面、单页面 (!) 网站，使用 Hugo 编写，Hugo 是一个静态站点生成器，其首要特性是性能。如果您有兴趣，我在此处 概述了 Hugo 和静态站点的许多优点。

本质上，静态站点生成器将整个站点预渲染为 HTML 文件，并像 1995 年那样提供服务。

没有 Apache 或 Node 后端在运行时进行编译，所有操作都在构建步骤中完成。这意味着服务器（在本例中为 Netlify）只需要做一件事 – 提供文件。毫不奇怪，提供简单的文件非常快。

起点是 Netlify 创建的 Victor Hugo 存储库。它让我可以深入了解 Hugo、PostCSS、Browsersync 和 ES6，而无需自己设置任何工具 – 这始终是一个胜利！

然后，我从设计文件中提取所有内容，并将它们移到 Markdown 中，并在必要时放置短代码。此站点确实需要许多自定义短代码，用于诸如扩展的圆圈和全宽背景之类的演示元素。但大多数情况下，它只是干净的、语义化的 HTML，并添加了一些 CSS 和 JS 增强功能。

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

对于部分标题上的波纹效果，我使用 JS 预先添加了一个 <canvas> 元素，然后使用 RequestAnimationFrame 为其添加动画效果。它在页面上添加了一些不错的运动感。

在 Hartwell Profitmaker 部分，我曾考虑使用 Vue.js 作为计算器，但在仔细考虑之后，我决定用原生 JS 进行编码。结果，所有站点 JS 的大小只有 3.2KB！

计划是使用 Netlify 托管，从而访问 Netlify 表单。这意味着在设置后端上花费 0 分钟 – 我可以完全专注于前端。

缓存失效通常不是我在构建站点时花费太多时间考虑的事情。但由于该站点将成为渐进式 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 都选择了网络优先、缓存回退设置。这确实意味着不稳定的速度依赖于页面连接时间，但考虑到我们使用的是 HTTP2，我希望持久连接和极小的 ETag 大小能够使其保持快速。对于在线连接，每次请求都是最新的，并且在任何更新后都会立即生效。脱机连接会回退到每个资产的上次缓存状态。它似乎工作得非常好，并且如果资产发生更改，则无需更新提示。

---

结果

WebPageTest 的结果看起来不错。速度指数为 456，比 Alexa 前 300,000 名的平均得分小 10 倍。

TestMySite.io 从 CDN 边缘节点返回的首次字节时间约为 2 毫秒。Lighthouse 的审计结果也非常乐观。仍然可以进行一些改进，例如延迟加载图像和内联 CSS。我对第二个建议不太感兴趣，但我肯定会研究一些延迟加载，尤其是我已经将 IntersectionObserver 用于某些动画。

最令人鼓舞的结果是该网站在全球范围内的速度之快。大多数 Tomango 客户（及其客户）都非常本地化，并且几乎完全位于英国。我们在萨里有一台专用服务器，可以很好地为我们的市场提供服务。来自美国、澳大利亚和日本的连接到我们服务器的速度慢了多少，确实让我感到惊讶。他们仅仅为了第一个字节就等待了大约 500 毫秒，更不用说下载每个资产了。

Hartwell 保险是一家美国公司，因此将它们放在我们的服务器上，我们实际上会使它们的本地响应时间降低几秒钟。这是选择 Netlify 的主要原因之一。它们提供来自世界任何地方都很快的全球 CDN 托管。

---

这个项目开发起来非常有趣，很高兴能够在生产中很好地利用新技术，并从中看到真正的性能和可用性优势。即使使用经典的网络方法来提供带有文件的目录，当您已经使用动态系统一段时间后，也会觉得很有趣 – 它确实有一些非常纯粹的东西。

---

这最初发布在 我的网站上。