Hartwell Insurance
hartwell-insurance.comHartwell保险公司是一家专门为经纪人社区服务的保险公司。
通过结合 Hugo 、 Service Worker 和 Netlify ,我们实现了令人难以置信的全球站点性能。
该网站由 Tomango 构建。

我们刚刚为 Hartwell Insurance 推出了一个闪亮的新网站——我真的很自豪。它与之前大多数Tomango网站的构建方式不同,使用了些新奇的工具和一些经典的网络标准。
这是一个多页面(!)单页面网站,使用Hugo编写,Hugo是一个静态网站生成器,其性能是其首要特性。如果您感兴趣,我已经在此处 here 概述了Hugo和静态网站的大量好处。
本质上,静态网站生成器会将整个网站预渲染成HTML文件,并像1995年那样提供服务。
它没有在运行时进行编译的Apache或Node后端,所有这些都在构建步骤中完成。这意味着服务器(在本例中为Netlify)只需要做一件事——提供文件。不出所料,提供简单的文件非常快。
起点是Netlify创建的 Victor Hugo 存储库。它让我能够使用Hugo、PostCSS、Browsersync和ES6,而无需自己设置任何工具——这始终是一个优势!
然后,我从设计文件中获取所有内容并将其移动到Markdown中,在需要的地方添加短代码。这个网站确实需要一些自定义短代码来呈现诸如扩展圆圈和全宽背景之类的元素。但大多数情况下,它只是干净的、语义化的HTML,添加了一些CSS和JS增强功能。
例如,下面显示的这个两列布局。我在 <h1>
上使用了CSS Columns和 break-after: always;
。没有多包装器或难以清除的短代码,只有干净的HTML。
对于章节标题上的涟漪效果,我使用JS添加一个 <canvas>
元素,然后用 RequestAnimationFrame
对其进行动画处理。它为页面添加了一点不错的动感。
在Hartwell Profitmaker部分,我尝试过使用Vue.js来制作计算器,但在考虑之后,我决定用Vanilla代码编写。结果,所有网站JS加起来只有3.2KB!
计划是用Netlify托管,因此可以访问Netlify Forms。这意味着在设置后端上花费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 Insurance 是一家美国公司,因此将它们放在我们的服务器上,我们将立即通过几秒钟的时间来阻碍它们的本地响应时间。这是选择Netlify的主要原因之一。他们提供全球CDN托管,在世界任何地方都很快。
这个项目开发起来非常有趣,将新技术用于生产并从中看到真正的性能和可用性优势,这是一种真正的乐趣。即使使用经典的网络方法来提供带有文件的文件夹也很有趣,因为您已经使用动态系统一段时间了——它确实有一些纯粹的东西。
这篇文章最初发表在我的 网站 上
Improve this page