Jonathan Rothenberg Jonathan Rothenberg -4 years ago 90
Node.js Question

How to optimize my heroku webapp

I'm new to web development and I'm currently in the process of building my own website for my portfolio. My app uses node, express, and Heroku to launch it online. However, the page isn't as smooth as I'd like it to be. It drops a lot of frames when scrolling and viewing animations. I'm wondering what I can do to make my app feel buttery smooth. I've looked all around for solutions but I'm too new to development to really understand what to do. I've attempted to use the inspector to see if the css or javascript files are slowing down the processes via the waterfall insepctor, but came up dry. So far, I've compressed the files and lowered the scale of all images. Also, the entire website is static content so I can't imagine why its running so slowly. Any help would be much appreciated.

The website in question

Answer Source

The "lag" could be caused by the ScrollFire plugin. Every time you call Materialize.scrollFire(..) you actually add a JavaScript listener for the "scroll" event. The way you use it, you call Materialize.scrollFire for each of your target objects, so you actually create multiple "scroll" listeners. But the scrollFire options is actually an array of targets, so you could get away with only initializing it once. Like so:

var options = [
    {selector: '.iphone1', offset: 300, callback: function(el) {
        $('.iphone1').css('visibility', 'visible');
        $('.iphone1').addClass('animated slideInLeft');
    }},
    {selector: '#paragraph_intro', offset: 300, callback: function(el) {
        $('#paragraph_intro').css('visibility', 'visible');
        $('#paragraph_intro').addClass('animated slideInRight');
    }},
    // ... And so on
];
Materialize.scrollFire(options);

It could also be caused by your own scroll listener at:

$(window).on('scroll', function(){
    updateNavigation();
    changeNavColor();
    changeHeaderColor();
});

I would consider adding some kind of throttling, so these functions are called less frequent while the user is scrolling.

These may not be the problem, or the whole problem, as I cannot see how the page would behave without it, but it could have an impact, so it's worth investigating.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download