Delayed rendering of pages upon scrolling

[deepfriedbrain]

I have been using this template for more than a year now and overall very satisfied with it. However, there has been one annoying issue all along. I see the same issue with the official GitHub hosted project as well.

When I scroll up or down on the pages, the content rendering is very slow. I see a blank space for a while and then the content renders after a considerable delay, and it makes the whole experience very frustrating.

I'm always on the latest version of Chrome browser and using Macbook Pro 15" (2015) machine, which is relatively high power. It only happens on pages that use this template. I don't see a problem on other websites even those which are graphic intensive. I do "not" see this issue on Michael's "Made Mistake" dot com website either.

Is there some "feature" in this template that might be causing the page to render with a delay?

[mmistakes]

Can you provide more detail? I'm having a hard time reproducing this.

What exactly on the the page is delayed? Is the large hero images? is it the text?

[deepfriedbrain]

The entire content rendering (including images and text) is delayed. As I scroll down, I see blank space first and then the content is rendered after a considerable delay.

Here are some more observations:

1. I can only reproduce this on my blog (which uses MM theme) and the MM site itself. I tried reproducing on very graphic intensive sites with lots of ads etc. but could not reproduce on those sites. So that indicates to me that it has something to do with the theme.

2. I can't reproduce it 100% of the time even on my blog and MM site. For example, right now I can't reproduce it on either site.

3. A few times when it happened, I shut down my browser (Chrome) completely and restarted it hoping that the issue would go away, but it didn't. I then closed all other applications and ensured that there were plenty of system resources available, but the issue still didn't go away. Ultimately I had to reboot my machine, and that got rid of the issue (temporarily) before coming back again after 2-3 days.

I mostly use Chrome browser and keep it on the latest stable public release. The next time it happens, I'll test it across all the browsers at my disposal and update the results here.

[mmistakes]

Try using Chrome's web developer tools to get more detail. Could be related to your ISP, or something is taking longer to load. The reason it likely doesn't happen 100% for you is the browser caches the page so it's faster the second time.

The theme does have some CSS that fades the page on load. It's not that you're noticing is it?

1. Go to the page you want to inspect, right click and hit Inspect.
2. Hit the 3 vertical dots in the upper right corner, hit Settings, go under Network and make sure "Disable cache (while DevTools is open) is check.
3. Click on the Network tab, hit the gray circle to record, then refresh the page.
4. Let the page fully load.

You'll get a filmstrip of the page loading, see if you can find screenshots there where it's loading with blank spots. For me it's completely gradual. The page starts blank and fades in. The hero image takes longer to come in, but all of the text is there in around 400ms.

[deepfriedbrain]

