Why my website scroll seem laggy onscroll

Question

I know there are quite a few posts on this topic, I have gone through quite a few of them. I've tried so many different optimizations people were suggesting. Nothing seems to be working. I did a Lighthouse performance check, and I did as many suggestions as I could without compromising on the image/video resolution too much. But still, my website seems kinda laggy on scroll, sometimes skip quite a few pixels. Not sure what is the reason. I do have an onscroll listener, which I tried debouncing or completely removing, still made no significant difference. Any suggestion is welcomed.

Social Reroute

Note: Please do not mark this as duplicate, I know it seems similar to other posts. But none of them helped me yet, I will keep looking.

It is a plain static website, so all code should get to your browser. If not, please feel free to ask section of the code.

Here is what Lighthouse says,

@enhzflep yup its a static website. All code should be there — Hafiz Temuri, Apr 11 '21 at 17:50
@enhzflep I optimized that video to 16MB, I think, unless you are on Safari. Because Safari does not seem to support WebM format. — Hafiz Temuri, Apr 11 '21 at 17:55
What resolution is that video behind the header? That takes a lot of BW — svin83, Apr 11 '21 at 17:58
@HafizTemuri I think you need to add [Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) to your site. There are around `9` videos + many images. That's a lot of assets to load at once! — Manas Khandelwal, Apr 11 '21 at 17:59
@ManasKhandelwal I do have a splash screen loading for that, which loads all the images beforehand, and it times out after 5 seconds. The images are heavy, so I am worried if I add lazy loading, it may still be loading when its in view. Good suggestion thou. — Hafiz Temuri, Apr 11 '21 at 18:03
I would drop the resolution to 720p for all devices with small screens... Maybe even below 720p... Also... It's already losing detail due to the semi-transparent header in front of it, so why not take advantage of the fact and use a lower res video? — svin83, Apr 11 '21 at 18:05
This may help you: https://stackoverflow.com/a/40804307/1533592 — dale landry, Apr 11 '21 at 18:06
@svin83 very good point actually. I was thinking about the same thing, but not sure why I have done that yet. — Hafiz Temuri, Apr 11 '21 at 18:06
@dalelandry I do have a splash screen loading to load the asset faster. But thanks for the info. — Hafiz Temuri, Apr 11 '21 at 18:07
Also... Save your images as lightly compressed jpeg files instead of png... You'll see a huge difference in bandwidth savings and page responsiveness without visible loss of quality... — svin83, Apr 11 '21 at 18:08
For starters, you have a loading screen with a little animation. It shows for like half a second and loads the page. When it loads, the images are not completely rendered (or not rendered at all). Load the first couple images while the loading screen is being displayed and have it wait until the images are done loading. Later on, you can load the rest of the images as needed to reduce load time (so far it's been about 5+ mins and the page isn't done loading yet). I'm not so sure why your site gets laggy when scrolling, but I think that loading content has something to do with it. — , Apr 11 '21 at 18:09
@HafizTemuri If somebody did not want to scroll down to the `branded-video` section then why to load those `8` videos, that's just inefficient that's why Lazy loading. — Manas Khandelwal, Apr 11 '21 at 18:09
@ManasKhandelwal They are only 2 videos, the rest are the same source. The reason why I decided to preload them is that they may not be loaded when the user gets there. But I feel like everyone pointing to optimize asset loading, which I did not think could be an issue. It's a good point. I will look into optimizing it. — Hafiz Temuri, Apr 11 '21 at 18:17
@GruelingPine185 The loading screen should time out after 5 seconds. If Its only shown for half a second then that is a bug. My thought of having a loading screen is to load all the images before the user can start interacting with the website. But I am going back and optimizing all the asset. — Hafiz Temuri, Apr 11 '21 at 18:20
After all, this site is not going to work fast. I am not talking about movies here because it has already been mentioned above, but about photos. Each photo weighs around 1MB! After all, these photos are not optimized. They have 1080x1920px and the page is scaled to 311x522px I also have a question, why does the animation last all the time with the appearance of photos?. It should only work where it is visible - I recommend using IntersectionObserver. The same solution can be used for video. So only load them when it is visible. — Grzegorz T., Apr 11 '21 at 18:27
@GrzegorzT. I seeeeee!!! Yeah, the animation is constant whether they are in view or not. That could be a great optimization!!! I am looking into that definitely!! — Hafiz Temuri, Apr 11 '21 at 18:31
@HafizTemuri Make the photo smaller and add native `loading=lazy` to each one, it will optimize the speed of the website. — Grzegorz T., Apr 11 '21 at 18:34
@GrzegorzT. I can add lazy load not a problem, but someone else also mentioned optimizing the photos, and I am not too sure how. I want most of them to be transparent as they go over something else. They have to be `png`, unless you have some suggestion? — Hafiz Temuri, Apr 11 '21 at 18:37
@HafizTemuri The point in the photos is that they are too large to be reduced to the size you use on the 311x522px page and you are not making them bigger. Moreover, if you use png, you can optimize them very much by libraries, but the easiest way is to use this page https://tinypng.com/ PS. An example of using lazy loading on my website where in one article I have over 80 photos jpg in 1200x800px format and the result is 97|98|100|100 ;) — Grzegorz T., Apr 11 '21 at 18:41
@HafizTemuri I also checked the video, it is too big, I mean its size is 720x1080px. On the website, it is up to 311x522. To reduce it, you can use a great free program - HandBrake. — Grzegorz T., Apr 11 '21 at 18:53
@GrzegorzT. I used IntersectionObserver to control Photography Changing Pictures and Pause the main hero video when it's not in view. I saw a huge improvement. If you can write that as an answer, I will mark it resolved. — Hafiz Temuri, Apr 17 '21 at 21:27

score 0 · Accepted Answer · answered Apr 17 '21 at 22:19

Below I present an example of using the API IntersectionObserver which significantly helps in faster page loading. They can also be used to run movies or load page elements. I also recommend reading this article content-visibility, of course, it currently works in a few browsers only in those based on chromium, but a very interesting option that also significantly improves the speed of the page.

(function() {
  var observer = new IntersectionObserver(onIntersect);
  document.querySelectorAll('[data-lazy-load]').forEach(function(img) {
    observer.observe(img);
  });

  function onIntersect(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.target.getAttribute('data-processed') || !entry.isIntersecting) return true;
      entry.target.setAttribute('src', entry.target.getAttribute('data-src'));
      entry.target.setAttribute('data-processed', true);
    });
  }
})();

:root {
  font-size: 16px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}

img {
  width: 100%;
}

<div class="container">
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x500" data-lazy-load />
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x502" data-lazy-load />
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x504" data-lazy-load />
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x506" data-lazy-load />

</div>

Why my website scroll seem laggy onscroll

1 Answers1