Browser-laptop: Background images of the new tab should be cached or optimized

[luixxiul]

Updated plan, per @petemill

• have hard-coded property in wallpaper JSON that specifies if image is bundled.
• In browser process, start a download process when all intensive tasks have completed (perhaps when initial windows have loaded) that downloads the other images. (or if we want to be more polite, perhaps only download 1 new image every time a new tab page is opened...?)
• store in state which images have been downloaded, verify that they are on disk (or just find which images have been downloaded by looking in 'wallpaper' dir, and don't save to session-store).
• new tab page reads from wallpaper json but only selects a random item from filtered list where item === bundled or item === downloaded

Original issue description

Expected behavior:
https://community.brave.com/t/volunteers-needed-beta-test-of-0-13-0-preview-7/459/8?u=suguru

It would be better for having a caching mechanism for Dashboard wallpaper or optimize image size for saving bandwidth.

+1 from me too

• Brave Version (revision SHA): 0.12.15

• Any related issues:

[bsclifton]

+1 from https://github.com/brave/browser-laptop/issues/6937#issuecomment-280830618

I would suggest that we have a zip file which can be downloaded / extracted locally if backgrounds are enabled (instead of packaging the somewhat larger images with our install). Having them locally would work nicely (especially from the bandwidth perspective)

The images should be loading from cache, but based on performance, I don't think they are 😦

[luixxiul]

I notice npm run test often fails due to timeout because images are not fetched in time.

@bsclifton I think it is worth trying to disable images on dashboard / to add a flag to disable it like SHOW_DASHBOARD_IMAGE=false npm run test. what would you think?

[bsclifton]

@luixxiul this is a great idea- should be easy enough to do 😄

Any of the tests that you wish to set this, you can use the .changeSetting helper like so:

yield this.app.client
  .changeSetting(settings.SHOW_DASHBOARD_IMAGES, false)
  //test here

[bsclifton]

another option: we could default that setting to false if NODE_ENV is test

[luixxiul]

I opened an issue for that: #9240.

[kjozwiak]

One of the other main issues with downloading the dashboard (about:newtab) images rather than loading them from cache is that Brave will appear very slow/janky to users that have a slow internet connection.

I've seen this happen when my internet occasionally slows down which makes the entire browser feel very sluggish whenever opening new tabs. When I first ran into this, I assumed that I had some type of memory leak which was affecting Brave's performance.

Once we get more users in a variety of different markets with different internet speeds, I think this will become a bigger issue and we'll get more complaints from the community.

I know that the images are aesthetically pleasing, but have we looked at potentially removing them and going a different route? There's definitely some performance wins there.

Example:

[eljuno]

+1 from community https://community.brave.com/t/performance-ui-new-tab-with-pre-loaded-image/5691?u=eljuno

one thing is annoying for me: every time I open a new tab I see a fade black to a white background. The background image is loaded one or two seconds later. I think will much better show just pre-loaded backgrounds and download images when I’m doing any other thing.

[Shought]

+1 I've also noticed this issue and posted about it on the community. Its something really basic but yet really annoying that needs to be fixed. https://community.brave.com/t/background-image-loading-slow/6278/2

[luixxiul]

@Shought you could disable the background image with the option on about:preferences#tabs.

[LaurenWags]

+1 from community - https://community.brave.com/t/new-tab-opening-too-slow/6438

[shiksaprincess]

Is there a way to customize the new tab wallpaper with your own image? Something like https://chrome.google.com/webstore/detail/new-tab-wallpaper/pcnhoifipedfmkajgigiefacnnlkpdjd?hl=en

[kjozwiak]

Is there a way to customize the new tab wallpaper with your own image? Something like https://chrome.google.com/webstore/detail/new-tab-wallpaper/pcnhoifipedfmkajgigiefacnnlkpdjd?hl=en

@shiksaprincess, currently there's no way of adding/customizing wallpapers. You can only enable/disable the wallpapers via about:preferences#tabs.

[bsclifton]

Closing in favor of https://github.com/brave/brave-browser/issues/1361