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?
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))
})
Just saw your post on the cloudflare forum. Thanks for trying.
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.
@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.
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.
Sorry for digging the old post but wanna see if you guys find any solution?
I am using Cloudflare PRO and turned on the image resizing & polishing. And of course, I use the Cassette - My cached Assets so now all my images and some of the JS are cached in my subdomain images.deanlong.io now.
However, like what @J8kes mentioned, I can only see some of the image are poshlied and non of the image got resized.
In the Cloudflare dashboard, it shows “Origin returned 404 HTTP status code”.
Hey @dean010 I haven’t had any luck. After a while, most images start getting cached, but here and there there’s still an image that just won’t work. I got the cassette paid plan to cache some other scripts etc as well and even with a paid plan I’ve logged multiple support requests and have never received a response from the support team. I’ve even tried to hire a Cloudflare freelancer to build my own Worker to do this and they were never able to figure it out either.
I had the same experience as @J8kes. I have put some time into it, played with the settings but never got it beyond caching/resizing some images and failing with others. Can’t find a pattern as to why.
Without any indepth support from Webflow and/or Cloudfront I don’t see any solution to this when the site is Webflow hosted. I choose to cancel Cloudfront for my sites as I fear that this implementation might cause problems at some point.
The issue with Cloudflare and Cassette missing some images was not related to multiple different Webflow CDN URLs. The images were missed because of Webflow generation responsive images for different breakpoints. So as the final step of caching your site on Cloudfalre with Cassette you need to use the DrFlare plugin, idently images that aren’t being proxied and turn off responsive for that image or images.
Select the image on the Webflow canvas
Type Command + Shift + O (on Mac) or Control + Shift + O (on Windows)
The caveat here is that Webflow is no longer generation responsive images, so you could use Cloudflare’s Image Resizing to do that on the fly, or create a Desktop and Mobile version of the assets on a page if Cloudflare and Cassette isn’t caching the images and you want a really small one on mobile and feel the non-responsive version is too big or tests poorly on PageSpeed.
