We Keep Coding

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

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)
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?

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,
OS can slow down the performance due to its update issue. what OS are you using?
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:
Chrome Performance Tab
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.
(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.

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?

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

Trying to speed up load time on my website

I am in the process of trying to speed up my HTML website and the first thing I have done is to reduce the images to the exact size that they are loaded into.
My PageSpeed Insight for desktop is 90 which I am very happy with but for mobile, it is 24, which isn't so good (was 19 before I did the images)! It says that I can save 4 seconds if I "remove unused JavaScript" but I haven't added any JavaScript to my website yet (only just taught myself HTML and CSS so moving onto JavaScript soon).
So I am wondering what this unused JavaScript is and how I can remove it if I wasn't the one to add it in there in the first place. Any other tips on how to speed up the website will be much appreciated!
Thank you!

If by "speed up the page" you mean improve the performances of your website:
Changing the dimension of images don't necessary mean that they are "optimized for the web". You can find tools like https://optimage.app/ and information on the web on how to compress them.
You can use the inspector of your browser (Right-click on the page + Inspect) to do this :
Go to Network Tab, clear all logged requests then reload the page you will be able to see which requests are the most time-expensives and maybe do something about it.
Go to performance, start recording, reproduce the actions that you want to analyze
(You can zoom in and out in the timeline and click on the element to have more details)

Delete all Javascript from your website

Noticeable pause and stutter between page navigation

I recently started uses Onsen-ui, and I am having a lot of fun with it.
I am using crosswalk for my Android application and this has gotten rid of almost every performance issue I've had. Pages scroll smoothly and everything is super responsive!
The only issue that remains is that there is a noticeable stutter between page changes. When I tap the button to go back (or to navigate forward to another page), the app will seem to 'pause' very briefly (similar to the 300ms click issue, but not the same because everything else is instantly responsive), then it will proceed to play the first one or two frames of the page transition animation, stutter again, and then complete the animation smoothly.
This is very jarring and really ruins the experience in an app where you navigate from page to page frequently!
I don't known what's causing the issue, but if I had to guess I would say that the first stutter is caused by AngularJs loading in the template data and the second is AngularJs actually processing the data once it is loaded (binding to all the properties - or whatever the correct term is! I'm new, forgive me :) ). Maybe the issue could be resolved by caching templates if angular supports such a thing?
Of course this is just a guess, love to hear if you guys had similar issues and would love a solution!
Note that this is tagged as Android + Crosswalk, but I don't mean to single out Android. The issue might be persistent in iOS too, but I don't have an iOS device to test on.

Mobile Safari crash first time page is loaded

I've built a Javascript-heavy web app and recently tweaked it to work on iPad (it needed tweaks because it allows drawing by moving the mouse around, and onmousedown/onmousemove would not get triggered until finger release).
Now, with the tweaks, the app runs fine on Mobile Safari. I'm seeing a problem, however, where the first time I try to load the app on the iPad, it often crashes Mobile Safari. However, reopening the browser and refreshing the page loads the app perfectly and it's fully usable. After doing some research I found out that the most common cause for Mobile Safari crash is over 6MB of pictures or multiple pictures loaded through Javascript. My app only uses images for icons, so the total image size is actually very small (probably under 100KB total), my JS code, however, is 2.5MB uncompressed and 350KB compressed using gz (which is how I'm sending it to the client).
I've also read that loading images through CSS can avoid crashes due to the image size limit. I figured it was worth a try since it's also possible the crash is due to large number of images, not just total image size. After changing some of my icons to be rendered using CSS background-image property, the crash seemed to have gone. I decided to go a step further and tweak all other icons to render using CSS backgrounds as well. After changing all of my images to be rendered using CSS, all of a sudden the crash seems to be back.
Which leads me to several possible conclusions:
A.) Even the partial CSS fix I made did not actually help but somehow I got extremely lucky and saw no crash while reloading my app and restarting the iPad multiple times (then the crash is likely somewhere with my JS code or other parts of the page)
B.) I introduced some other issue when changing the rest of my icons to load through css (if that's the case, I wouldn't expect reloading the page to fix the issue, but it does)
C.) The crash is due to something in my Javascript unrelated to images (but then why does it load and work correctly after reload)
D.) iPad chokes when trying to render/uncompress that much Javascript at once (I haven't heard of this being an issue, but it's also rare to see a chunk of Javascript this big)
Does anyone know what other issues aside from 6MB image limit can cause Mobile Safari to crash the first time a page is loaded, but not the second?
If it helps, here is the link to my web app (this is the old version that loads images through JS): http://www.grafpad.com/grafpad/canvas/demo (it's written in Pyjamas, which is why there is so much generated Javascript).
Thanks

You need to remember that compared to your desktop the iPad is seriously underpowered. Its particularly limited in memory. I noticed right away that there were many, many script blocks on the page. Without tearing your app apart completely to try and find the culprit you might start by combining, just to see if its just dealing with that many nodes that is causing the crash.

Why does my portfolio website take a long time to load?

When first visiting my site it stays on the splash screen for about a minute. I was wondering if it had to do with the file size of my pictures of my HTML and CSS code? You can check the HTML code by viewing the page source. I will add the CSS code if needed.
Here is my website: Tom Falzani Portfolio Website.

Whenever you meets performance issue, don't forget the network tab of your browser's developper debbuging tool. See Google Network Performance Documentation.
Here is a record of the initialisation and loading of your website, and if we take a deeper look at it, we see that the philly_scene.png file makes 6.3 MB and take 25 seconds to load and that the philly.png file makes 6.6 MB and takes 18 seconds.
To avoid this long loading time, you can try to ajust the both size of them using this link, for exemple. (Never used)
Or you can them asynchronously and deliver a first render of your website until they are actually loaded.
If you're using jQuery, take a look at the .load() function, there is also many others ways to do it like the Axios Promise or the Async library if you're using Node.js