Parallax Laggy Scroll

Hey there,

I’ve designed a website and when I scroll the sections are laggy and I’m wanting to make the scrolling as smooth as possible.

Here is my site Read-Only: Prospectabot

Would apprecite some help.

Thank you.

Hi @tim.a :wave:

I noticed your team images at the bottom of the site are huge for what they’re used for. I removed these, and the site seemed to scroll a lot smoother. This is also the case on the other page they’re used on.

I would recommend making your images physically smaller and then running them through tiny.png and see if that helps. It should help if the browser doesn’t have to render these large images while also trying to make sure the interactions are smooth.

Let me know how it goes. :slight_smile:

Let me know if that solves your issue.

Hey @magicmark,

I’ve optimised the images, the scrolling is still laggy and switches between section and footer.

Hey @tim.a

You’ll need to resize the actual pixel size.

The issue is you have an image that’s >5000px wide that being forced into a div as a background image that’s only 160px wide.

Resize your image using Photoshop, or the Mac native image resizer. You only need them 400px max width with a resolution of 72px.

600kb is still pretty big for an image on a large website too, just 10 of those images and you have a 6mb page which will slow down performance and can harm SEO.

You should be able to get this to >60kb and no-one will tell the difference in quality.

24%20pm

I’ve tested this locally and it solves the laggy scrolling.

1 Like

Thank you Mark! You’ve helped solved the problem, another problem. When a new page loads it flashes white. Is there a way to hide that or would that be an optimisation problem?

I’m not exactly sure of which interaction is causing that, but I removed the Page load interactions which stopped the white flash… you would need to look deeper into those to what’s causing them I think.