Why does my website scroll slowly, and why are its hover effects laggy? How can I fix this?

Question

So I have this site here which has major performance issues. Scrolling is very slow, hover effects have a bit of lag and other similar issue. Unfortunately right now I am working off a cheap host so I don't have the option to gzip my files and I am not sure how big a contributing factor that is, though. For what it's worth, I am using Drupal as a CMS.

I would like to know the various reasons for the lag and what I can do to fix it.

Some about:memory stats for the homepage :

Memory:
- Private:49664k
- Shared:13052k
- Total: 62716k

Virtual Memory:
- Private : 53400k
- Mapped : 10412;

Let me know if you need any more information.

Answer 1

It seems fine on my machine (2009 MacBook Pro running Chrome 10), but I think you need to pick apart the idea of “performance”.

gzipping reduces the size of the text files that make up your site, so it reduces the time required for them to get from your web server to end users’ machines. That happens before the page loads in the user’s browser. It doesn’t affect the scrolling speed of the page once it’s loaded.

There does seem to be a metric crap-ton of JavaScript files included on the page, a few of which have “scroll” in their name. I’m not sure if any of them are running when the user scrolls, and thus slowing the browser down, but it seems like the most likely candidate for slow scrolling. (Ooh — unless meagar’s comment about background-size: cover; is right.)

Edit: as background-size: cover seems to be the issue, I’d suggest removing it, and making your background image reasonably big, so that it looks acceptable at most screen resolutions. You might want to get whoever made the image to edit it so that it fades out to a single color at the edges, so that it blends into your background-color for users on higher resolutions.

Answer 2

I removed the background image and positioning using Firebug and the scrolling instantly speeded up.

Part of the speed will be the various JavaScript components, but the most noticable 'lag' was the fixed 2000x2000 image specified in the CSS for the HTML element.