[Resolved] Flash of Unstyled Content (FOUC) problem (SOLVED!)

[Lisa Thompson]

I have been having a pretty substantial problem with FOUC on one of the Wordpress sites I manage since installing Litespeed cache along with the LiteSpeed Cache plugin. Is there anything I can tweak in the Litespeed server settings and/or in the plugin settings to correct this issue? Thanks for any help you can provide.

My current settings:
Server Variables

    X-LSCACHE = on
    LSWCP_TAG_PREFIX = b0e

Wordpress Specific Extras

    wordpress version = 4.9.1

LSCache Plugin Options

    version = 1.7.1.1
    radio_select = 1
    purge_upgrade = true
    cache_priv = true
    cache_commenter = true
    cache_rest = true
    cache_page_login = true
    timed_urls =
    timed_urls_time =
    cache_favicon = true
    cache_resources = true
    mobileview_enabled = false
    mobileview_rules =
    cache_uri_priv =
    cache_browser = false
    login_cookie =
    check_advancedcache = true
    debug = 0
    admin_ips = 127.0.0.1
    debug_level = false
    log_file_size = 30
    heartbeat = true
    debug_cookie = false
    collaps_qs = false
    log_filters = false
    log_ignore_filters = gettext
gettext_with_context
get_the_terms
get_term
    log_ignore_part_filters = i18n
locale
settings
option
    public_ttl = 604800
    private_ttl = 1800
    front_page_ttl = 604800
    feed_ttl = 0
    403_ttl = 3600
    404_ttl = 3600
    500_ttl = 3600
    purge_by_post = A.F.H.M.PGS.PGSRP.PT.T
    excludes_uri =
    excludes_qs =
    excludes_cat =
    excludes_tag =
    css_minify = true
    css_combine = true
    css_combined_priority = false
    css_http2 = true
    css_exclude =
    js_minify = true
    js_combine = true
    js_combined_priority = false
    js_http2 = true
    js_exclude =
    optimize_ttl = 604800
    html_minify = true
    optm_qs_rm = true
    optm_ggfonts_rm = false
    optm_css_async = true
    optm_js_defer = true
    optm_emoji_rm = false
    optm_excludes =
    optm_exclude_jquery = true
    cdn = false
    cdn_ori =
    cdn_exclude =
    cdn_remote_jquery = 0
    media_img_lazy = false
    media_img_lazy_placeholder =
    media_iframe_lazy = false
    hash = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    nocache_cookies =
    nocache_useragents =
    crawler_include_posts = true
    crawler_include_pages = true
    crawler_include_cats = true
    crawler_include_tags = true
    crawler_excludes_cpt =
    crawler_order_links = date_desc
    crawler_usleep = 500
    crawler_run_duration = 400
    crawler_run_interval = 600
    crawler_crawl_interval = 302400
    crawler_threads = 3
    crawler_load_limit = 1
    crawler_domain_ip =
    crawler_custom_sitemap =
    crawler_cron_active = false
    esi_enabled = false
    esi_cached_admbar = true
    esi_cached_commform = true
    media_img_optm_cron_off = false
    media_img_webp = false
    cache_browser_ttl = 2592000
    optm_ggfonts_async = true
    media_img_webp_only = false
    media_img_exif = false
    media_img_webp_lossless = false
    use_http_for_https_vary = false
    optm_max_size = 1.1999999999999999555910xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    optm_rm_comment = true

 

[lclarke]

Hi, Lisa

Thank you for sharing all of the detailed information.

You mention that you're having this problem on just one site - not any of the others you manage? Any idea what is different about that one site? Any different settings, or different plugins installed?

Does it happen on every page?
Does it continue to happen if you disable the minify and/or combine options?

Lisa

 

[Lisa Thompson]

Yes, it happens on all pages. Can't think of anything different on this site that would make it happen on this one and not others. I removed CSS & JS minify and combine options based on your suggestions, but I am still having the problem. Any other ideas? Thanks!

 

[lclarke]

Do you notice any errors in the developer tool in Chrome or Firefox?
Can you provide us with a copy of your Environment Report? Maybe something will jump out at us there.
(Navigate to LiteSpeed Cache > Report, press the Send to LiteSpeed button, make note of the "Report Number", and then post the number here so we can look it up.)

Thanks!

 

[Lisa Thompson]

Sorry Lisa, I have notifications on but somehow never got one about your reply here. I sent a report in, thanks!

LiteSpeed Report Number
Report number: JULEZTCK
Report date: 06/15/2018 16:08:38

 

[Lisa Thompson]

Solved!
Just wanted to report to anyone having this problem, that it was fixed by installing the newest version of the plugin (v2.3)! (Thanks Lisa for the suggestion!)
Turned out that it had to do with the "Load CSS Asynchronously" setting. It was trying to load the page before it has loaded the critical CSS that is needed to format the page correctly.
Turns out, the newest version of the plugin has a new feature that actually calculates that critical CSS beforehand, and loads it first thing.
Installing it fix the problem! Yay!