I'll try it out when I'm able to reproduce the issue (hopefully in the next few days). But let me make it clear. The initial page loading is not a problem. The pages load quite fast (I'm on a 1 Gbps fibre line), but the issue appears on long pages (not very long either), when I scroll down or back up. The content just renders very slowly. I'll try to screen record it next time when I see it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

[deepfriedbrain]

@mmistakes Hi, I was away for a while, but I'm able to reproduce the issue again. I managed to do a screen recording to show you exactly what the issue is. Let me know how I can share it with you. I prefer not to post it publicly.

Based on your previous comments, you seem to be confusing it with page loading or image loading issue. But it's not. The page just doesn't refresh fast enough when scrolling up and down (it's captured very clearly in the video). It has nothing to do with ISP or bandwidth. And it happens only on my site which is using the MM theme. It doesn't happen on any other site in the same browser.

And it's not a one-off issue. It happens very consistently and the only thing that resolves is a machine reboot (Mac).

[deepfriedbrain]

@mmistakes Hi, I managed to reproduce this issue on the MM pages as well (https://mmistakes.github.io/minimal-mistakes/docs/layouts/), and have captured a screen recording of it. That eliminates my site out of the equation.

You can find the recording here: https://drive.google.com/open?id=1iQF7qlO7OX2n08BP3ppRDKwtHK0k_fQD

It's in .mov format recorded with QuickTime on MacOS.

[mmistakes]

I honestly have no idea what is causing this. I can't reproduce it at all. I've tested on macOS and Windows and in multiple browsers and have never seen it stutter like it does for you.

The fact that it corrects after a reboot tells me it's application related or some sort of memory leak that affects your computers performance.

Does it happen right after a reboot? Or after you've been browsing for a bit? Do you have browser extensions enabled that could be interfering? Do you have other apps running that might be hitting performance? Multiple tabs?

Can you rule out any of those?

[deepfriedbrain]

@mmistakes

It happens only after a while, not immediately after the reboot. Since I'm able to reproduce it right now, I managed to perform a few more tests using the MM Github site. A few observations:

1. It's happening only on Chrome. I can't reproduce it on Firefox or Safari. I'm currently using Chrome v74.x (which is the latest right now), but it was a much older version when I first reported the issue.

2. I cleared Chrome browser cache, disabled every single extension, and completely restarted Chrome, but it did NOT resolve the issue. I was running just one Chrome tab. I also tried it in incognito mode. There is absolutely no other application running on the system. CPU is at 2% with 10GB unused RAM.

3. I cannot reproduce this on any site other than those using the MM theme. For instance, even a heavily loaded site reddit dot com scrolls through very smoothly without any issue in the adjacent tab of the same Chrome browser.

I'm sure reboot will resolve the problem but I will hold off on it so that I can do more testing if needed.

Can you provide me links to a few other sites using this theme? I can test it on those sites as well.

[mmistakes]

Is it the entire site or just pages that are really tall and/or have a lot of images?

Not discounting the fact this is an issue, but seeing how no one has chimed in makes me think it’s isolated to your computer. I don’t know of other urls to test. I guess go through the people who have starred or forked the repo and see if you can test their sites.

There are over 8,000 forks so you should have plenty of users to test.

[deepfriedbrain]

It happens to every page of your MM site and other sites using the same theme, even the ones that are not very long and have just one or two small images.

I looked at various forks but couldn't find a site using the theme, but then I found a few through Google.

Here's a list of sites using the same theme and all exhibit the same issue:

http://prettyquestions.com/THEME_DATA/ 
https://copdips.com/ (the home page is very simple but still delays; every other page on this site has huge delay)
https://azurecitadel.com/contributing/minimalmistakes/
https://www.aravindiyer.com/tech/yet-another-solution-related-posts-jekyll/#

I noticed that some sites say that they are using Minimal Mistakes theme but have a very different look from the one used on your reference site https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/. Following are the sites using a "different" MM theme and have NO issue:

https://blog.christianposta.com/theme-setup/
http://varianceexplained.org/theme-setup/
http://www.zenna.org/theme-setup/

What's the difference between the MM theme used in the above sites and your site?

While I agree with your point that since no one else has reported it so far, it's got something to do with my computer, but at the same time, I have not seen this issue with any site other than the ones using this theme. I'm an IT professional and use this computer for 12 hours a day. I'm using Chrome 99.9% of the time. I'm NOT seeing this issue on your Made Mistakes site either which is using a different theme.

Also FWIW, I changed to another Mac (same year but slightly higher configuration) since the time I first reported the issue, but I did restore the whole system from backup. So it's not hardware related but yes, it could have something to do with the OS image.

Even if it's just my computer, there's got to be something peculiar on this theme that doesn't play well with my computer.

I even reset Chrome back to factory settings but it didn't resolve the issue.

I know I'm not providing you much actionable info, but I still wanted to let you know that the issue exists on my system and capture as much details as I could.

[mmistakes]

Those sites are using prehistoric versions of the theme.

Have you tried disabling JavaScript and seeing if you still have the issue? Only thing I can think of is maybe Font Awesome or some 3rd party script the theme uses is thrashing the browser window.

There's very little consistent between those old versions of the theme and the newer one. jQuery is in both I believe and Font Awesome.

Other than that I have no idea. This is almost impossible to triage as I can't reproduce it to inspect what might cause the screen to delay rendering elements on scroll. It feels like a script or some sort of browser extension/content blocker/whatever going awry.

[deepfriedbrain]

Thanks for the clarification on the different versions of the theme.

I somehow think that it has have something to do with Chrome, as the issue only occurs on Chrome. So I was looking for solutions on Google. I found something but not quite sure whether it's relevant to this theme. Could you spend a moment to look at the link mentioned below and see if it is applies to this theme by any chance?

https://mention.com/blog/chrome-performance-rendering-issues/

[deepfriedbrain]

I enabled the paint flashing option in Chrome Dev tools on your MM site and see that there's a lot of "painting" happening on your site upon scrolling that doesn't happen on other sites. So, I suspect that something is wrong with the theme. I can screen record it for you if you want.

Unfortunately, I'm not CSS-savvy and cannot pinpoint to any specific so far.

[deepfriedbrain]

I tested after disabling Javascript, and still see the same issue.

[deepfriedbrain]

I think I've found the root cause. The animation on the main id is causing the rendering delays. If I remove webkit-animation and animation, the problem instantly disappears. Scrolling becomes buttery smooth.

What is the purpose of this animation anyway?

#main {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    /* -webkit-animation: intro 0.3s both; */
    /* animation: intro 0.3s both; */
    max-width: 100%;
    /* -webkit-animation-delay: 0.15s; */
    /* animation-delay: 0.15s; */
}

[mmistakes]

The animation fades in the #main div element. Looks like for you it's applying that animation to each child element which is causing them all to fade in.

No idea how that's possible or why it only happens for you.

[deepfriedbrain]

I'm not convinced that it's an issue just with my machine. I'm more inclined to think that it's a bug with Chrome, or Chrome on MacOS, or MacOS, and gets triggered under certain circumstances. It's almost as if some OS-level process (as it keeps running even when Chrome is shutdown) on Mac gets "tired" after a while (potentially due to memory leak). I generally don't reboot my machine for months. So that could be one of the reasons others have not reported it. Or I could be more picky than others :)

I have already fixed the issue on my blog by getting rid of the animation entirely. And while I was at it, I got rid of similar animations from everywhere else on the site. My site feels so much smoother and lighter now. I had almost started to repel my blog because of this issue.

I don't get the point of running an animation that triggers upon page scrolling. I can understand having it trigger upon the initial page load, but when it triggers upon scroll, it just makes the whole site feel sluggish and heavy even under normal circumstances. I personally like clean and lightweight themes, no fancy stuff (which is what attracted me to MM in the first place).

I'm not asking you to get rid of it, but you might want to look at the way it actually works and adjust it or provide a setting to turn of the animations in a future version.

Thank you for the wonderful service that you are providing to the community!

[mmistakes]

The animation isn't intended to load on scroll. Whatever browser issue/bug you're encountering is causing that. It's meant to fade the page in on load to ease the abruptness of content staggering in.

Not sure what else to tell you. I'm on macOS as well, have latest Chrome, have a 7+ year old iMac, and haven't rebooted in weeks and the demo site and every one of the links above load and scroll silky smooth for me.

If animations aren't your thing Sass variables were added many releases ago that you can override and disable animations completely.

$global-transition: none;
$intro-transition: none;

[deepfriedbrain]

Thanks for the tip!

Just a note there that I had to include those variables before the @import statements. They seem to work well.