[Support request] Fixing a flash of unstyled text

[Elvin]

We can actually try ditching the locally hosted fonts if that’s the case.

Here’s what we can do:

1.) Remove the @font-face and the font files for the locally hosted font
2.) Re-enable Google font. https://share.getcloudapp.com/NQu76kNO (try reducing the variants, if possible)
3.) On Autoptimize. Remove the preloaded URLs and do this instead – https://share.getcloudapp.com/bLudEzxQ

You then test again if this yields better results. 😀

[Tom]

With this done, there remains a small FOUT and PSI is about the same as before.

[Elvin]

Your site seems to have changed optimization plugin to WPFC. In that case, can you try playing around w/ this?
https://www.wpfastestcache.com/premium/google-fonts-optimize-css-delivery/

If you’re trying different optimization plugins, consider trying WP Rocket as well and check this out –
https://docs.wp-rocket.me/article/1312-optimize-google-fonts

[Tom]

I haven’t changed plugins, I’ve always used WPFC and Autoptimise. Are you suggesting to turn off CSS and/or HTML minification in WPFC?

[Elvin]

I haven’t changed plugins, I’ve always used WPFC and Autoptimise. Are you suggesting to turn off CSS and/or HTML minification in WPFC?

While 2 optimization plugins can work, ideally it’s best to only use one to avoid conflicts.

And as shared previously, each plugin documents their recommended settings w/c are worth trying.

As for the current issue:

Try doing an A/B test of multiple variations of settings on the plugin using default google font of the theme and using locally hosted font.

You then list the result for each setting variation to see which gives the best performance yield.

example:
Test A: merge CSS disabled, no preloaded font – ## score
Test B: merge CSS enabled, no preloaded font – ## score
Test C: merge CSS disable, preloaded font – ## score
Test D: merge CSS enabled, preloaded font – ## score

And then you basically set the variation which gives the best result.

As for your site specifically, I’d test:

Test A: Locally hosted font, merge CSS enabled BUT exclude GP’s main.min.css, preload font, change the @font-face to remove variants you won’t use and remove the other src URLs (keep only woff, woff2 and TTF)

Test B: Locally hosted font, merge CSS enabled BUT exclude GP’s main.min.css, preload font, change the @font-face to remove variants you won’t use and remove the other src URLs (keep only woff, woff2 and TTF) and remove font-display properly.

Test C: Create a child theme for it’s child theme’s style.css and add your @font-face here.
Locally hosted font, merge CSS enabled BUT exclude GP’s main.min.css AND child theme’s child theme style.css, preload font, change the @font-face to remove variants you won’t use and remove the other src URLs (keep only woff, woff2 and TTF).

Test D: Create a child theme for it’s child theme’s style.css and add your @font-face here.
Locally hosted font, merge CSS enabled BUT exclude GP’s main.min.css AND child theme’s child theme style.css, preload font, change the @font-face to remove variants you won’t use and remove the other src URLs (keep only woff, woff2 and TTF). and remove font-display properly.

Note: On some sites, this recommendation – https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/page/2/#post-2041996 – is usually enough but for asset heavier sites, it’ll get more tedious.

I understand that it seems like guesswork and is tedious but it really takes a bit of effort to squeeze the best performance possible on every site. Some users actually hire specialist for this because there’s no “1 setting to rule them all” for this as every site is different. 😀

[Tom]

I think I would have difficulty doing these variation tests because I’m not sure which font URLs to put in the preloading section in Autoptimise.

I am also still confused about what preloading fonts actually entails, since I haven’t been able to try this yet. When you say to preload the fonts, does this mean:

1. Upload font files locally
2. Readd the CSS I had before
3. Add URLs to Autoptimise (once I figure out how to determine which ones they are)

Also, what does “merge CSS” mean?

I don’t understand your recommendations regarding creating a child theme “Create a child theme for it’s child theme’s style.css “, I have a child theme already. Are you saying to make another one?

I have the two plugins because Autoptimise doesn’t do caching, and WPFC doesn’t have good controls over its minification. I have disabled the minifcation aspects of WPFC, it seems like PSI is about the same

[Elvin]

I am also still confused about what preloading fonts actually entails, since I haven’t been able to try this yet. When you say to preload the fonts, does this mean:

1. Upload font files locally
2. Readd the CSS I had before
3. Add URLs to Autoptimise (once I figure out how to determine which ones they are)

The URL to preload are the URLs you’ve added on your @font-face src property if you’re locally hosting it.
Example: https://www.yoursitedomain.com/wp-content/uploads/open-sans-v18-latin-300.woff2

And about your @font-face, you can try testing with and without font-display:swap; after preloading the fonts.

If you’re using GP customizer’s Google font, you can also preload manually. (if you’re using WP Rocket, they have a tool for preloading Google font requests)

I am also still confused about what preloading fonts actually entails, since I haven’t been able to try this yet. When you say to preload the fonts, does this mean:

Here’s a good read about preloading.
https://web.dev/preload-critical-assets/

