Feature Friday: AWS S3 backends, smarter images, and Squarespace support

TGIF! We recently released Fly’s open source CDN. It’s a powerful CDN built specifically for developers. Written in TypeScript, it’s an edge application that routes requests to different backends and enhances them with middleware. You can use it right out of the box, or fork it and make it your own.

This week, we added a few things…

1000% more Keanu

Did you know Keanu Reeves designs and sells motorcycles on a site hosted by Squarespace? Did you know the motorcycle pictures are huge and noticeably slow the site down?

Lots of Keanu-like folks are in the same boat, so we built some libraries to help speed up Squarespace sites. Here’s what a CDN for Squarespace might look like:

import { backends, middleware, pipeline } from "@fly/cdn"; const origin = backends.squareSpace({ subdomain: "archmotorcycle", directory: "/", hostname: "www.archmotorcycle.com" }); const mw = pipeline( middleware.httpsUpgrader, middleware.autoWebp, middleware.httpCache ) fly.http.respondWith(mw(origin));

This example creates an origin that points to a Squarespace site and adds some middleware, including the new WebP encoder.

Automatic WebP image encoding

This middleware automatically serves WebP encoded images, but only for devices that support image/webp. Use it to serve images more efficiently and reduce page load time.

Client devices are generally pretty good about telling servers when they can handle special formats with Accept headers. Here's what Chrome sends when it makes a request:

text/html,...,image/webp,image/apng,*/*;q=0.8

This says “hey we prefer image/webp, if you don't have that try image/apng, and if you don't have that just send us whatever. We can use this to do some magic with logic like this:

• Check the request’s Accept header to see if a client can handle image/webp
• Look for a WebP version of the URL in the cache
• Retrieve response from backend/origin
• Check the response’s Content-Type for image/jpeg or image/png (both can be re-encoded as WebP
• If WebP is acceptable, and the response is an image, re-encode it as WebP and store it in the cache.

Pull from AWS S3 Buckets

S3 is a really handy place to put files. The awsS3 backend type lets you grab files from S3 buckets and send them to users. Even better, it supports private buckets!

If you have a bucket full of images, this works especially well with the autoWebp middleware.

Squarespace support

The new squarespace backend type lets you route requests to Squarespace and modify responses before they are sent to visitors. Use this if you want to mix-and-match Squarespace sites with other services.

Next up? It’s open source — <your idea here>

Want to make a CDN that supports your favorite service? Know JavaScript? It’s pretty easy to add backend types. You can see in-progress issues on GitHub. Feel free to jump on in, or chat with us and we can help you get going.

Originally published at fly.io on January 18, 2019.