Site speed > how to prevent Flash of Unstyled Content ? ( FOUT)

[website2fix]

Hi guys!

I’m finishing up the site for speed, and currently using an plugin called : Swift-optimize pro …

Everything is good BUT, I got 1 problem…

The only problem is that pesky “Flash of Unstyled Content” (aka. “FOUT”) effect where the user is presented with the page very briefly without any styling, then the whole page re-renders onces the stylesheets have loaded…

(it even flashes the MODAL option on load… really not a nice experience…)

How can i Fix/ prevent this?

I hope some of you more tech guru’s have worked with Swift-optimize and Xtheme… as it should be compatible…

Hope someone really can point me out to the right direction to prevent this ‘quick unstyled content’ thingy.

really appreciated!!

[rad]

Hi @creativeG,

Thanks for reaching out.

This doesn’t seem to be related to the theme. It seems to be optimization related. How about turning off optimization and minification for now so we could confirm it?

The browser doesn’t work that way but looks like the loading is affected by asynchronous download of resources. Giving the browser an instant time to render the content while the rest aren’t loaded yet.

Thanks!

[website2fix]

Well yes, obviously its gone when the optimization plugin is off…

But im asking if anyone / users / or staff, are familair with the Swif-performance tool in combination with X theme? So i can find a fix for that issue…

Thanks !

[christian]

Hey @creativeG,

FOUT is a tricky thing to fix. There’s nothing in the theme that could fix it because It requires a combination of factors including what font family you’re using, your site optimization, scripts, etc… The most common trick is to use a fallback font that looks the same as the font family you’re using.

Personally and speaking as support staff in general, we do not have Swif knowledge and we could not offer advice for it. You can try the Peer to Peer forum maybe a fellow user has an experience.

Hope that gives an idea of where we stand as support staff with regards to this concern.

[website2fix]

hey thanks, its allright i thought i’d ask just to be sure!

Something else;

So now i have a modal content with CF7 form in it…
How do i make the modal close after successful submitting the cf7 form? Couldn’t find it anywhere…

Now after submit, the windows stay’s open, kind of annoying.

Hope you guys got a solution for this! Thanks!

[ruenel]

Hello There,

Thanks for updating in! With contact form 7, you can add a DOM events on submit or when the form details were successfully sent. Simply add this code in the custom JS section:

jQuery(document).addEventListener( 'wpcf7submit', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        jQuery('.x-modal-close').trigger('click');
    }
}, false );

Assuming 123 is the form ID.
For more details, please check this out: https://contactform7.com/dom-events/

[website2fix]

Thanks for your reply, but that didnt work…

I was able to submit the form, but modal doesn’t close… and yes i changed the ‘123’ to the id nr of the cf.

[Alaa]

Hi @creativeG

I’m sure that adding this JS code instead of the previous one should work, I’ve tested that on my localhost:

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    jQuery('.x-modal-close').trigger('click');
}, false );

Thanks.

[website2fix]

hey AWESOME! Works! Is there an line available to add, to delay the closing for like 1 - 2 seconds? so the user sees the confirmation message before close.

Thanks!

[jade]

Hi there,

Please try this:

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    setTimeout(function() {
         jQuery('.x-modal-close').trigger('click');
    }, 1000);
}, false );

Please note that as this is a custom code, we cannot provide further modification as it goes beyond the scope of our support.

Hope this helps.