CDN Advice if your site is slow to load

Support
1

I load various libraries like tailwinds or v-calendar from unpkg.com and recently learned an important lesson regarding this I thought was worth sharing…

I have a BetterForms site that would occasionally seem to not load at all. Often if I refreshed the page, it would load as expected. It was an intermittent issue, so it took a while to pinpoint. Eventually, I noticed that resources from unpkg.com could take 10 seconds or more to load and they would block the page while loading. If you read about their Cache Behavior, you’ll see that if you don’t specify a specific version by number, then it will redirect to one and the redirect is only cached for 10 minutes by the CDN and 1 minute by the browser. In contrast, a specific version is cached by the browser for a year. So I was able to resolve this issue by changing this:

<script src='https://unpkg.com/v-calendar@2.1'></script>

to this:

<script src='https://unpkg.com/v-calendar@2.1.5/lib/v-calendar.umd.min.js'></script>

The down-side is that I now have to manually update this url to get the latest bug fixes. I subscribed to github release notifications for all libraries I made this change to, so I would at least know when new versions came out and could know to change the url in my BetterForms site, if I thought I needed the new version.

3 Likes
2

This is great Dan, thanks. We have seen this before too

We are also looking at other optimizations where if a CDN is not needed prior to app load, it can be loaded slightly afterward. Eg payment gateways will never start with the payment gateway open so they can be loaded AFTER the rest of the site.

We will add this reference to the docs also.

3

I should add, one other thing you can play with is combining CDN’s into one download.

CDN jsDeliver does not have every library, but does have the ability to combine into one package.

BF has code that injects the Header tags and this could benefit from the combined package.

Let me know if this helps.

c