Web Fonts Optimization – possible issue

Hello @pautgn

With the Web Fonts Optimization, we are changing the default way to load Google fonts in order to save HTTP requests. When you enable it, we add the so-called “preconnect” link to fonts.gstatic.com so we will do the DNS lookup, TLS negotiation, and the TCP handshake. The Elementor plugin offers similar functionalities and you can decide which ones to deactivate in order to prevent duplicates. Even though those should not cause any issues related to speed degradation.

By enabling the Web Fonts Optimization option, the plugin automatically opens a buffer, takes all link tags that point to google fonts, and starts optimizing them. After that, it loads that content inline in the head by serving the generated CSS saved in uploads/siteground-optimizer-assets/google-fonts.

If you see preconnect using fonts.googleapis.com it is likely that the template in use has those fonts. You should check further with your developer. In case you encounter some issues and you are a SiteGround client, you can open Helpdesk request and our colleagues will investigate further.

Best regards,
Georgi Ganchev
SiteGround.com

My theme is Astra and it uses local fonts.

I compared the source code of a page before and after activating this option. And the differences are the inline CSS code + the 2 preconnect lines. And you remove this line added by Elementor:

<link rel='stylesheet' id='google-fonts-1-css'  media='all' />

So I think it’s you who is adding the 2 preconnect lines, including the one for fonts.googleapis that PageSpeed Insights throws a warning because the browser doesn’t use it.

Am I wrong?

Regards.

Hello @pautgn

We never denied that the two preconnect values are applied by our plugin. As I already stated those are part of the Web font optimizations. Resource hints get their name because they are not mandatory instructions. They provide the information about what you’d like to happen, but it’s ultimately up to the browser to decide whether to execute them.

The plugin will add the preconnect only if a link to Google fonts is found in any of your CSS where the font is called. Should you want us to check things further, you should open a Helpdesk request as I advised you.

In case you do not want to have the early connections preloaded you can turn that option off or keep it only active within Elementor.

Best regards,
Georgi Ganchev
SiteGround.com

Ok, thanks.

-Can it be that you found fonts.googleapis.com in the Elementor line “<link rel=’stylesheet’ id=’google-fonts-1-css’ href=’https://fonts.googleapis.com/css?family=xxx” that you remove and is for that reason that you preconnect fonts.googleapis?

-And it seems that Elementor adds the line:

<link rel="preconnect"  crossorigin/>

without offering any option to not add it (or I can’t find it). So just having Elementor it’s added. The same with your plugin, if this option = ON it will also add that line. If you please can confirm that having the same line 2 times can’t cause any performance issues, I would put this option = ON.

Regards.

Yes, @pautgn . I confirm that the preconnect would be added if detected to be in use by another component such as Elementor.

Performance issues are not to be expected still, you can verify and test the website speed using some of the tools available on the Web and decide if using this feature is applicable to your website.

Best regards,
Georgi Ganchev
SiteGround.com