mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
9cc9bab462
f97826a17 Merge commit '12ecbf4a1b05c2794281f47909c836b1a005bc19' 12ecbf4a1 Squashed 'themes/gohugoioTheme/' changes from ecad8247..fe71e360 aaa7ac214 Ignore .DS_Store files 0e023ca12 Remove comments in showcase front matter f3ba5ac87 Hartwell Insurance showcase 47aefdbda Remove unnecessary duplicated words 612693b4f Some minor language fixes a833ba15b Spelling 5972e70a9 Revert "showcase: Even smaller file" 3479b975e showcase: Even smaller file 2272e0b83 showcase: Reduce image size 718c3c3e5 Spelling 0b954eccb showcase: Pace copy-edits baded8064 showcase: Pace 842c1cedf Add a Showcase copyright notice c5963edaa Update installing 4fa0b0d73 Add link to showcase template d0f303916 Add some showcase guide content c809789b1 Add srcset to the showcase screenshots 49d875904 Start of a template 1153de221 Clean resouerces 69f00df4c Remove the showcases 653ad5bcd Add a simple byline c5342b5e5 Regenerate image after rebase b80669b34 Bump version in config.toml cd5c79c67 Fix an issue where whitespace wrap caused scrollbars on some browsers f00547e98 Add section to the title element aa10defed Iterating on Showcase (#330) 76a0bfbc3 Add some dummy content to some of the showcase pages 66f68964d Standardize showcase metadata 627ffa6d4 Adjust showcase image size on front page cbc3efece Redo some showcase images 054b54cb6 Use .RelPermalink and not .URL 82ba5f1c6 Add resources d1415795b Move showcase items in list view to a template in the layout f34620e90 Tweak details box for mobile df6a0bf24 Include images that changed from the column shift 02036581f Improve showcase single layout 5f7730c89 Improve styling of showcase prev/next buttons a2b2f7731 Remove extra div that was breaking mobile layout of the showcase b172fe5f4 Add block class to to images on mobile so they behave as expected a4ebfec86 Add a proper RSS feed to home page 0524479e0 Move showcase images to proper Resources 0544b57df Convert showcase pages to bundles 8febaab2b Add Showcase to Home page and internal pages 26d1f4542 Fix baseURL in Netlify deploy previews 046497616 Revert "Try to fix the Netlify preview baseURL setup" 80dce17ca Revert "Add some temporary baseURL debug" 8617e8692 Add some temporary baseURL debug 371e56bce Try to fix the Netlify preview baseURL setup 1b70b3f18 Add Netlify CMS to Frontends list d6184e71d Fix menu for "What is Hugo" page 1ae83ad3e Fix mobile menu display so it shows on mid-size displays f60e1f750 Edited slight typo, added "of" 56b906667 Fix typo c5bea5cbd Release 0.36 00539094e releaser: Prepare repository for 0.37-DEV b222cbdf2 releaser: Add release notes to /docs for release of 0.36 e59d1d766 releaser: Bump versions for release of 0.36 9620aa002 docs: Add documentation for smart cropping etc. 91c3801f1 Merge commit 'c305e44f5f081e4436195923a4593e396f07cd49' 8e71ff60b releaser: Prepare repository for 0.36-DEV git-subtree-dir: docs git-subtree-split: f97826a17209fe3e153b7f5bbf69c511e4e13203
69 lines
6.4 KiB
Markdown
69 lines
6.4 KiB
Markdown
---
|
||
|
||
title: Hartwell Insurance
|
||
|
||
date: 2018-02-09
|
||
|
||
description: "Showcase: \"Hugo + Netlify + PWA makes for a rapid website.\""
|
||
|
||
siteURL: https://www.hartwell-insurance.com/
|
||
|
||
byline: "[Trys Mudford](http://www.trysmudford.com), Lead Developer, Tomango"
|
||
|
||
---
|
||
|
||
We’ve just launched a shiny new website for [Hartwell Insurance](https://www.hartwell-insurance.com/) – I’m really proud of it. It was tackled it in a different way to most previous Tomango site builds, using some fancy new tools and some vintage web standards.
|
||
|
||
It’s multi-page, single-page (!) website written in Hugo, a static site generator built with performance as a first-class feature. _I’ve outlined a load of benefits to Hugo & static sites [here](https://why-static.netlify.com/), in case you’re interested._
|
||
|
||
> **In essence, a static site generator pre-renders the whole site into HTML files and serves them like it’s 1995.**
|
||
|
||
There’s no Apache or Node backend that does compilation at runtime, it’s all done at the build step. This means the server; Netlify in this case, only has to do one thing – serve files. Unsurprisingly, serving simple files is VERY quick.
|
||
|
||
The starter point was the [victor-hugo](https://github.com/netlify/victor-hugo) repository that Netlify have created. It let me dive in with Hugo, PostCSS, BrowserSync and ES6 without setting up any tooling myself – always a win!
|
||
|
||
I then took all the content from the design file and moved it into Markdown, putting shortcodes in where necessary. This site did need a number of custom shortcodes for the presentational elements like the expanding circles and full width backgrounds. But mostly it was just clean, semantic HTML with some CSS and JS enhancement thrown in.
|
||
|
||
For example, this two column layout shown below. I used CSS Columns with a `break-after: always;` on the `<h1>`. No multi-wrapper or difficult-to-clear shortcodes, just clean HTML.
|
||
|
||
|
||
|
||
For the ripple effects on the section headings, I used JS to prepend a `<canvas>` element then animated it with `RequestAnimationFrame`. It adds a nice bit of movement on the page.
|
||
|
||
On the [Hartwell Profitmaker](https://www.hartwell-insurance.com/profitmaker/) section, I toyed with the idea of using Vue.js for the calculator, but after giving it some thought, I decided to code in Vanilla. The result, all of the site JS comes in at 3.2KB!
|
||
|
||
The plan was to host with Netlify and therefore get access to Netlify Forms. It meant spending 0 minutes on getting a backend set up – I could focus fully on the frontend.
|
||
|
||
Cache invalidation isn’t normally something I spend all that much time thinking about when building a site. But as this site was going to be a Progressive Web App, invalidating files would be important to ensure the site didn’t appear broken when we made changes. As I was using Victor-Hugo, I wasn’t really sure how to best tackle this and sadly spent far too many hours wrangling with Webpack and Gulp files to try and get hashed file names working nicely.
|
||
|
||
Then; while I was waiting for a haircut, I read a [Netlify blog post](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/) on how they do cache invalidation with HTTP2 and it promptly blew my mind.
|
||
|
||
When you request an asset, they send an ETag in the headers which is a hash of the file. There’s also a header to tell the browser not to trust it’s own cache (which sounds a little bit bonkers).
|
||
|
||
So when you request the page, it opens a persistent HTTP2 connection up (so no new connections for file requests). When it gets to requesting that asset, the browser sends the ETag back to Netlify and they either return nothing if the ETag matches, or the new file with the new ETag. No `app.klfjlkdsfjdslkfjdslkfdsj.js` or `app.js?v=20180112`. Just a clean `app.js` with instant cache invalidation. Amazing.
|
||
|
||
Finally, the [Service Worker](https://www.hartwell-insurance.com/sw.js) could be added. This turned out to be straightforward as the Netlify cache invalidation system solved most of the pain points. I went for a network-first, cache-fallback setup for both assets and HTML. This does mean flaky speeds are reliant on the page connection time, but given we’re on HTTP2, I’m hoping the persistent connection and tiny ETag size will keep it quick. For online connections, every request is up to date and instantly live after any update. Offline connections fall back to every assets’ last cached state. It seems to work really nicely, and there’s no need for an update prompt if assets have changed.
|
||
|
||
---
|
||
|
||
## The results
|
||
|
||
The WebPageTest results are looking good. The speed index is 456, 10x smaller than the average Alexa top 300,000 score.
|
||
|
||
|
||
|
||
[TestMySite.io](https://testmysite.io/5a7e1bb2df99531a23c9ad2f/hartwell-insurance.com) is return ~2ms time to first byte from the CDN edge nodes. Lighthouse audits are also very promising. There’s still some improvement to be gained lazy-loading the images and inlining the CSS. I’m less excited about the [second suggestion](http://www.trysmudford.com/css-in-2017/), but I’ll certainly look at some lazy-loading, especially as I’m already using `IntersectionObserver` for some animations.
|
||
|
||
|
||
|
||
The most encouraging result is how quick the site is around the world. Most Tomango clients (and their customers) are pretty local and almost exclusively UK-based. We have a dedicated server in Surrey that serves our market pretty well. It did take me by surprise just how much slower a connection from the USA, Australia and Japan to our server was. They’re waiting ~500ms just for the first byte, let alone downloading each asset.
|
||
|
||
[Hartwell Insurance](https://www.hartwell-insurance.com/) are a US company so by putting them on our server, we’d be instantly hampering their local response times by literally seconds. This was one of the main reasons for going with Netlify. They provide global CDN hosting that’s quick from anywhere in the world.
|
||
|
||
---
|
||
|
||
This project was such a blast to develop, it’s a real pleasure to put new technologies to good use in production, and to see real performance and usability benefits from them. Even using classic web methods of serving folders with files is fun when you’ve been databasing for a while – there’s something really ‘pure’ about it.
|
||
|
||
---
|
||
|
||
_This was originally posted on [my website](http://www.trysmudford.com/perfomance-wins-with-hugo-and-netlify/)_
|