Page flashes after initial load in gatsby-starter-blog

[pietrorea]

Description

The issue is very easy to see. If you go to the starter blog demo and load any page, the unstyled version of the page is shown for a fraction of a second before the styles are applied. The result is a jerky user experience for someone browsing around.

I noticed this does not happen in the [default starter demo](https://github.com/gatsbyjs/gatsby-starter-default.

Steps to reproduce

• Go to https://gatsby-starter-blog-demo.netlify.com
• See page flashing for a fraction of a second

Expected result

What should happen?

• There should be minimal jerkiness on initial load

Actual result

• The page flashes for a fraction of a second until the styles are applied

Environment

This happens in develop and production builds

[Js-Brecht]

This is because typography.js isn't doing any prefetching of the fonts. That starter uses the typography-theme-wordpress-2016, which you'll see loads up some google fonts; that process doesn't set them up for prefetching, though.

One way you could fix it is to use gatsby-plugin-preload-fonts, which takes a snapshot of your pages to find what fonts are needed, creates an index, and caches them. Then when you build, it makes sure they are preloaded.

I prefer using gatsby-plugin-prefetch-google-fonts, in combination with typography.js for setting the font families, and I just forgo the use of the googleFonts property with typography. It works pretty well for me, and I don't have to think about making sure the font index is up to date for the other plugin.

Maybe one of those options could be integrated into the starter? I'd imagine that since it's an official starter, it should also use the official plugin (gatsby-plugin-preload-fonts).

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