@Erisa | Support Engineer thank you for your feedback, please tell us how to serve static assets (cs

@Erisa | Support Engineer thank you for your feedback, please tell us how to serve static assets (css/js) from R2 via worker in a way that is fast. What's the official solution here?

We discovered that https://webstudio.is/ is fast on lighthouse and COMPLETELY fails core web vitals specifically because static assets globally are slow (the way we currently serve them), up to 500ms latency

https://pagespeed.web.dev/analysis/https-webstudio-is/pwezpxo8tn

Webstudio

Open visual development for the open web

Similar to Webflow, Webstudio visually translates CSS without obscuring it, giving designers superpowers that were exclusive to developers in the past.

OOleg Isonen @Erisa | Support Engineer thank you for your feedback, please tell us how to ser...

Erisa•2/18/24, 6:47 PM

"is fast" is subjective and hard to make recommendations for, there are many things that can be optimised for that fall outside the control of R2 (e.g. not loading so much JS/CSS, optimizing execution of scripts, all things pointed out on that page)

In terms of serving files from R2, the fastest method is to use the CDN cache either by Custom Domain or by Worker with Cache API: https://developers.cloudflare.com/r2/examples/cache-api/
Yes this will not be as efficient as an external origin with Tiered Cache, however it is the best available with R2 at the moment due to the aforementioned limitations. If the cache is setup fully for all files, the speed will depend on whether the resource is cached in the local datacenter that the user is hitting. The more traffic you get, the faster the site becomes when it relies on cache. Increasing the cache TTL will keep those caches around for longer but increase time to revalidate when you push new updates.

If you are hosting smaller assets you could potentially consider KV or host the whole website on Cloudflare Pages which should be better optimised for web assets. Pages comes with intelligent invalidation of assets when you make a new deploy and has its own internal caching system to keep sites as fast as possible without having a lag to deploy.

There is a guide on choosing a storage product here: https://developers.cloudflare.com/workers/platform/storage-options/

EErisa "is fast" is subjective and hard to make recommendations for, there are many thi...

Oleg IsonenOP•2/18/24, 6:47 PM

I am specifically talking about latency. Globally its currrently up to 500ms waiting for response from the worker that is trying to get the asset from R2.

Erisa•2/18/24, 6:48 PM

Latency from where? For a cache miss or a cache hit? And where is the bucket stored relative to this?

Erisa•2/18/24, 6:48 PM

The page you linked doesn't indicate which parts are waiting 500ms on R2 and when I access the site myself all the assets are HITs and load quickly

Erisa•2/18/24, 6:49 PM

Though I notice the HTML for / is not being cached, if this is not dynamic then you may consider adding rules or code to cache HTML as well

Bbun wdym take to user directly?

pavan5936•2/18/24, 6:50 PM

i meanI want to say that the people with this link may get response so they have saved this link directly in database.

EErisa Though I notice the HTML for / is not being cached, if this is not dynamic then ...

Oleg IsonenOP•2/18/24, 6:52 PM

document is potentially dynamic
check out for example this css resource from different edges, the once close to R2 will be fast, others terrible https://webstudio.is/build/_assets/index-6JJ5GLFW.css

EErisa "is fast" is subjective and hard to make recommendations for, there are many thi...

bun•2/18/24, 6:52 PM

i dont get the idea of revalidating assets when they are going to be different on each deployment anwyay ?

OOleg Isonen - document is potentially dynamic - check out for example this css resource from...

bun•2/18/24, 6:54 PM

this is weird ? my browser doesnt cache the asset even though

Cache-Control

Cache-Control

headers are present

OOleg Isonen - document is potentially dynamic - check out for example this css resource from...

Erisa•2/18/24, 6:55 PM

What is the location for that bucket? And as I mentioned it will depend whether the asset is cached or not. When I access it from the UK I get a HIT and it loads in between 40 and 50 ms.
Is there a reason you are deploying these assets to R2 instead of a product designed for website hosting like Pages?

Bbun i dont get the idea of revalidating assets when they are going to be different o...

Erisa•2/18/24, 6:55 PM

What setup specifically are you referring to?

bun•2/18/24, 6:55 PM

his provided css url

EErisa What is the location for that bucket? And as I mentioned it will depend whether ...

Oleg IsonenOP•2/18/24, 6:55 PM

Western Europe (WEUR)

Bbun his provided css url

Erisa•2/18/24, 6:56 PM

What does revalidating have to do with that?

Original message was deleted

bun•2/18/24, 6:56 PM

yeah

EErisa What is the location for that bucket? And as I mentioned it will depend whether ...

Oleg IsonenOP•2/18/24, 6:56 PM

yes there is a reason, we are a SaaS, designed to host milions of sites. consider us ourselves a cloudflare pages.

OOleg Isonen Western Europe (WEUR)

Erisa•2/18/24, 6:57 PM

Testing it from the other side of the world is going to be slow unless cached, this is expected behaviour due to the distance and R2 only storing in a single region currently + not supporting Tiered Cache. The more an asset is requested the more likely it is to be in cache and serve quick.

Or are you seeing slow requests for

cf-cache-status: HIT

cf-cache-status: HIT

? Because that's a whole other question.

EErisa What is the location for that bucket? And as I mentioned it will depend whether ...

Oleg IsonenOP•2/18/24, 6:57 PM

Western Europe (WEUR) explains your fast response, its fast from germany too, but globally it's slow, massively, up to 500ms

Unsmart•2/18/24, 6:58 PM

63ms in Texas for me

EErisa Testing it from the other side of the world is going to be slow unless cached, t...

Oleg IsonenOP•2/18/24, 6:59 PM

the working assumption here is that we simply don't get the cache hit and fetching from origin across half planet, and I am genially at a loss how this is not something that has been long figured out at cloudflare

EErisa What does revalidating have to do with that? 🤔

bun•2/18/24, 7:00 PM

oh i thought you asked about something else.

i was refering to what you said:

Increasing the cache TTL will keep those caches around for longer but increase time to revalidate when you push new updates.

why would it increase time to revalidate if asset (JS/CSS) paths are going to be changed anyway as the name (paths) of those files changes everytime the project is bundled. assuming the index.html containing those asset paths remains dynamic (not cached)

Original message was deleted

Oleg IsonenOP•2/18/24, 7:01 PM

that's not what I am trying to figure out

Bbun oh i thought you asked about something else. i was refering to what you said: >...

Erisa•2/18/24, 7:01 PM

It won't. If you change the names of the assets then that's perfect. The TTL consideration is one to make mainly when trying to cache HTML pages or assets that don't change filename.

Original message was deleted

bun•2/18/24, 7:03 PM

its super weird. only firefox seems to cache out of chrome and safari

Oleg IsonenOP•2/18/24, 7:04 PM

@Erisa | Support Engineer if that helps here is what the worker logic looks like that serves that css file, see the /build/ branch

https://gist.github.com/kof/914c593049325eda72b25ad392737647

Gist

dynamic dispatcher

dynamic dispatcher. GitHub Gist: instantly share code, notes, and snippets.

Erisa•2/18/24, 7:05 PM

env.STATIC_ASSET_CDN_ORIGIN

env.STATIC_ASSET_CDN_ORIGIN

an R2 public bucket with Custom Domain?

OOleg Isonen @Erisa | Support Engineer if that helps here is what the worker logic looks like...

bun•2/18/24, 7:08 PM

i dont see u using caching here. i believe you can just add

cf

cf

properties to the

fetch

fetch

request

EErisa Is `env.STATIC_ASSET_CDN_ORIGIN` an R2 public bucket with Custom Domain?

Oleg IsonenOP•2/18/24, 7:08 PM

correct

Ivan Starkov•2/18/24, 7:09 PM

It's cached by default fetch behavior it's seen with

Cf-Cache-Status: HIT

Cf-Cache-Status: HIT

header

Original message was deleted

bun•2/18/24, 7:11 PM

yeah but does it retrieve the response from disk cache or still make a request?

bun•2/18/24, 7:15 PM

wdym both? it should display (disk cache) if it actually retrieves the asset from chrome cache

bun•2/18/24, 7:15 PM

why doesnt it do the same for

favicon

favicon

? maybe its because content-type is not provided for this css asset? its still odd. i dont see this behaviour for traditional websites network request flows

Original message was deleted

Oleg IsonenOP•2/18/24, 7:17 PM

that's interesting and I am just

how it can be an unsolved problem out of the box in a straight forward way, because its not like I am trying to shave off 20ms, I am talking real shit-show slow, 500ms in many edges means we are not passing core web vitals "because we are serving static assets too slow" and that's a crazy problem to have in 2024

SSoulHarsh007 👋 I am using rclone to upload files to my s3 bucket, and today I found this ver...

dave•2/18/24, 7:17 PM

If possible, I really recommend everyone avoid multipart uploads.

OOleg Isonen that's interesting and I am just 🤯 how it can be an unsolved problem out of the...

bun•2/18/24, 7:21 PM

i get 10 ms for that css

Ddave If possible, I really recommend everyone avoid multipart uploads.

SoulHarsh007•2/18/24, 7:21 PM

Yep, I reuploaded the file without multipart, because one of our tooling depends on the etag being md5sum ^^

Bbun i get 10 ms for that css

Oleg IsonenOP•2/18/24, 7:21 PM

that's nice, must be a cache hit, though even with cache hit its usually 50ms, you must be living in the datacenter or you are testing it wrong

Oleg IsonenOP•2/18/24, 7:22 PM

150 is more like it when its not too far away from european R2

Oleg IsonenOP•2/18/24, 7:23 PM

150ms with cache hit is a s..t show as well in my opinion

Erisa•2/18/24, 7:24 PM

That will also heavily depend on the internet connection and routing quality of the individual requesting it. For example I would probably get 150ms if I used my phones mobile data or had an ISP with poor quality peering

Erisa•2/18/24, 7:25 PM

There are two ends of every connection

EErisa That will also heavily depend on the internet connection and routing quality of ...

Oleg IsonenOP•2/18/24, 7:27 PM

you can compare with this static file to see clear difference https://eu.posthog.com/static/array.js

Unsmart•2/18/24, 7:28 PM

thats exactly the same speed for me on cache miss and cache hit from texas

(compared to yours)

Oleg IsonenOP•2/18/24, 7:29 PM

actually this one seems doing well https://cdn.jsdelivr.net/npm/psl/dist/psl.min.js

Unsmart•2/18/24, 7:29 PM

cloudflare seems to do much better when cached though the posthog aws one seems to have higher end latencies when refreshing multiple times

Original message was deleted

Oleg IsonenOP•2/18/24, 7:29 PM

that would be an acceptable performance to me if its globally in that range, I am talking really 500ms bad globally, not trying to shave off 20ms

bun•2/18/24, 7:31 PM

bun•2/18/24, 7:31 PM

its like 200 ms

bun•2/18/24, 7:31 PM

globally

Bbun Click to see attachment

Oleg IsonenOP•2/18/24, 7:31 PM

what resource are you going for with this test, the document? we are discussing static asset, e.g. this one https://webstudio.is/build/_assets/index-6JJ5GLFW.css

@Erisa | Support Engineer thank you for your feedback, please tell us how to serve static assets (cs

Similar Threads

Similar Threads

Similar Threads