#76846 Header and menu flicker on loading page

Landing Forums JupiterX WordPress Theme Header and menu flicker on loading page

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • Brian

    On loading of the website using JupiterX theme the fonts in the header and the fonts in the menu flicker on page load. It may not just be the fonts as the whole sections seem to shift from right to left on page load. Any ideas on what may be causing this?

     

     

     

    Nodari Support Team

    Hi Brian

    This is what I have when testing your problem: https://www.loom.com/share/40aa02d5e7854b809ef264c5ed6c0777
    Did I miss something?

    Thanks

    Brian

    Hi Nodari,

    Its occurs at seconds 4-5 in your video, on slower internet connections it is more pronounced but there is a flick there between 4-5 and a slight one at 12-13 on the text in the header and in the menu items text. On occasion it does appear that the font style changes in that moment of the flicker and/or a resize of the page/sections occur.

    Thanks

    • This reply was modified 1 month ago by Brian.
    Nodari Support Team

    Hey Brian

    Ok, in this case, you may need to consider using of caching and optimization plugins on your site, this will change the behavior of the loading scripts and styles, please take a look here: https://themes.artbees.net/blog/speed-up-your-website-in-jupiter-x/

    Let me know if it worked, in general, such behavior is normal and you may see a similar effect on most WordPress sites

    Brian

    I have purchased and installed WP Rocket on the website but am still seeing this issue on occasion

    Private
    Tatyana Hutsol Support Team
    This reply has been marked as private.
    Private
    Brian
    This reply has been marked as private.
    Mohsin Al-Rabieai Support Team

    Hi Brian,

    My apologies for the delayed response. Kindly add this CSS in Customizer -> Additional CSS:

    html.wf-loading body .jupiterx-site, html.wf-loading h3, html.wf-loading h4 {
        font-family: sans-serif;
    }

    This should resolve the flickering issue until the font files load.

    Bests

    Private
    Brian
    This reply has been marked as private.
    Mohsin Al-Rabieai Support Team

    Hi Brian,

    My apologies for the delay. But by flickering, you mean the font change? Before I give you the CSS snippet to add to your website, the flickering was like hiding the menu and some items on the page and after the page loaded, the items were showing up. However, now, it acts like it shows the menu items with a different font until the google font actually loads. This is how it acts. actually, the web font loader acts like this. Until the google fonts load, the texts are unstyled. Do you mean that it still hides the texts and then shows them after the page loads? Because as I checked your website again, it was not happening.

    Bests

    Brian

    Hi,

    What I am experiencing is FOUT (Flash Of Unstyled Text) . The caching plugin WPRocket is doing its best to reduce this but on occasion it still occurs. If you use Chrome and then use “Ctrl + <b>F5</b>” and “Ctrl + <b>Shift</b> + R” to refresh the page you will see that in the orange banner at the top of the page the text displays with default browser font and then get restyled when the google font loads. When I use your CSS snippet I find that the effect is slightly worse as when page loads it seems to display default font, then gets restyled to sans-serif and then finally displays in the goggle font.

    Is there a way to avoid FOUT (Flash Of Unstyled Text) in JupiterX? In Jupiter the preloader can be used to hide this limitation when using web font loader.

    Thanks in help with this.

    Mohsin Al-Rabieai Support Team

    Hi Brian,

    Please accept my sincere apologies for the delayed response. Actually, this is how Webfont loader JS library works. There is no way to do it another way in Jupiter X except you load the fonts locally instead of Google Fonts. Kindly try this plugin, add the google fonts that you are using and make them local:

    https://wordpress.org/plugins/host-webfonts-local/

    It should be helping this.

    Best Regards

Viewing 12 posts - 1 through 12 (of 12 total)
You must be logged in to reply to this topic. Login