If you're using shoutouts.lol, and you should be if not, I made a few nice changes that handles better image loading, and caching, no matter where you're located.

But first...

Moving away from Cloudflare

A theme for this year is to move away my dependency on Cloudflare. They know what they're doing for sure, but their support is absolutely, shockingly, terrible. That's not for me.

If you've been following along, I moved domain servers (the phone record book for the domain name) over to Bunny.net. It went without a hitch and the transition was smooth with zero downtime to the service. That's how I like to run the show.

Bunny is such a great service, and I really love it. It does a lot of things, which I'll get to in a minute, and they recently added DNS (that phone book record for the web), so I wanted to give it a try. And boy is it nice.

Better CDN handling of images

With using Bunny, I have more oversight and control of what to cache and where with their CDN. I've been using the CDN on my personal website for most part last year already, so I know I can count on it.

My task was to make all images that are served on shoutouts.lol and especially through the embeds, available throughout the globe with the least latency as possible. Images are the largest types of data coming through for embeds.

Enter Perma-cache. It basically stores all files (images in our case), across the globe. It'll load the image from the closest region to you. Go on have a read because I just can't explain it, haha.

It's all very cool to me (and maybe quite boring to you). So now images are permanently cached throughout different storage locations around the globe, with the least latency.

One more image related thing

Images are lazy loaded by your browser, because the normal embed script tells the browser to only load the image when it needs to.

Today I've added a minor tweak to this, which will preload the image, which means it'll "paint" quicker than usual, as the browser already knows about it ahead of time.

I've been doing some random testing, and "perceived" loading is much faster than without it.

If you're using a custom template, with your own markup, you can add the following snippet close to your image tag:

<link rel="preload" as="image" href="{{image}}" />

So that's it?

Yeah, so far. I am planning to play more with perma-cache and allow the embed script to cache the last result. So if shoutouts.lol would ever go down for some reason, it'll have the latest available to you as a fallback.

And what's next?

Not much. I am still planning a theme library as a third section on the site.

To be honest, I want shoutouts to be as simple as possible, so I think this is as far as I'll go... unless you have any nice suggestions?

For example, I was asked to allow ALL shoutouts to be returned, so I added an option for exactly that, so now you can add a ?all parameter at the end of your embed url.

Thank you for using shoutouts. I really appreciate every one of you that's been trying it out, and paying the small yearly ✌️❤️