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

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:

-开发者_C百科 Private:49664k

- Shared:13052k

- Total: 62716k

Virtual Memory:

- Private : 53400k

- Mapped : 10412;

Let me know if you need any more information.

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.

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.

Well, CMS usually cause a lot of lag. Why: because they have a tendency to boast a convoluted pile of malarkey called JavaScript, which seduces the user to utilize by offering simple usage. In most cases, JavaScript is essentially useless. I have encountered websites that looked good, but that give even my newest alienware-gaming-machine indigestion. Reason is: JavaScript was used, for nearly everything. This slows things down, immensely, whether you use a CMS or copy-paste a custom webpage.

Simple design rule I've learnt: use JavaSript when necessary for a task. Never, ever in cases where it does not add any functionality, or do it only when you are learning and want to test thing and naturally when your customers keep banging at your door because they want animated pop-ups, parallax scrolling and the like.

There are instances, where you will need JS, even for eyecandy, but on too many pages, it is too much. Result: people will love your webpage, where your photo gallery page won't take 15 seconds to display a meezly new picture or the scrolling speed will make you think that the internet was actually "faster" in the early 1990s...