Load JS in Head to avoid flash of hidden content?

  • Since the website I work on uses Cloudflare, I have the following options enabled:
    -Enable AJAX endpoint to get information for the current IP even on cached pages.
    -Add JS Helper functions to all pages.
    -Add a country-specific CSS class to the <body>-Tag (via AJAX).

    The localized content I have is above the fold and large. The localized content is an offer (like a coupon), where USA visitors are given a different offer than visitors outside of the US.

    My CSS looks like this:
    .geoip-country-US .non-usa, .usa {
    display: none;
    }
    .geoip-country-US .usa {
    display: block;
    }

    With the above setup, I have observed that USA visitors will see a flash of the non-USA content, before seeing the correct content. I was curious about whether loading the JS in the HTML head would either resolve this, or make it less noticeable? If you agree, what is the best way to go about loading it in the head?

    OTHER INFORMATION
    I have been testing all of this on a local environment. On my local environment, there is no flash of non-USA content when a) The first option to add country-specific CSS classes is enabled and b) AJAX is disabled. However, this isn’t a viable option since the production version of this site uses Cloudflare. Due to this, I am open if you think there is a better way to structure my CSS, however I doubt this can be fixed by CSS changes.

    I have WP Rocket and WP Meteor installed. For WP Meteor, I have excluded js/dist/frontend.js and the inline script with ID “geoip-detect-js-js-extra” from optimization. I have verified that both scripts lack the attributes that WP Meteor adds to scripts. Comparatively, the flash is shorter when those scripts excluded from optimization than when they are optimized. But it is still very noticeable.

    I also tried with WP Meteor deactivated. I would say that the flash is barely noticeable with it deactivated. However, due to the terrible way this website was coded, I can’t deactivate the WP Meteor plugin without causing a gigantic Lighthouse Performance score drop. I am working on building a new theme from scratch and converting to Gutenberg, but it will be awhile before that is ready. In the meantime, I unfortunately am stuck with this WP Meteor plugin.

    I doubt this could contribute to the issue, but in case you think it might – the website also uses the awful WPBakery page builder.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Benjamin Pick

    (@benjamin4)

    Hm, good question. The problem is that regardless how much we optimize it, there can always be a timeframe between “HTML is received and rendered” and “CSS is received and rendered” – the length mainly depends on the speed of the connection, probably.

    How about the strategy that AngularJS is using:
    https://stackoverflow.com/questions/16074673/angularjs-strategy-to-prevent-flash-of-unstyled-content-for-a-class

    Basically – hiding everything at first, then showing only what needs to be shown. You can do this already by using the show_if shortcode instead of the CSS method:

    [geoip_detect2_show_if country="US"] TEXT [/geoip_detect2_show_if]
    [geoip_detect2_hide_if country="US"] TEXT [/geoip_detect2_hide_if]

    Because in that case, the resulting html has already an attribute ‘style=”display: none!important”‘ by default.

    Does this solve your problem?

    Thread Starter lisadev

    (@lisadev)

    Thanks for your reply. I duplicated the page and tried with the shortcodes. The flash looks the same with both methods (very noticeable).

    Do I need to exclude another script from WP Meteor when I use the shortcodes? These are the scripts I have excluded:

    • js/dist/frontend.js
    • inline script with ID “geoip-detect-js-js-extra”
    Thread Starter lisadev

    (@lisadev)

    On further evaluation, it looks like this plugin works with Cloudflare geolocation. We actually have Cloudflare geolocation enabled. Would that allow us to add geolocation body classes server side?

    I wasn’t able to find any documentation about how the plugin works with Cloudflare. Does any exist? If so, can you please provide the link? Thanks!

    Plugin Author Benjamin Pick

    (@benjamin4)

    Yes you could create the body classes server-side, by removing ajax-mode and making content caching country-dependent? I’m not sure Cloudflare is able to do that.
    For a test, can you disable ajax mode and check without caching?

    Thread Starter lisadev

    (@lisadev)

    Hi Ben, yes you were right that using the Cloudflare detection doesn’t resolve this issue.

    I did a little more investigation with how other systems manage this issue. Many use a skeleton loader like this https://tailwindcss.com/docs/animation#pulse to show that the content is loading. (If you somehow don’t land on the correct one, scroll to the “Pulse” animation.) Is there a “loading” class that gets added to the body until the correct content loads? I didn’t observe one, but just wanted to check. It would be nice if the plugin did what the Tailwind pulse does, however if it has a loading class, I could probably build out the JavaScript to do something similar.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Load JS in Head to avoid flash of hidden content?’ is closed to new replies.