Page performance lag when scrolling on a page with Lenis and lots of images #307
-
|
I'm having trouble with the Lenis scroll becoming lagggy / jumpy on a image heavy page when scrolling. The page is long and there are often between 10–30 images in a long scrolling column, and when scrolling the page becomes laggy. I note that when I reduce the number of images to 8 for example, the performance issues when scrolling disappear. Has anyone else experienced this? Is this a correlation that anyone can speak to? Grateful for any tips or thoughts. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Is it still lagging if you remove Lenis ? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, thanks for your reply. I haven't been able to reproduce it in a Stackblitz so far — here is my Stackblitz reproduction where the image gallery and smooth scroll seem to perform without issues: Stackblitz. So for now I will keep testing. Contrast that to my deployed link where I am experiencing the issue: Staging |
Beta Was this translation helpful? Give feedback.
-
|
@henrybabbage I tried profiling your webpage and noticed that what takes most of the time when scrolling is the browser painting the actual images. This is because most of the images you're loading in ultra high resolution (3840x2561 for example). This is unnecessarily huge and the browser has to do A LOT when it paints each frame. Optimizing the image resolutions should be the very first step in mitigating these performance issues. Whenever you encounter stuttering or lag, it's always super helpful to give a peek to the profiler (chrome dev tools). It's working better in the stackblitz because it's loading in smaller images (because of how the srcset for the images is set up) because of the smaller viewport. Best practice is loading the image with a resolution that is the biggest it might be visible in those specific breakpoints and handling dpi in your image srcset rules too. This will ensure that if any performance issues arise, you know it's not because of unnecessarily high resolution images. Oh, and this is 100% not a lenis issue. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @iamlinkus, I meant to reply sooner — thank you very much for your reply, and for the time taken to offer generous feedback regarding debugging the image loading. That's been very helpful, many thanks again. |
Beta Was this translation helpful? Give feedback.
@henrybabbage I tried profiling your webpage and noticed that what takes most of the time when scrolling is the browser painting the actual images. This is because most of the images you're loading in ultra high resolution (3840x2561 for example). This is unnecessarily huge and the browser has to do A LOT when it paints each frame.
Optimizing the image resolutions should be the very first step in mitigating these performance issues. Whenever you encounter stuttering or lag, it's always super helpful to give a peek to the profiler (chrome dev tools).
It's working better in the stackblitz because it's loading in smaller images (because of how the srcset for the images is set up) because of …