Optimize documentation load speed and move to Netlify

[Munter]

This ended up being slightly bigger than I first anticipated

Move to netlify

Netlify lets us run our own build system and control out own http headers. This means we can take advantage of automated bundling and image processing pipelines and serve our assets in a more optimal fashion

Netlify will do a build of all pull requests, which means we'll have the ability to preview changes to the documentation and get it speed tested before we merge a PR.

Build system

I have added another build step after jekyll. Now assetgraph-builder runs a post-optimization of the jekyll artefacts and places the optimized build in docs/_dist, which netlify serves.

Assetgraph-builder doesn't require much in changes to the code. In fact the only real changes to the code is where I took advantage of the image pipeline to resize some images and compress them better.

I also adjusted the build system to inline some images that are smaller then ~10kb. This was in order to get the svg logo inlined, but had the side effect of also inlining some screenshots. What exactly gets inlined might be something we should revisit again.

Assetgraph-builder has some optional dependencies for image optimizations that might fails installation on local machines unless some prerequisites have been installed. Installation instructions fr if you want to run a full local build can be found here: https://github.com/assetgraph/assetgraph-builder#installation

Performance optimizations

The build system now scales content screenshots down to the maximum width of the page and I have added pallette reductions on the heavier ones. This yielded around 600kb size reduction

The Opencollect avatars where extremely inefficient in their payload. They were serving base64 inlined unoptimized images inside an svg file. I read up on their api source code and switched over to request avatars in a way that reduced the payload by another 550kb

Switched Opencollect images over to be https only, which takes advantage of them using h2.

Reduced the amount of sponsors to show from open collect. We were just fetching the same 1px image after a redirect for each of the missing sponsor slots

I added general losssless compression on all images which yielded probably another 150kb reduction

I moved most CDN loaded assets to the local project. They are now bundled with the other css and javascript assets, which reduces the blocking of the page while an external CDN is being requested from.

Moved CSS to the top and js to the bottom of the page. Async load all js.

Removed the js loading switch for the logo and tagline. Now a pure css animation.

Removed the js loading switch from the opencollect backers. Their avatar sizes are known up front, so the images can be shown without the page jumping. Added a fallback avatar as background while real avatars load

Added preconnect hints for known external domains.

Added content addressable asset naming and far future expiration cache headers for optimized reload.

Other changes

• Made some slight changes to the outer page scaffold to better accommodate mobile devices
• Changes http: URLs to https: where possible

Speed improvements

Initial paint time of the page has been drastically decreased. On slow mobile connections by more than half, and the full page loads much faster as well.

Here are comparisons before and after on a Moto4G chrome browser on a slow 3G connection:

https://www.webpagetest.org/video/compare.php?tests=171218_G6_08d1b205c2a90d88f488347c47d49dee%2C171220_AZ_66f4eb3fa9c3b2d40e39d1735d1200f6&thumbSize=200&ival=500&end=full

[boneskull]

👍 👍

[boneskull]

@Munter Breaking build is unrelated; see #3171

[boneskull]

@Munter I rebased this onto master so as to hopefully fix the build

UPDATE: screwed it up, doing it again