Aha! There had to be a problem with the HTML generated for the ShakaCode home page. I bet it doesn't preload! Sure enough, it wasn't! I verified that by searching the page source for the font "Montserrat," which was buried inside a mass of inlined CSS. Yep, no preload!
I searched the codebase for this font, and I found it inside of a styled-components CSS-in-JS file.
Don't use @import url for google fonts!
I searched the codebase and found that Montserrat was loaded using the CSS @import rule.
Using @import to load Google fonts was exactly what should not have been done. Many search results on this topic pointed to exactly what I observed in the Chrome Dev Tools profiler: "@import" will defer the loading of the resource and slow down the page.
I looked at the performance of loading the fonts on the current live site. In the web.dev tutorial I just mentioned, I got a better understanding of how to use the Chrome Dev Tools Network tab a bit better. To get some better clarity around a slow network, I throttled the network speed just a bit to Fast 3G.
OMG! Of course, the page jumps! The Montserrat font was not even queued until 4.1s!
Gatsby plugin gatsby-plugin-prefetch-google-fonts to the rescue!
Next, I googled around for the topic of how best to apply Google fonts to a Gatsby site.