Hey Bubblers,
Long story short - this post isn’t really a tip per say, just a general observation with some un answered questions. Please let me know if anyone has any advice in this area?
This post is in answer to a recent test run and discovering the impact of load time a Bubble site has with fonts - post here:
The test features 3 ‘text’ elements:
The Heading is set to ‘Open Sans 800’
Sub heading ‘Open Sans 600’
Body set to ‘Open Sans 400 (Reg)’
Fonts downloaded in multiple formats here. Only 3 fonts used in this test, but needed to upload multiple versions e.g. woff, woff2, ttf, eot, svg…
Rendered result example:
The 4 test pages explained (all still using Open Sans font family - same sizes, weight, color and so on):
- test-custom - Using custom fonts method (more details below), but this is in the format of an unsaved style e.g.
- test-custom-styles - Again using the custom fonts loaded in, but in this case, I have saved the styles to the ‘Styles’ library e.g.
- test-standard - This uses the built in Google fonts integration and selected ‘Open Sans’ font from the list. This is in a unsaved style e.g.
- test-styles - The same as above, built in Google fonts but using a saved style e.g.
So when using the custom fonts, I have opted for using the route of creating a new plugin, just so I can add the assets of the fonts and CSS file to the hosted cloudfront resources, rather than using the standard approach of uploading fonts through the Bubble editor and ending up on AWS S3 storage pools. Here is the trick I’m referring too:
Link to CSS file used here btw.
A quick note before showing the results using GTmetrix. This is all run from one app, which was freshly created just to run these tests, so no other data or related pages, very lightweight. Also its on the free Hobby plan, which is running in a shared hosting environment, therefore these tests won’t be hugely accurate due to factoring in server load at the time of testing. With that said, I’ve tried to run the tests within a few seconds of each other in hopes of getting a similar testing environment for each page report.
Last note, before running these tests I deployed the site so it was using the live version, rather than version test. I am not sure if there is much of a difference between the two for file requests, but I think the live version is the most crucial for investigating at the end of the day. Here are the results:
All the results are essentially the same, looking at the Waterfall of requests made, each page will still request the font oddly enough, even if not used on the page.
Example here on a page that uses only the custom fonts, but still makes requests from Google to send Open Sans font and the Lato font that is standardised in app styles by default
From the results though, we can see the speed timeline for each individual file and there is a fractional smaller request time for using custom fonts (uploaded to Cloudfront) when compared to using Google fonts through the Bubble editor on text elements.
Now with that said it can vary in the wait time between Google’s servers and Cloudfront’s - example of 3 tests and the speed differences (again minimal ms here):
Request time can shift, so a variable that’s not a fixed balance, can tip both ways, no defined answer
Now interestingly after deleting 3 pages and just leaving the ‘test-custom’ page which is using the Open Sans custom fonts uploaded, so not loading any Google font requests and deploying to live -
the requests to Google for Open Sans fonts are still made?
So to summarise from these quick tests, using custom fonts really isn’t a clear cut speed improvement factor and is a variable.
Maybe the results would change on a fully fledged page, with loads of text elements…though the initial amount of requests would stay the same surely?
Also it would help if Bubble consolidated the requests for fonts made on a page basis of whats needed, though I can understand the tricky technicalities of this with JS.
I just can’t quite understand why there are huge requests times though in the GET call for Google Fonts in an example test run a few days ago on a template page (a sizeable one sure), was Google servers having a bad day?
Well it appears not as a recent re-run shows somewhat similar results:
After these quick tests, I think I’m still none the wiser…
