White background when image loads
Hi.
This is my site in Next.js. When the page reloads, a white background is displayed behind the image of the hero section, especially when you visit another page from the navbar like About or Solutions
Can we avoid it or reduce this effect?
https://visible-paths-six.vercel.app/
VisiblePaths | Welcome
VisiblePaths is a platform for your cars
10 Replies
I would initally recommend a couple of things.
1. Preload the first image using the
<link rel="preload"> tag.
2. Remove the loading="lazy" from the first image. This is potentially slowing down it's load time as the browser is waiting to load it.this is known as a fouc - flash of unstyled content
besides what chris said, i would add JUUUUUUUUUST the bare minimum css to show the background image
and i would go even further: reduce the image to about 32 width, and then blur the living shit out of that
then, convert the result to a base64 data uri
and use that image as a shitty placeholder, until the big one loads
this way, you no longer have a flash of white
You could also add the attribute
fetchpriority="high" to the first image to encourage the browser to load it sooner. (this might not work on all browsers).yes, that could work
but it depends if the cache is set properly too
that is another thing - the cache
As the image URLs have paramters they most likely won't be stored in the cache
if it is set to revalidate, then it will contact the server first, and will always flash white
which is why i gave the suggestion of using a base64 shitty version of the big image
Okay. Thank you guys, a lot.
That was a great idea.
did it worked?
How do you use it as a placeholder ? Do you put it underneath the other image tag ?
either as a background or as the
src that loads and that then you swap for the big image
both should work fine
if it is a base64 data uri, then it should load nearly instantly, which makes it great for this