Dennis H. Lewis shows how to find and remove extra fonts slowing your Bubble app. Use Chrome DevTools to see what's loaded, then export your app as XML and search for font names to find where they're referenced. Stick to one or two fonts max.
Questions this video answers
Network → Font filter in Chrome DevTools.
Settings → General → Export Application (downloads an XML file).
A 48 megabyte XML file (example from one app).
One is ideal; two is acceptable (avoid more).
Chapters
Dennis. Hey, I'm Dennis Lewis from Ratio.dev and I am back with another video about bubble and how to make your bubble app go just a little bit faster. What I want to talk to you today is about fonts, typefaces. A lot of bubble developers don't realize that every font that you use in your application, even once in one page remote forgotten somewhere in your application, means that bubble is going to load that font on every page that it loads. It's just the way bubble's built. So I have literally audited bubble websites before, where they have 5, 10, 15 different fonts being loaded on every page load. And if that takes 100 milliseconds for each one of them to load, then you can do the math that can add up to half a second, a second, two seconds of that additional page load speed just due to fonts. So I was going to dress up with my raincoat and a cigar today and be Columbo for you. Columbo is my favorite TV detective of all time. So it's an honor to be Columbo for you today and help you discover how many fonts are actually being loaded in your bubble application and what's the secret to fixing them. And how do you find that? Okay, because there's a lot of sleuthing that we're going to have to do. So the first thing I'm going to just show you is how to use the Chrome developer tools to see what fonts are being loaded on your pages. So this is option track. It's one of our applications. And I am just going to go to the View developer and developer tools. And when I do that, you're going to see that it's going to open up down here, this section of the developer tools from Google Chrome. And what you want to do is go to Network and then you want to reload the page. Okay, so you're going to click on the reload button and that is going to reload your whole page. Now, normally you'll see that you're in all and you'll see everything that's being loaded into your page. And there's a lot of stuff that you could dig into here to figure out and help make your bubble page load speeds better. But in this video, we're just going to click on this button called font, and we're going to see that this application has exactly one font being loaded, which is the Google enter, which is a good sign. One font is perfect. You've got to have one. So one is great. Two it's okay. And I want you to be careful because all of those icon packs that you could, you know, the material icons and all of these icon packs that you can put in with plugins on Bubble and all of this, they all load fonts and they will all slow down your page. So I recommend you just use the basic application font that you're going to pick, one, two at the most, and don't let there be anything else. So just if you're going to use icons, use the native bubble icons. They're not great, they're not awesome, but they won't slow your app down. So once you've seen that, that's a good case. So I'm going to now show you another application which isn't a bad application. But you can see now this one has four different fonts. Nunito Sans, Nunito, Lato, and another version of Latto. So now they've got four there and they probably aren't even using two of them. So I would suggest that they should clean this up and go find where those fonts are being used on their application and change them back to the same basic font that they're using everywhere else. But that's a big question. Where are the fonts? It's not easy to do. In fact, this is where I get to be Columbo. Bubble doesn't give us any way to say, find me this font. If I go to the find up here and search by, I can find a whole bunch of stuff here. But font isn't one of them. So how do I find where that font is being used? Because sometimes it'll be a plugin that you've installed that brought in, you know, that's using a font that you didn't put onto your application. Or it could be just, you know, some random field somewhere that you're not using styles and you happen to choose the wrong font and now it's getting loaded on all your pages. So how do you discover where these are? Well, I'm going to have to confess that this isn't going to be fun. It's a pain in the derriere, as I should say, to be nice to the tube algorithms. It's a pain in the ass for the rest of us. What you have to do is come into your settings and you're going to go to the General tab and you're going to scroll down.
Here, you're going to go to a button called Export Application, click the button, it's going to open it up here and it's going to download to your computer an XML file that defines everything about your bubble application. This is actually what the bubble builder is building. It's building this XML file and then they have the backend of bubble interprets this XML file to create your application and, you know, show it to the web. So here comes the nasty part. You're going to have to open this up in a text editor. Okay. And this may be, you know, in the case of the one I just downloaded, it's still downloading. Just to give you an idea, it's going to be megabytes big because it's a big application and it's got lots of stuff going on and it's going to be a humongous text spike and you're just going to have to take the name of the font and do a search for it and then look around what's going on around that, where it has that font to figure out where it is in your app. Is there a field really close by that you remember the name of? Well, maybe that's where it's coming from. And then you go back into your bubble application and you go to that field that you kind of saw that was close by and you find the one that's got the font and you change it and then you go look for the next one. And yeah, I'm, you know, it's not fun and it's not quick, but that's the only way to do it. And by the way, this was a 48 megabyte XML file that it downloaded from Zorgos. I wish there was a better way to do this, but this is the only way I've discovered. But it will work. And you roll up your sleeves, you do the grunt work and you will find all of those little text fields or text elements or whatever they might be out there that is using a font that you didn't realize it was using. You fix it and finally you'll get down to that wonderful situation where you only have one font being loaded and your page load speeds will benefit from this. So if you were looking for a magic bullet, unfortunately today the no code wizard couldn't provide it. It's just good old fashioned work. But nobody said that no code was no work. So I hope you've enjoyed this video. I hope this helps you find the hidden fonts in your application and get rid of them and see you in our next video.
