Flash of unstyled content FOUC

  • Resolved Matt Schofield

    (@mattschofield)


    2 years, 11 months ago

    Tabs are affected by a flash Of Unstyled Content (FOUC) on page load. It’s mostly only a problem when a tab is required above the fold, but unfortunately, that’s where we need them on many of our pages. But the FOUC issue is visible on any site/page if you refresh the page with tabs inside the viewport (including the tabby demo page).

    I’m curious of this line in the page html…

    <script>window.addEventListener('DOMContentLoaded', function() {jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })});</script>

    This appears to be calling for tabs content to draw when the html has loaded but before tabbys stylesheet has loaded? Where we actually need the stylesheet loading earlier so it’s ready for the content and eliminates the FOUC?

    We’re hiding the fouc for now by adding a fade in animation to the tabs, but animations aren’t fitting the site design or topic very well.

    Thanks for looking

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author cubecolour

    (@numeeja)

    I’ll put it on my to do list to have a look at this, but it won’t be high priority as it would mostly be noticed only when hitting the refresh button.

    Thread Starter Matt Schofield

    (@mattschofield)

    I have to disagree. It would be mostly noticed by every visitor to any page with tabs near the top of the page. And Google see’s it too, and gives it a score that impacts SEO under the Content Layout Shift assessment. Google doesn’t see or grade the CLS of objects outside of the viewport, so any tabs further down the page content have no impact. And the call for occasion for visitors to refresh a page that’s partially scrolled is minimal really.

    It’s just unfortunate for our use-case that the top of the page is where our tabs are required because this is a perfect tabs plugin otherwise. And it’s unfortunate that the animation approach we need to use to hide the fouc is itself also a compromise.

    We’re staging another tabs plugin at the moment that’s performing okay, but will check back in the hope you’ve found a fix at some point. A bit nervous you mentioned low priority, that’s all. Thanks again for looking.

    Plugin Author cubecolour

    (@numeeja)

    The tabby.js script has to see the content to be turned into tabs before it can transform it into tabs. If the script runs before the html exists, we will not see any tabs, just headings and content.

    This is the way the script that this plugin was created around was built. To change this it would require an extensive rebuild of the plugin as elements added to the html by javascript would need to be added by the shortcode in PHP, but also preseve backward compatibility.

    If the other plugin is working better for your use-case I think its best to continue to use that one.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Flash of unstyled content FOUC’ is closed to new replies.