Google Webfonts is hurting everyone's website load times - Is there an option to defer?

Hello Webflowers,

Does anyone know how to Defer or even stop Google Webfonts (webfont.js) from being called??
This javascript file is hurting website load times for everyone as discussed before on this forum.
(I’ve been testing with [Google Page Speed Insights] 1)

I’m hosting via Webflow & I’ve removed all Google fonts under “fonts” but the javascript file is still getting called.
Any work around Webflow Team…Anyone??

Hi @smmj, could you also check that you have cleaned up all your unused classes in your site. Go to the styles tab, and click the Clean Up Styles button. Then remove all the styles that are unused.

Could you check that?

Cheers, Dave

Hi @cyberdave
Done this, and it’s still loading > https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js.
I’ve also gone through the website and made sure all text is pointing to a specified basic text.

Hi @cyberdave,
It seems that some Google fonts are still being used throughout the site, I manually went through and pointed to font types like Arial but it’s still recognizing Open Sans, Lato etc.
…Is there any way to completely remove OR Flush all google fonts from a website?

Hi @smmj, thanks for your update, sorry for the late reply. At the moment, even one font used from google fonts would cause the google fonts script to be loaded. Unfortunately, there is no global reset button, so you would have to check each element separately. I think that having a way to globally reset the css styles for all elements to their defaults would be a good thing to have.

I hope this helps. Can you share the url of the published site, and I check out the published site css usage.

BR Dave

@smmj Could you share the url? Is the site loading slow or you are just trying to really optimize?

I’m new to Webflow, have only brought one site live but am finishing up a second but I’d been watching the product over the last year. I’ve spent some time obsessing over the speed thing not just with Webflow but ever host I use…even before I signed up for WF I tested some of the demo sites to make sure WF hosting speeds were decent. I run a number of websites in Wordpress using Flywheel as a host and have great “in the wild” speed results with the sites - wanted to make sure speed of WF hosting was comparable.

The first site I moved to Webflow had a couple large images as backgrounds that even though they aren’t large file sizes have been problematic in loading on any version of the site. They seem to be doing fine on WF.

The second site I am currently moving is http://ccscentralflorida.webflow.com and I (still) have a version of it in Wordpress at http://ccscentralflorida.flywheelsites.com. The Google Page Speed Insights isn’t my favorite tool for testing performance - it always marks down any web served pieces like and ironically Google Fonts or Font Awesome fonts or CDN delivered pieces. I find tools like Website Speed Test | Pingdom Tools or http://www.webpagetest.org to give a more realistic result of what users will get. HTTP://gtmetrix is also good but always seems to list slower page times that don’t seem consistent with “in the wild” results. Pingdom in my opinion probably shows the closet to an “in the wild” result.

This doesn’t really help answer your question but maybe other testing would help work through any speed issues.

1 Like

Hi @cyberdave
URL: http://www.houzzplans.co.nz

Thanks @jdesign, The site running a little slow.
These are the recommendations by Google Page Insites:

Remove render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js
https://daks2k3a4ib2z.cloudfront.net/0globals/modernizr-2.7.1.js

Optimize CSS Delivery of the following:
https://daks2k3a4ib2z.cloudfront.net/…085cd52/css/houzzplans.93ad68b25.min.css
http://fonts.googleapis.com/…00,600italic,700,700italic,800,800italic

@cyberdave, Fixed!! I noticed some font styles showed the BLUE “A” therefore the website was still publishing some Default Google fonts to the primary class. Had to go through all classes that showed the dreaded blue “A” and now its clean from all google fonts thankfully.

Modernnizr however still loads as I believe this is part of the Webflow globals?..is there any such way to load modernizr asynchronously? (hosting via Webflow)

@smmj Just so I understand, are you talking about the Blue “A” in the designer?

Hi @jdesign, yes (which also turns yellow/amber when no other linked classes are inherited)

Thanks @smmj, I’m confused, once I remove all the blue a’s for all the classes I can’t change the fonts back without getting some more blue A’s… any better way to explain it.
Thanks.

Hi @smmj!

I did what you suggested through all classes. But there’s already Montserrat font-family, so the webfont request is still happening (https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js7)

I found that Montserrat font-family was on h2, h3, p and six more private classes.

Do you know how can I delete them? I’ve checked all elements many times looking for a inherited items but I’ve not found anything.

You ever figure out how to load the modernizr asynchronously?

Cleanup of pagespeed threads from search results.

This question has already been asked multiple times on this forum.

Please start by reading these topics:

Here is an explanation about PageSpeed from Webflow’s CTO: