Fonts & Performance - part 1

Should we self-host Google Fonts?

What I learned in my journey to find an approach

After messing up sites, drawing wrong conclusions and feeling out of my depth, I finally feel I've a reasonable understanding of what I need to consider. I still have questions and I'm conscious of how quickly things change at Google and with browsers generally, but ...

I thought it might be useful to share my thought process on one particular client site  and WHY I decided to self-host Google fonts on it and may not on others.  In a later video I will talk about HOW.

Senior Engineers at Google are positive about the benefits of self hosting fonts, mostly because it gives us more control over how fonts load (and your visitor experience), but as always, with power come responsibility. It is easily to end up worse off for self-loading, but I will cover this at the end with the pro and cons.

NEW DEAL PROMO

Store your WordPress (PHP, CSS & JS) snippets in the cloud and conditionally load them with ease through its builder

UNLIMITED  domains
UNLIMITED  snippet storage
LIFETIME  updates
LIFETIME  PRIORITY support

$89.25
(with the 25% off "beaverjunction" coupon)
Single site Life license from $21.75

Excuse the affiliate ad. I rarely monetize.
I helped with the Beaver Builder snippets in the plugin's cloud library and was given this discount. (I paid more!)

I intend to share the collection I am working on which many will be performance related.

I wish I had this for my video on preloading images.

There's a 30 day refund period.

The client site I'm showing here looks as simple as the pages I test here that perform well out of the box. In reality this one calls in far more scripts and stylesheets than would be typical for me. I indulged a bit with PowerPack (one of my favourite addon packs for Beaver Builder).

  • There's a animated headline, on scroll animation and even custom keyframe animation.
  • There's a pop-up maker modal with Gravity Form's CSS files added to all pages.
  • There's an animated/swappable carousel.
  • and even though fast loading SVGs, there's quite a lot of PNGS too.
  • Aside from the scripts & sheets directly added by the plugins they set of another 7 JS files coming from WordPress (wp-includes/js/)

No problem, if I all I want is a 96-100% vanity score on GTMetrix.  But, with Core Web Vitals in mind slowing this down x4 for mobile is not so great:

PSI-lighthouse-latency-Enabler
Lighthouse is the chrome browser (right) represent the expected Field Data. It's simulating a UK visit to a UK site. It removes the latency of not being near one of Google's Page Speed Insights servers.

On the performance site (to help with load impact) I use the free Cache Enabler. It's all I need with Beaver Builder on its own.

But on client sites I use WP Rocket and in this case it's ability to minify, defer and delay JS among other things reduced the initial  55 requests (compressed page size 527.7 KB)  to 24 requests and 343.2 KB). See the waterfall tab on the links.

Nothing's removed, but it's holding back things that delay the loading of the Largest Contentful Paint (LCP) element in the (mobile) viewport. Enough to get us in the green!

PSI-lighthouse-latency

Now with any major embarrassment over page load speeds out of the way. My attention went to two things:

  • Could I shave off by loading my fonts closer to the site visitors are (as I thought I had before)?
  • Could I get rid of that annoying font swap from system font to the very characteristic Nunito font?
  • Could I have it all? Wait! That's 3 things.

LOAD EXPERIENCE

As I was preparing this when one of the stars of the Beaver Builder community (Dave Bloom of soul plugins) has one of his legendary (insightful yet amusing ) rants about the terrible font swaps he was finding (as people push for faster page loads).  I'm probably guilty of it, but I completely with him and surely it will only be a matter of time before Google are measuring this too.

Here is a video showing the difference between self-hosted fonts that have preloaded and marked with font-display: block; and regularly loaded Google fonts with font-display: swap;  ("swap" was added by WP Rocket)  Google does not add font display so the behaviour depends on the browser's defaults More on font display options

Important  note on WP Rocket :

WP Rocket does a few things to optimize google fonts 

  • Reduces the Google's normal 2 requests to 1 ( fonts.googleapis.com for CSS & fonts.gstatic.com for the fonts)  .
  • Preconnects (to fonts.gstatic.com for the fonts)
  • Adds (on this occasion annoyingly) font display swap. (This can be removed, but is there to stop this Lighthouse warning "Ensure text remains visible during webfont load")
/**CSS used which references fonts in my child theme

***************************************************/

