Slow download speed for 23 MB static asset (fonts)

site name: firetruck.netlify.app
page with problem: Fire Truck
x-nf-request-id: f98b1730-0928-4524-b57c-41c9e14c6fac-1181600

We have a site that has been deployed to a staging site. But the same site deployed on Netlify is loading extremely slowly (~2 seconds on staging, vs ~15 seconds on netlify). The network tab of developer tools reveals that the initial download of font file is the cause. The TTFB is fine.

Because we can compare between the staging site and the version deployed on Netlify we are wondering if there is something about the Netlify CDNs that is causing the delay.

We’d be grateful for anything you can tell us about the cause of the slow download, and how to improve it.

We are already investigating how to reduce the size of that file, but we are still amazed at the difference in performance. FWIW we’d consider paying for Pro tier if that helped.

I’d attach a HAR file but can’t see how to :frowning:

Well, I just checked the Network tab and the only fonts I found are being loaded from Google Fonts. There don’t seem to be any fonts that you’re hosting on Netlify.

It’s the ArielUnicode.ttf

Forgive me, I’m helping an artist deploy their work for an exhibition, so I’m not familiar with the structure. How can you tell it’s a Google Font?

And still I don’t understand why the download time for that file would be different when the main code is deployed on Netlify when compared with the staging site. We’re talking 20+ seconds on Netlify vs 2 seconds at the other location.

I don’t see it. This is all I get:

The address says so:

Sorry, my bad. You need to click the arrivals board :slight_smile: Welcome to our art :slight_smile:

This is the URL: https://firetruck.netlify.app/arrivals_board

I’ll correct the original post

Okay, got it. It’s a 23.3 MB file, so, no wonder it takes time to download. To me, it took 1.6min:

If I may ask, why is this font so heavy?

The possible reason for slow speeds on this file is that, Netlify probably doesn’t cache files over 3 MB and it’s not optimised to serve large files (I had read something along the similar lines on a thread here). Even my videos take long time to buffer on Netlify. So, the only solution that might work is to get the file size below 3 MB (it would be even better if its lesser than that) or use some other font, etc. The ideal size of a font file is something around 30 - 50 KB. I personally haven’t used anything heavier than that.

I dont have complete control of this codebase so unfortunately I cant tell you about choices the author made.

What would be our options if we cant do that? As I said, I dont have complete control of this codebase. But I’d really like to host it on Netlify for them.

Can we pay for a different tier? Can we put it on a different CDN? Something else?

I’m not 100% sure if that’ll help. You can wait a little more till you get an official answer from Netlify regarding that (and the entire explanation about serving that type of file). I think @fool can answer that.

Till then, you can probably try using some direct link provider like Dropbox to serve the file. In any case, it’s a 23 MB file. So, even if you choose a different server that’s faster that Netlify, the user is going to have to spend some time to download the file and you probably can’t expect it to work within a few seconds as it depends on the user’s network speed.The user who has superfast internet that can download 23 MB in maybe 2 to 3 seconds (and the server you choose supports that much speed per user), he/she will see the webpage faster than the ones who have slower internet.

Odi-robot, 23 mb is extremely large for a font file - i would expect a font file to max out at a couple of hundred kb - and even that would be very high. I haven’t, in 20+ years of building websites :), heard of a font file being more than that, more likely in the <50kb realm. It might be worth investigating if this is really as intended.

Our service is designed to deliver smaller assets that are typical of modern static websites extremely quickly, but the compromise is that larger files can be slower to deliver as they are served differently.

While we have some options that allow certain performance improvements, which you can take a look at here: https://www.netlify.com/pricing/ if you’d like, I can get you in touch with a sales engineer to discuss potential pricing and you can see if this feels competitive?

I do appreciate that it’s large. As I said, the coder is working on the size of the font file. But I don’t have complete control of these things and a tight exhibition deadline. I will also have another artwork to deploy that uses images and sound in a dynamic way, that might suffer from a similar problem, so I need to understand my options. I’d really like to use Netlify because it’s always Just Worked, but perhaps in this situation I’ll have to try something else. I need to know my options though before I make that decision.

Also… I’m a curious developer/engineer who likes to know how the internet works, cos at the moment my internal mental model is broken :slight_smile: Could you share in what way larger files are served differently?

I had already checked the pricing options page but i couldn’t parse whether the pro version would solve my problem. Other support threads suggest we only get the better caching features with Enterprise level and we’re just a not-for-profit organisation.

What I need is an advice about whether we can (and how to) achieve what we need, within the time/budget constraints we have, given your experience - knowing what other solutions people have found using perhaps a combination of technologies.

