Implementation of Google Fonts is TOO SLOW


#1

Q: What feature / functionality are you looking for?
A: Better font loading results in faster pages and more conversions!


Q: What problem are you trying to solve?
A: Unbounce’s implementation of Google Fonts is not optimized for Page Speed. It loads unused styles (bold, italics) and characters (latin-ext). It is also loaded through JavaScript, which is slower than by the standard <link> tag.


Q: If solved, what value would this provide (ex. increased efficiency, cost savings, etc.)?
A: 2 seconds faster load time on mobile devices and 10% lift in conversions.


Q: Use Case example? (ex. As a ____ I want to be able to _____ so I can _____.)
A: I added Lato font to my simple form page. I didn’t expect a decrease in conversion because about half of the pages the funnel into the form page already load and cache the Lato font. But I test everything, and I am glad I did.

10% fewer conversions!!!

Before, I used a Arial (system font).

I customized the implementation by only loading the bold style of the font, without latin-ext.

I also loaded it using the standard <link> method, rather than javascript.

The result: the page loaded 2 seconds faster on mobile.
https://www.webpagetest.org/video/view.php?id=170629_d441457b1bc18336fd1729195bf543b5ebb07f19

Here is a breakdown of load times (on mobile):

  • Arial System Font… 4.4 seconds
  • Lato Unbounce Loading… 6.9 seconds
  • Lato Custom Loading… 5.0 seconds

Introducing Google Fonts! 🎉
Page Speed Initiative
#2

Hey Philip thanks for the feedback and you’re in luck! We’re actively working on a brand new font picker as we speak. With this comes optimization improvements where we scan your page for the families, weights and styles you’ve used and only publish with those exact iterations.

Keep an eye out, it’s going to be launching very soon :smiley:


#3

I’ve had an early peek at the new font picker and I cannot wait to use it!


#4

Hey @Phillip i have also seen a pre-release of the font picker, you’ll be happy. But, in the interim to solve this problem you can bypass the Unbounce Google font loader by importing the fonts yourself. Just add the @import codes in the CSS window and you can use CSS to set all page fonts or certain element.

LMK if you need any help with the CSS part.


#5

Thanks @digibomb. I am able to do that.

The frustrating part with hacks like this is they don’t render in the editor. I am already having to hack my SVGs (see method 2). It would be weird to edit a page with no images or fonts.


#6

Lol it is weird, but you get use to it … or at least I have :slight_smile: We have many clients using custom fonts as it is so we’re always dealing with this issue.

You can also try using the Styler chrome extension. I’ve had some luck with it.


#7

@Phillip I have used the style chrome extension and it really helps speed up integrations vs having to make a tweek and republish, refresh etc.

I can also +1 the new font picker that @Matt_Coady mentioned. It is going to be a game changer in the builder! Custom fonts have been a major PITA in Unbounce for a long time… but they are getting there!

Joe


#9

Hey @Phillip,

Just wanted to follow up on your request, as we have launched the new built-in Google Fonts feature that our Experts have been trialling for us, so now everyone can take advantage! Come check out our community announcement so you can learn how it all works: Introducing Google Fonts! 🎉

Jordana


#10

The new Google Fonts implementation is definitely an improvement!

But it is still 2 seconds slower than a custom implementation on mobile.

Custom: 4.7 sec
New Unbounce Font: 7.0 sec

https://www.webpagetest.org/video/view.php?id=170928_75e23d276592102c03ff13a80601d5ea5179b2a0

The cause is the font is loading further down in the waterfall and is loading unused styles (Lato Thin, Lato Thin Italics, Lato Light, Lato Light Italics, Lato Regular, Lato Regular Italic, Lato Bold Italic, Lato Black, Lato Black Italic).


#11

I tested the new Unbounce Font system against my custom font implementation.

The new Unbounce Font system is converting at the same rate as the custom font implementation. Therefore, the Web Page Test above is not affecting actual user behavior.


#12