And here’s a good one about FOUT:
https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/

Also, what does “merge CSS” mean?

Optimization plugin’s CSS merge or CSS aggregation is basically getting ALL the CSS of the page and combining it into 1 whole file. This is done to reduce the number of requested assets to load.

At first glance, it sounds great to have ALL of the CSS merged into 1 file but it gets problematic if the combined file size is too large to load at once.

To address this, optimization plugins have “CSS exclusions” text fields to exclude some stylesheets from being merged, so the assets can be served in smaller chunks of files instead of 1 big file.

I don’t understand your recommendations regarding creating a child theme “Create a child theme for it’s child theme’s style.css “, I have a child theme already. Are you saying to make another one?

I only mentioned it incase you’ve removed it and moved the @font-face CSS to Appearance > Customize > Additional CSS. You don’t have to make a new one if you already have one. You can proceed to excluding its style.css. 😀

I have the two plugins because Autoptimise doesn’t do caching, and WPFC doesn’t have good controls over its minification. I have disabled the minifcation aspects of WPFC, it seems like PSI is about the same

Consider getting a plugin that controls both instead of maintaining 2 plugins.

[Tom]

The URL to preload are the URLs you’ve added on your @font-face src property if you’re locally hosting it.
Example: https://www.yoursitedomain.com/wp-content/uploads/open-sans-v18-latin-300.woff2

I added every file to my CSS, and then you told me to avoid adding some of them, which makes sense. I asked this before, but how do I determine which ones I should include, or which ones GP is actually using? I can’t really add 60 different files to this text box in Autoptimise without blowing out my loading times (I’m assuming).

I don’t understand the preloading process. I asked before if the three steps I mentioned above were correct, and you didn’t really confirm whether this was right, or if I am missing something. By linking to that web.dev article, you seem to be implying but not explicitly saying that I need to link to each font file in my <head> code. But I thought Autoptimise did this for me if I use their settings?

I don’t understand the relevance of CSS aggregation, where has this come from? If this refers to “Aggregate CSS-files?” in Autoptimise, I have always had this on. Why do I need to test with it off? I just want to solve my FOUT

[David]

I think we need to roll back to the original question as i feel we have gone a little off piste and into mass optimization territory. Which although required it may not directly eliminate FOUT.

My personal view would be to:

1. Disable the Display Swap property on the Google Fonts to eliminate the FOUT. For the time being ignore the PSI Diagnostic: Ensure text remains visible during webfont load eliminating that is going to make zero to little difference to site performance.

2. Focus on the Opportunities in the Google PSI Report – in resolving those you will see far greater gain on performance.

[Tom]

I think I agree. When I disable the swap property in Google fonts, which one should I change it to – is one of them optimal in this case? I am assuming we are referring to the options in Customize > Typography.

[David]

I am assuming we are referring to the options in Customize > Typography. – correct

Auto is the default value and leaves the browser to do its own thing i would leave it as that 🙂

[Tom]

So I tried making this change, and having it set to auto decreases my PSI score on mobile by about 20 points. It massively increases total blocking time, and also increases time to interactive. It fixes the FOUT but I can’t really sacrifice Lighthouse performance by this much.

[David]

The main issue is still the optimization of the site.
when you enable the display swap it basically tells the browser not to wait for the fonts to load.
And if disabling that option incurs a big delay then it means something is holding up the loading of them. Which may be a local issue or the fact they’re being loaded from the google API. For the latter i generally go with loading them locally but i don’t know if we ever got past this point where all fonts were locally loaded without the display swap.

For more detailed digging into performance issues WebPageTest provides a better insight – i ran one here:

[Redacted as requested by user]

First off in the Waterfall there are 2 x Render Blocking resoruces being flagged.
1. The Combined CSS file from autoptimize. You may want to test with CSS uncombined, that may incur less of a load time.
2. The Google Fonts … back to loading them locally to eliminate that i am afraid.

To help interpret more areas for improvement within the waterfall check below in the Resource requests.
Anything in the Green ( before start render ) needs to be as small as possible, so you may want to look at compressing that image down from 100+ kb.
In the purple area – can any of those scripts be deferred loaded?

[Tom]

When I uncheck the option to aggregate CSS in Autoptimise I get a similar or slightly slower PSI and it states that there are now four render-blocking CSS files, including style.min.css. Not sure if there is some way to avoid these being render blocking.

I tried local Google Fonts previously without display: swap;. The problem was I need to preload in Autoptimise, but I haven’t worked out how to find which fonts to add to the preload field. I don’t think it would be useful to add all 30+ of them, I assume this would slow things down.

Regarding the image are you referring to family-online-min-1.png? I thought that WordPress would lazy load images by default. I could try to compress it more but I think this would be difficult.

Also can you please transfer that webpagetest URL into private information and stop it showing publicly?

[David]

Elvin removed the webpage test URL. Did you make a note of it before it was removed? If not i would suggest running your own test as it will provide more insight to what is slowing down the site.

[Author]

Posts