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

user_8630901 0
Viewed 216

Hello StackOverflow ​

I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)

enter image description here

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 FOUC but I'm not really sure if it's the issue.

btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).

Thanks for help.

Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?

reactjs google-chrome javascript performance
3 Answers

The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.

Here's what comes to my mind:

Environment check before troubleshooting an web app

I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram

The machine spec only holds some portion of performance assessment. It may or may not matter. because,

  1. OS can slow down the performance due to its update issue. what OS are you using?
  2. Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?

So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.

Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.

Finding Problem with (any) Web App

If these little details are not causing the problem, it's time to get metrics inside browser.

I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.

Somebody already mentioned React devtool profiling in comment but I also recommend these tools:

  1. Chrome Performance Tab
  2. Chrome Lighthouse(previously Chrome Audit Tab)

Please try run a performance check with these tools first.

I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.

enter image description here

(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.

user_92927700

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?

user_198052240

So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app). The problem with the picture was - whopping 35,000 px width and 5,000 px height. You couldn't see it because it was inside a div with a fixed height and width. The way I found that - opened dev tools, and started to delete the divs. for example, we have:

<div id="root">
  <div>1</div>
  <div>2</div>
</div>

So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture. Very 'old school' but it is what it is (:

user_86309010
Related