Images loading slow in a full page slider

JavaScript
1

Hi Evryone,

I just have this little problem with a website that I am developing for a friend’s restaurant, the wesite it’s already online as landing page and I will keep developing the other sections that he wants.

as a landing page I created this full page slider with 4/5 images sliding in auto and in local I have no issues everything working smoth, but after deployed if you check the Website for the first I reckon 20 sec the images are loading slow infact you can see the grey ugly background and after they start to go smoth I don’t understant what the cause may be.
the smallest image is around 96kb and the biggest around 324kb so they are not big images.

The images are stored in a folder called assets and I created a file called utils where I created an array and store these images in this way in my slider I will map through them and display.

Any Idea?

Thank you very much for your help

2

Hi @MikeTheBard,

I can think of a couple of problems. It would be great if you can share a source code so we can help you.

3

Hi sherbakov yes sorry I forgot to share the source code Github

thanks for your help

4

@MikeTheBard, thanks for sharing!

My first recommendation is to migrate from Create React App(CRA) to Next.js as you build a static website so you can preload all the information and generate static HTML files.

CRA isn’t very suitable for websites as it won’t generate static assets like HTML pages but will only provide JS file that will generate all the HTML on the fly. It will slow down your website’s initial loading and can cause problems with indexing your website in search engines.

UPD: Next.js has a special component to optimize images https://nextjs.org/docs/api-reference/next/image

5

Initially I was thinking to use gatsby but all the issues with the plugins putting me off and I decide to go with react .
I never used next but I don’t think is very difficult to pick up, but if for the moment I want to finish the project with react and in the future migrate what can I do to fix the issue?
What do you think If instead of getting the images from the asset folder I upload the images on contentful ?

6

To fix the issue, you need to preload all the images. There is no easy way to do it.

What you can try:
In your implementation, you remove the DOM image, create another node, and fill it with another image. What if you will render all the images at once but hide all except one via CSS(display: none). Then change the display property for the needed picture. In this case, React will preload all the images as all of them will exist in the DOM.