Streaming live at 10am (PST)

Cloudflare caching and performance features not working on Assets (assets.website-files.com)

Hi there,

Hoping someone here has some experience with Cloudflare. I’m really trying to squeeze every ounce of speed out of a project with Cloudflare. Got a Pro account and also added the Argo addon, but I can’t cache or use any of the performance features on anything stored on assets.website-files.com as it’s not part of my domain. I read something about Cloudflare Workers but have no idea how that works. Has anyone managed to get images etc stored in assets.website-files.com to run through Cloudflare?

Any help would be much appreciated.

1 Like

The assets are on a Cloudfront CDN which is already optimized for delivery. I fail to see how anything could be gained by using Cloudflare in this case, and it would not be possible since you don’t own the domain. I have used Cloudinary to fetch assets and optimize / serve them for a site but that was a pain with Webflow hosting. Easy off site.

Well apart from the usual caching on Cloudflare there are other features like compression and resizing on the fly to match the user’s screen size and whatnot.

I did manage to dig this up for Cloudflare Workers, but not sure how to customise it:

/**
 * An object with different URLs to fetch
 * @param {Object} ORIGINS
 */
const ORIGINS = {
  "starwarsapi.yourdomain.com": "swapi.dev",
  "google.yourdomain.com": "www.google.com",
}

async function handleRequest(request) {
  const url = new URL(request.url)
  // Check if incoming hostname is a key in the ORIGINS object
  if (url.hostname in ORIGINS) {
    const target = ORIGINS[url.hostname]
    url.hostname = target
    // If it is, proxy request to that third party origin
    return await fetch(url.toString(), request)
  }

  // Otherwise, process request as normal
  return await fetch(request)
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

Hi, I just ran into the same problem.

Did you find any way to get it to work?

@MaximTraxel tried briefly and then gave up, sorry.

Just saw your post on the cloudflare forum. Thanks for trying. :slight_smile:

To sum it up: There seems to be no (easy) workaround without hosting the images on a controlled domain. The problem being that assets point to assets.website-files.com.

Pretty much, then there’s the fact you have all kinds of issues if you want to use responsive sizes on the images and they’re hosted elsewhere and just embedded in Webflow. It’s a pain.

I have used Cloudinary to handle optimization and automatic responsive images. The only drawback when done on Webflow is you have to use embeds and editors would have no access.

For my own portfolios I am building on Wordpress with the Cloudinary plugin. Clean and easy.

I’ve found a possible solution:

Go to your Cloudflare Website Dashboard > Apps > Use the app called “Cassette - My cached Assets”

This app deploys a worker that will change any asset domain to a custom subdomain of your choice.

For example:

Assets Subdomain:
images.yoururl.com
Object Storage Host:
uploads-ssl.webflow.com

It works and serves the images from my custom subdomain now but I still can’t seem to get the image optimization to work so far. Hmm.

@MaximTraxel This is great, if I use the DrFlare plugin I can see that at least some of the images are being optimised. Not quite sure why some are not, but hey, still pretty good. Can you see the Worker they say they install? I can only see the cname change Cassette makes but nothin under workers.

No luck on seeing what they actually do with the Worker.

It took some time, but my images are now also optimizing through cloudfront and served as .webp.

How’s it going with the caching of you images. Had mine running the whole weekend, but checked now and looks like almost everything now has Polish etc running, but the hero images are still not being cached.