Well in that case, I’d suggest you to have a look at Netlify Large Media: https://docs.netlify.com/large-media/setup/. I haven’t used it personally, but, I guess it is meant to serve these large files with high speed and thus, might solve the problem of the files downloading slower.

I know you don’t have control over the code, but, if time permits, try suggesting a page rendering logic change so that the page works fine even without these large files downloading completely and once they’re downloaded, they take their place. Because as I said before, if you’re going to wait for large files to download to actually display the website’s contents, it would be a really bad user experience for someone with not so fast internet connection.

As far as I can tell Netlify Large Media is more about version control of large files, so that they dont bloat the git repo history. If i understand correctly, netlify in this case is used to store the large files for retrieval by git, but not serve the files.

If that’s the case, you’re probably out of luck.

So, if you anyhow want Netlify to serve those files, you’d probably be better off with what @perry suggested then. You can get in touch with a sales engineer and discuss it further.

@odi-robot to answer your question about “served differently”: the way our CDN works is that it caches your site assets in nodes around the world. When you’re using our CDN, the idea is that your site visitors get your site from the node closest to them- so someone in Paris will get the site from a different node than someone in Dhaka. But assets that are too big to be cached at the node or that fall out of cache quickly are stored in our backing store in San Francisco. So requests for those assets travel from the requester’s location to SF, increasing the round trip time + download time for a big file. This will unfortunately be a problem for your site :frowning: We are discussing architectural solutions to this internally, but nothing that will ship in time for your exhibition. I know it’s not great news, but hope this at least helps the mental model :slight_smile:

A different price tier won’t help. Arial is a pretty common font… maybe you could load it or a similar one from Google fonts (i.e., https://fonts.google.com/specimen/Lato?query=lato&sidebar.open=true&selection.family=Lato) and get better performance that way?

We are seeing similar results. In our case a 660 kb file is taking 30+ seconds to download across multiple connections and locations. TTFB is okay, but the download speed is horrendously slow.

x-nf-request-id: 2ebf9151-290b-4a23-8e8e-5945258eef2c-36320485

We generally like Netlify, but for a static site service it seems bizarre that they are so slow to serve static files?

hi @holm, that’s definitely not what we would expect! a 660kb file should download quickly from any location if everything is set up correctly.

we’ll get someone to take a look and see if we can advise further.

This is of great concern to us currently. We are finalizing the site for launch next week, but with these speeds the site is bordeline unusable.

We can see there was an issue with the CDN in Frankfurt the day our problems seems to have started, https://www.netlifystatus.com/incidents/xpd9b8c1lwjv, but that is reported as fixed. It does raise suspicions however since we are based in Europe.

Curiously this seems to affect json files more than other types of files, but that doesn’t really make any sense to me.

Hiya @holm and sorry to hear about the continuing poor behavior.

While the file in your request is not 660kb, but 3040kb, that still shouldn’t take almost 20 seconds for us to send as it did in your quoted request_id. However, due to that size, it doesn’t cache super well on our CDN - it will be forced out pretty quickly at your traffic levels by other, smaller and more frequently requested files. Fetching it to cache will be slow at that size; smaller files are fetched rather faster. It will not typically be as slow as on the day you gathered that request ID, but yes, we average around 500ms in serving your sites’ files from request received to last byte sent.

When the requests are in cache, we average around 30ms serving them (again, working with your site’s specific data, looking over the past 2 days). That is about 11k of your 24k requests over that time period. We can see that in general, your cached response size on average is about half of the uncached response size; we do cache smaller files better.

Generally speaking, sites that are in broader use will be in cache more often and thus serve faster. I understand that the performance may not be acceptable to you, but hopefully that transparency into is what our system is doing lets you make the right decision for your business.

Same here.

Waiting 700ms of TTFB and 2.44s of content download for a 822Kb js file. This is not acceptable for a smooth UX.

x-nf-request-id: 2b1d4809-10f9-40d2-b4e2-0c2446118dd3-29656008

Hi

There must be something wrong with your logging system. The file is definitely not 3040kb.

Attached is the loading time for the file of 660kb. Even if this is somehow 3040kb as you claim, it is still completely unworkable for us.

To be frank I think there is something wrong with your monitoring system, or you are not measuring the delivery all the way down the pipe. Files on Netlify are just generally dreadfully slow for us. It doesn’t make a huge difference for small files, but for just slightly larger files, it becomes unusable.

It’s not that I don’t understand the concept of caching, hit rates, CDNs and edge nodes. But I have never in my career seen a CDN with this poor performance.