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

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…