Am I Loading Cloudfront Wrong?

help
1

I’m using the Cloudfront CDN. My understanding is that that should a) take a load of my Galaxy server and b) make things load faster because they are closer to the client.

But Lighthouse is saying it’s taking 800 ms of main-thread blocking time, to get the files from Cloudfront:

Screenshot 2024-02-20 at 12.38.03 AM
Screenshot 2024-02-20 at 12.38.03 AM2150×1398 317 KB

Running in an Incognito window as Lighthouse recommends, the overall Lighthouse score is 77, which is pretty good. And for all I know, if I was serving those same files directly from Galaxy, the speed would be the same.

Here’s how I’m loading Cloudfront:

if (Meteor.isProduction) {
    WebAppInternals.setBundledJsCssUrlRewriteHook(
        url => `https://abcde.cloudfront.net${url}&_g_app_v_=${process.env.GALAXY_APP_VERSION_ID}`
    );
}

Is that the correct current way to access Cloudfront?

2

Hi there,

I use CloudFrond CDN and I can confirm I don’t have this problem. The way you get your CDN bundle seems correct (if you host app with Galaxy).

What crosses my mind …

  1. If you just pushed a new code bundle and never opened a client, the first fetch comes from Galaxy via CDN. You query the CDN but the CDN doesn’t find a file and it goes to the Origin (Galaxy) to get it and cache it. This takes time.
  2. If you opened a client already and you know the bundle files should be in the CDN you can open your webapp in Chrome, go to Network tab in Developer Tools and check on your JB bundle file if you have Hit from Cloudfront. If you have Miss all the time the configuration is probably wrong and the CDN keeps going to the Origin to get the files.

Check the time it takes to get those 700k from CDN

Screenshot 2024-02-20 at 11.52.03 AM
Screenshot 2024-02-20 at 11.52.03 AM1362×134 28.3 KB

Example of Hit from Cloudfront (5th line from bottom up)

Screenshot 2024-02-20 at 11.52.34 AM
Screenshot 2024-02-20 at 11.52.34 AM664×570 65.6 KB

3

Okay, I have Hit from Cloudfront:

Screenshot 2024-02-20 at 9.49.56 AM
Screenshot 2024-02-20 at 9.49.56 AM3276×1286 403 KB

If I’m reading this section in the Network tab->Timing correctly, it loaded in 68.67ms, about the same as what you showed:

Screenshot 2024-02-20 at 9.49.29 AM
Screenshot 2024-02-20 at 9.49.29 AM3280×1070 225 KB

What part of Chrome devtools did the first image in your post come from? I’m not finding it yet for some reason.

So this seems good. It seems to be showing about 70ms instead of the 800ms Lighthouse is talking about. If you run Lighthouse does it show anything like 800ms?

4

Same as yours, Network tab but you seem to be filtered for the bundle file while I had no filter.

In Lighthouse I have no suggestion/diagnostic for slow files like you had.

5

Okay. Thank you very much for all this great info. It looks like my app is loading from Cloudfront correctly.