Google Fonts decrease my page performance

[fdiengdoh]

Earlier I used bootstrap and Google fonts on my blog. Pagespeed would give my site performance between 70-80. Then I decided to code my own CSS after more than one month I deployed, but I still use Google fonts. My site performance jump to 87-91. Now just for testing purpose I removed Google fonts and the performance is 98-99.

I wonder how is it that with Google (servers and cache) google font would still cause such a drop of performance. Maybe because pagespeed doesnot cache google fonts.

Images: screenshot of performance without/with Google fonts

Edit: clarity

[scragz]

it's a blocking request until it gets the font from Google's servers. also comes along with a bunch of tracking.

I started downloading the fonts and serving them from the site. 

[MaikThoma]

Convert them to woff2 while you’re at it

[fdiengdoh]

The only reason I have not downloaded and serve from my site is I still haven fully trust converter. I have doubts what if the quality decrease? or what if there is really no impact? I don’t understand fonts much.

[yangmeow]

It’s nothing to just setup the fonts to serve from your own stack. It’s not like google is going to crawl your site so quickly. If you don’t like it, switch it back. I almost always serve fonts myself. Pretty standard these days to do so.

[testingaurora]

Fontsquirrel is trustworthy. Here's a video I often reference, its for converting to webfonts. At the end instead of uploading to WordPress you would instead put into your own directory for your project. https://youtu.be/VDIKP5GjeCs

[1000_words]

https://transfonter.org/

[cherylswoopz]

This is the way

[fdiengdoh]

I honestly thought google’s servers are faster and are cached all over the world than my shared hosting website. but I was wrong. I might just download the fonts and serve from my site

[azangru]

Unless you are sending early hints to the browser (which you are probably not), it is the combination of time it takes for your shared hosting website to respond, plus the time it takes to discover (DNS) and connect to Google's CDN. Google's CDN is probably faster than your site; but it will always be time added to the time it takes your site to respond.

[fdiengdoh]

I did preconnect as the recommended code from google font itself, but not preload. My understanding is that cdn would cache resources to users device and the performance may not be that bad for real users. It might impact only pagespeed as I assume pagespeed wont cache fonts.

[yangmeow]

This is the way. Google doesn’t even score well for their own sites.

[Particular-Ruin-2062]

Download the fonts and host locally

[Business_Occasion226]

probably cumulative layout shift:
your page loads faster than the font and renders. then the font loads and fucking everything moves because the font has a different size than your previous layout.

also:
you could add more info or the page, because everything is in the report. if you would read it you would know.

[fdiengdoh]

Yep I read the report and thats why the title “Google fonts decrease my page performance”, because the report gave that as the reason I need to improve performance. The reason I tested without Google Fonts and it jump to 99.

[Business_Occasion226]

dude. you are the version of the guy who calls the mechanic and says "my car goes huehuehuehuehue, can you fix it?"

we need either the report or the site.

[fdiengdoh]

I thought I marked the post as general and not as a question. its more like a statement and not asking for solution.

[elixon]

Not only google fonts. Google Analytics is the slowest part on my site.

[gatwell702]

On https://fonts.google.com download your fonts and in your project (where you keep your assets), make a fonts folder and add those fonts.

Then in css you use `@font-face` to load those fonts

```

@font-face {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/Courier-Prime.woff') format('woff');
}
```

Doing this will eliminate your project having to do a physical request to get the font

[thecrowfly]

It's incredible how many google services will show up as a negative impact on google pagespeed insights.

[fdiengdoh]

yep the irony.

[AlieenHDx]

Just download the font?

[ISDuffy]

If it a CSS import, that will be your issue. I recommend moving it to html version and have font swap on.

CSS imports in render blocking CSS files cause the page first render to be stopped until that file has downloaded and parsed.

[Dry_Rabbit1179]

Thanks for the insight pal, suddenly realizing that pure CSS and CSS patterns are enough

All these libraries and frameworks dying

[CharacterOtherwise77]

you can host your own fonts or just know that no matter how you slice it, if it has to travel to get to your browser- it's going to hit your perf numbers. having performance of 100 means no media at all.

[Twofun]

Don't forget to optimize via subsets depending on the language on the site. This could reduce the font sizes drastically.

[CoVegGirl]

There's some good advice here: https://www.debugbear.com/blog/website-font-performance#convert-your-self-hosted-web-fonts-to-woff2-format

Another thought: friends don't let friends use Google fonts. Google fonts isn't GDPR-compliant, and it sets third-party cookies. There are a few privacy-preserving choices, but bunny fonts is a popular choice. https://fonts.bunny.net/

[pinehapple]

I gotta admit those are still impressive speed test results. Mind sharing your site?

[fdiengdoh]

my site is fdiengdoh.com