Why does my website scroll slowly, and why are its hover effects laggy? How can I fix this?
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.
bcosynot
Updated on June 24, 2022Comments
-
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: 62716kVirtual Memory:
- Private : 53400k
- Mapped : 10412;Let me know if you need any more information.
-
bcosynot over 12 yearsthe 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 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 over 12 yearsno worries. the "scroll" js files are all jquery plugins. possible suspects, will have to check them out.
-
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 over 12 yearsyes, 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 over 12 yearsI 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.