White flickering/flashing when changing tab in chrome to react site-CodePudding

The

You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.

Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'

I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash. My question is how can I improve this? and what is related to this?

Most of the questions here are related to some stuff that is in react-native, but my app is react web. I have read about

(screenshots inside red lines are indicating white screen flashing moment)

Most Probable Reasons at the Moment

according to Chrome Performance Tab Lighthouse audit, these problems are existing in that flashing moment.

treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.

lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).

too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.

this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.

CodePudding user response：

Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).

Perhaps turning Hardware Acceleration off will fix the issue?

You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.

I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?