/* nunito-regular - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
font-display: block;  /* not added by Google font helper */
src: local(''),
url('/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-800 - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 800;
font-display: block; /* not added by Google font helper */
src: local(''),
url('/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
H1, H2, H3, H4, H5, H6 {
font-family: 'Nunito', verdana, sans-serif ;
}
p, span,{
font-family: 'Nunito', verdana, sans-serif ;
}
/**How to preload fonts.
 This shows adding via the child theme's functions.php file,
 but the links can be added directly to the head code section of the theme.
 ***************************************************/

add_action('wp_head', function() {

<link rel="preload" as="font" href="https://example-site.com/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" href="https://example-site.com/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-regular.woff" crossorigin>
<link rel="preload" as="font" href="https://example-site.com/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-800.woff2" crossorigin>
<link rel="preload" as="font" href="https://example-site.com/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-800.woff" crossorigin>

});

SPEED TESTS

Speed Vitals

A new online testing tool that uses Google's Lighthouse. The advantages over Google PageSpeed insights is it stores results, shows you the waterfall, lets you choice locations and simulates more mobile devices.  To replicate PageSpeed insights use standard mobile (Moto G4) and standard Desktop.

Standard Mobile (UK)  Live Site

Two weights and two file formats preloaded. Score 98. LCP 2.3

https://speedvitals.com/report/www.wandle-elec.co.uk/slApoF/ 

Two weights and two file formats - not preloaded.  Score 99. LCP 1.7

https://speedvitals.com/report/www.wandle-elec.co.uk/WSxMzd/

Two weights and two file formats - only woff2 preloaded. Score 99. LCP 1.9

https://speedvitals.com/report/www.wandle-elec.co.uk/Ihlo1W/ 

 

Standard Mobile (UK)  Dev Site

Fonts via Google's CDN (and has extra 700 weight).  Score 98. LCP 2.0

https://speedvitals.com/report/wandle.here24.co/wenpzl/ 


Consistent with running Lighthouse from Chrome (incognito with a UK VPN)  With latency PageSpeed Insights give me anything from 87 - 90 and LCP 2-3s.

 

Standard Desktop (UK) 

https://speedvitals.com/report/www.wandle-elec.co.uk/y3lpii/   Live site locally preloaded loaded fonts Score 100. LCP 0.6

https://speedvitals.com/report/wandle.here24.co/wUHGAs/     Dev site with no preloading and fonts served via Googles CDN. Score 99. LCP 0.8

FOR SELF HOSTING

  • Could help with latency issues. Serving fonts closest to your visitors.
  • One less render-blocking resource in the head See Nunito example.
  • Google changed how Chrome caches in October 2020. Partitioning the cache means new Chrome vistors (around 65%) will not have your font stored already.
  • You can set the cache expiry for longer than Google's 1 day.
  • Can disable Google fonts and prevent clients/yourself from accidently adding more font/font weights than needed.
  • It might be easier to manage to is you need to local load an Font not hosted by Google (everything in one stylesheet).
  • Google make 2 calls to 2 servers (although WP Rocket fixes that).
  • Experience  -  allows you to (safely) preload fonts and control font display. Read more here.
  • Privacy -  with GDPR concerns particularly in the EU it may be wise to locally load, (A BB article wisely focusses on this aspect ).

For Google's CDN

  • Google takes care of Font licensing.
  • If not already using a CDN, Google's own is probably going to be hard to beat for a global audience.
  • If you are using a CDN is it any better for GDPR than Google (genuinely naïve question!)
  • Google serves the smallest file supported by the browser.  Not loading every format in case needed. (However perhaps we can soon use woff2 only)
  • Google serves the latest version of the font.
  • Google is working on new exciting stuff variable fontsprogressive font enrichment,
  • Does not load fonts if the page does not require it
  • Google compresses fonts for us. (Woff2 is Google format). In the case of Nunito Google knocked of about a quarter (19kb - 13kb)
  • It takes more effort and you really need to understand your traffic.
  • Google font will render well enough  Zack Pyle shared his way of loading fonts which highlighted an issue with my tool 
  • It can be frustrating with browser caching and easy to not to know when you are showing the correct font.

This article on the WP Rocket make the argument for not self hosting https://wp-rocket.me/blog/self-hosting-google-fonts/

Personal Conclusion

GDPR concerns over using Google's CDN are not presently felt in UK so I feel I have the choice.  I will self host:

  • If the site is struggling to pass Core Web Vitals due to latency (mostly Google's font servers being further than my server for the site's audience).
  • If there is a nasty font swap effect (going from a system font to the intended font) that I can correct with preloading and the browsers default font display.

Otherwise, I will skip the browsers testing and let Google do all the font updating and compression work.

You can support my work by buying the tools I use through my affiliate links:

25% off these two lifetime deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

---------------------------------------------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder | Advanced Database Cleaner

---------------------------------------------------------------------------------------------------