Problem with FOUT and FOUC

How To
1

Bricks Version: 1.6.1
Browser: Chrome 90
OS: macOS

https://lepackweb.com/

Hello everyone! I

am reaching out for help because I am experiencing a problem on all the sites I use bricks on. The content flashes and the fonts also, I have disabled all the google fonts, LiteSpeed is managing the cache and lazy loading, I also tried using the LiteSpeed swap option, but without success. The font is hosted on the site in .TTF,
On some sites it is terrible, I had to put a preloader which is annoying for the user experience.

I hope to have provided as much information as possible.

Thank you in advance for your help.

Victor

2

Hi Victor,

Welcome to the forum :slight_smile:

This is because you are using guest mode optimization settings. And what you are experiencing is expected, as it is used for getting good page scores. The first loads a limited styling and then it loads the deferred package of CSS & JS when it reloads (FOUC, FOUT etc.).

There is lots of information and similar in the Litespeed Docs, and WordPress Plugin Repository about it.

You can minimise the FOUT, FOUC but expect to spend a good 5 to 10 hours extra checking which CSS and JS you need to exclude from your Critical CSS & JS Excludes for not much extra benefit.

I have since stopped using Guest mode for this reason

Also change your font from .ttf to .woff2 (Inter is fairly common, so it should not be a problem finding it in this format and it is about a 3rd of the size :+1:

1 Like
3

Hi Michael ! thank you for your reply,

I understand better now and I didn’t realize that the site was loading twice.
take a look if you can to this site. I removed the preloader it’s awful :smiley: https://www.pac-energie-45.fr/
Does removing the guest mode have any consequences on SEO or overall performance?

Do I need to deactivate both?

image
image1968Ă—674 73 KB

Last question, is there any benefit to activating swap mode and lazy mode on the whole site? I am currently learning about optimizing a WordPress site. In any case, thank you for this useful informations.

I will also convert my font set to .woff2
Victor

4

Nice looking page so far, Victor! I like your vertical elements near the top. Will continue to follow the thread but Michael’s points all appear valid.

5

No worries at all.

As @FranklyCo mentioned it is really well designed site and I really like your colour scheme too! In terms of pre-loaders, I am not a massive fan of them to be honest, they where pretty vogue in 2019/2020, but not so much now.

I do not use any to be honest (guest mode is basically a combination of the other settings). The good thing with building in Bricks is once you learn what works, then you can sort of apply that to most sites as it is consistent (Albeit some updates such as 1.6.2 does seem slower, where my CSS.min files are not being cached correctly - Just a hunch until I can investigate further). What I have found is that the majority of the settings i have kept off strangely.

With regards to consequences on SEO and overall performance, its fairly subjective. Personally I optimise for speed to the point that its great for users, and stop when it impacts the site functionality for the user, example having a site refresh or showing a blank page for a second before it loads but scores A on PSI etc.

I personally believe that the likes of CWV is a fairly small ranking factor and still believe dwell time and bounce rates have a bigger impact on rankings. Thats why I do not sacrifice usability for speed scores.

You do not need swap mode as you are using locally hosted fonts and this is mainly for google fonts or fonts held elsewhere that take longer to download - I would preload your local fonts however so they are one of the first to be rendered.

I am not to sure what you mean by lazy mode the whole site?

6

Thanks @Michael @FranklyCo for the positive feedback on my work, too bad the FOUC ruins the experience a bit.
For the website designs you’re talking about, which one are you referring to? “lepackweb.com” or “pacenergie45.fr”

Thanks also for those answers. Despite the changes, it still flashes but I’ll keep investigating.

Haha I agree with you on preloaders, it’s an outdated practice and I also think that speed shouldn’t be the only focus.

How can I make sure that locally hosted fonts and CSS are loaded before the page?

Regarding the Lazy mode, if I understand correctly, it loads the content when it’s visible in the viewport? I don’t think it’s suitable for all situations, so my question was whether it’s better to target the elements that we want to exclude from lazy load or to disable it altogether?

Thank you for all

Victor

7

Hi @Victor45 - Jumping in with a few ideas here.

We’ve recently made the leap to FSE (Gutenberg & Bricks) after using Avada, Divi and others. Theres a snippet we use for all sites experiencing FOUC which should work just fine on Bricks as well. You shouldn’t need this, but in a case where there is an element or subframe which is not being properly called in time, this is a silver bullet to resolve it from my experience.

Paste this to your HEAD code injector in Bricks or JS file:

	//eliminate fouc hero flashing - https://www.markhendriksen.com/how-to-fix-divi-flashing-unstyled-content-on-page-load/ 
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });

This has solved many issues in the past, not exclusive to Divi.

  • The first line looks for the first element with the tag name “html” from the current page and assigns it to variable “elm”.
  • The second line sets a “display” property of the “elm” variable to “none” which will briefly (split second) hide the entire HTML content of the page.
  • The next line is a DOMContentLoaded event, which will fire when the initial HTML document has been completely loaded and parsed out, without waiting for stylesheets, images, frames, etc. to finish rendering or loading.
  • Inside the event listener, the display property is then set back to “block”, which will make all the HTML content visible again.

Test it on your own site’s before deploying first, of course. I’ve noticed a drastic reduction of any page flickering, font switching and general FOUT just from using this.

In regards to the Lazy Load, Bricks has an option in Bricks > Settings to offset the default value of pixels for Lazy Loading to occur. I’ve been setting all my Bricks sites to 900px and haven’t seen any issues with image rendering.

Hopefully one or both of these will help with this for you.

Thank you,
Rhett

1 Like