Website has “lagging” effect. Causes? Tips and tricks to fix?

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

Those aren't server issues. Once the page is loaded the server no longer has anything to do with the rendering and performance of the page. That's handled by the browser and device running the browser, in your case your computer.

I took a quick peek at your website and you've got enough JavaScript and <object>s to kill an elephant. There's just way too much stuff going on at once. You'll either need to make your site more efficient, which probably requires re-writing some of that JavaScript or removing it altogether, or simplify your page by removing content and putting it on other pages (or finding a better way to do it).

Answer 2

1. Fixed backgrounds tend to make scrolling sluggish in some browsers.
2. Same for setting a background image on the HTML element.

If this bothers you, then you should consider whether you really need the background to be fixed and whether you can move it to the body tag instead(it looks like you can).

Answer 3

The whole "lagging" effect was caused by this css attribute : background-size:cover This doesn't work well on a lot of systems.