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.