Really sluggish scroll behaviour on a website …

Question

I'm currently working on this site … http://bit.ly/yR6xzta

When scrolling through the site or navigating with the Up and Down Arrow Keys you'll notice a really sluggish and slow Scroll Behaviour.

Any idea what could cause that? I'm using HTML5 and simple img tags with 85% width and 85% height. Javascript is not the reason. If I get rid of all JS completely it is still sluggish.

Any idea what is causing that? I'd love to increase the performance of this site when scrolling.

Thank you for your help.

Answer 1

There are quite a few of images here, one way to make this process a lot smoother is to asynchronous add and remove images. This will allow the on page memory to remain low and less computing power to load/display the images. The logic is simple: When your on one slide, load +5/-5 slides' images (some slides have more than one image so we'll base it on slide). Use your arrow key events and add a scroll event to call an async method to determine what slides to load and what slides to get rid of any tag.

You can test the memory concept by simply replacing all the images with text. Your experience should improve greatly.

Note: You'll have to use CSS to keep the image containers a constant height so your scroll height does not change and displace your view pane.

Answer 2

Both scrolling and arrow keys are smooth as butter on my gaming rig and basically unusable on my Chromebook. The long and short of it is that you have 51 million pixels worth of images on a single page, (probably 10MB or so?). Performance when moving that around is going to depend heavily on how the browser handles it (hardware accelerated or not) and on the hardware itself. This will be especially true on laptops where power management is baked into the OS. For example, JS cannot trigger a switch to dedicated graphics which means that moving all those pixels around is given to the CPU (really not what it's meant to do).

Options to consider:

• Load images only as the user scrolls towards them (fade them in when they are done loading to make them look nice)
• Once images are loaded, delete/hide them until the user scrolls to them so the client doesn't have to render all the images all the time (opacity: 0; will not work but display: none; or visibility: hidden; might. You can also remove the nodes outright, they will load instantly later if you add them back in because they will be cached.)
• Split each section into it's own page. I know it's not as elegant but it might be necessary. Not everyone has $400 GPUs...

Answer 3

try to downscale the images and i think it is js related.