Screen “flashes” for ~.5 sec on Firefox, less noticeably on Chrom

  • Resolved benspr

    (@benspr)


    5 years, 7 months ago

    I’m using autoptimize to inline critical css and defer javascript. Firefox apparently wants to redraw the whole page when the autoptimize css loads. The inlined CSS seems to do it’s job at first, but then the whole page goes blank white for half a second and is redrawn, I assume using the cached stylesheet as it loads at the end of the body.

    On Chrome, the “flash” happens very quickly and not on all pages.

    In case it’s relevant, I’m using Autoptimize with WP Fastest Cache and Cloudflare.

    The URL I need help with is representative of the problem, but this is happening on the whole site.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    this looks like some JS this is “unhiding” the page after the onload event, which is kind of confirmed when JS is disabled (using noscript on firefox) as the “flash” doesn’t occur any more. looks like it’s part of the visualoptimizer code?

    hope this helps,
    frank

    Thread Starter benspr

    (@benspr)

    Thanks, Frank. That may be the case.

    I’ve also been playing around a bit and it seems like unchecking the box that says “Also aggregate inline CSS?” gets rid of this problem. At least for now!

    I might also nix that VWO code, because I use Google Optimize more, anyway.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Unchecking “Also aggregate inline CSS?” might hide the flash, but that will probably result in the page not rendering as fast (I *think* the inline CSS sets opacity of the body to 0, hiding it until the opacity is set to 1 by the JS).

    It’s not impossible that Google Optimize does something similar; multi-var testing has JS make changes to the page and to make that less intrusive the page is often hidden until the UI has been changed by JS. As such having a fast “start render/ paint”-time and multi-var testing are in conflict.

    Thread Starter benspr

    (@benspr)

    Interesting. Would you say it’s a good idea to eliminate the Google Optimize Code unless I’m actively running experiments?

    Also: I’m now seeing Autoptimize js scripts listed in Pagespeed Insights as render-blocking. For example: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.solarpowerrocks.com%2Fflorida%2F&tab=desktop

    Is that possibly because Autoptimize is aggregating the Google Optimize script, and therefore the page reloads itself (unseen to the user) as the cached js runs at the end of the body?

    Other reasons?

    • This reply was modified 5 years, 7 months ago by benspr.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Would you say it’s a good idea to eliminate the Google Optimize Code unless I’m actively running experiments?

    yes, I would ??

    Also: I’m now seeing Autoptimize js scripts listed in Pagespeed Insights as render-blocking.

    those are unminified JS-files that were excluded from optimization, which AO minifies but leaves un-aggregated.

    Thread Starter benspr

    (@benspr)

    Anything to be done about that? Looks like at least one of them is a jQuery script for share counts in the social plugin the site uses.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Well, if those _have_ to be excluded, you could try to async those either by using the async field in AO’s Extra tab or by using the async javascript tab.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Screen “flashes” for ~.5 sec on Firefox, less noticeably on Chrom’ is closed to new replies.