Home
Support Forums

My sites are running pretty slow.. Pretty sure its something Im doing, just not sure what

Hi, I am sort of new to all of this so do bear with me.

I made a site that contains quite a bit of media:

friendly-booth-11e6f0.netlify.app which is published under the domain name haarlembijnacht.com

Issues are mainly to do with speed. haarlembijnacht has an array of images that the button selects from, each one is about 500-800kb. I expect a bit of lag, but it will pause for almost a second. Meanwhile the text section on the left updates immediately (also randomly from an array).

There are times when the site is much snappier, but it can’t predict when that will be or what is happening.

I did a bit of poking around with devtools in the browser and there was some suggestion about having script links in the HTML head element not set to deferred or something. Not sure if that might be what it is - but I would love this site to work the way it does when Im looking at it in VS Code.

Thanks,
Mishal

Hi @mishalzeera

Welcome to the Netlify community.

Yes, they are large images. Lag is expected. A couple of things you could try is using a tools such as Squoosh to make your JPEG images smaller in size. You could also try using WebP image format. Then there is using a service such as ImageKit which allows the transforming your images (size, rotation, colour, etc.) when they are served.

The placement of scripts, and defer/async depends on when you want/need the script to load. Have a look at <script>: The Script element - HTML: HyperText Markup Language | MDN for more information on this.

Thank you, I made the photos smaller and put the script tags in a better place. Def the site is better, although I am still getting this weird lag like it pauses over the old image, then changes it a split second later. Bear in mind everything on the page is updating at once, so its a bit noticeable.

Much better though and thank you for your suggestions, especially Squoosh - made the images 1/10 in size in some cases and I cannot tell the difference.

hi there @mishalzeera ,

one thing you can do is to capture a HAR file for us - that should show us what your loading is like so we can take a closer look:

https://toolbox.googleapps.com/apps/har_analyzer/