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

13,352

Solution 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.

Solution 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.

Share:
13,352
bcosynot
Author by

bcosynot

Updated on June 24, 2022

Comments

  • bcosynot
    bcosynot over 1 year

    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.

  • bcosynot
    bcosynot over 12 years
    the gzipping part was just an idea. When I say performance, I mean after the page has loaded. And the symptoms have been mentioned already - lag in scrolling, hover effects..
  • Joe Dargie
    Joe Dargie over 12 years
    @vr3690: sure, I know — just explaining why gzipping probably has nothing to do with your problem. My answer did come across as a bit negative, apologies.
  • bcosynot
    bcosynot over 12 years
    no worries. the "scroll" js files are all jquery plugins. possible suspects, will have to check them out.
  • Joe Dargie
    Joe Dargie over 12 years
    @vr3690: yeah, you do seem to be using a lot of jQuery plugins. Although JavaScript performance in browsers has come on in leaps and bounds in recent versions, you want to be careful.
  • bcosynot
    bcosynot over 12 years
    yes, meager pointed out the same. there wasn't actually any need to completely remove the background. apparently background-size:cover was the main culprit.
  • bcosynot
    bcosynot over 12 years
    I know. Next on my to-do list is cutting down on the total amount of JS being used. meager was right though, removing background-size:cover instantly fixed the scrolling issues.