Two codes are written to achieve the same objective. The one with more functions executed slowly compared to the other. I want to why this happens and whether it is a good practice or not.

Run this code on this website and check. - https://stanford.edu/~cpiech/karel/ide.html

Code 1(less functions):

function main(){
   beepers3Right();
   move();
   beepers2Left();
   beepers3Right();
   move();
   beepers2Left();
   beepers3Right();
}

function beepers3Right() {
   putBeeper();
   move();
   move();
   putBeeper();
   move();
   move();
   putBeeper();
   turnLeft();
}

function beepers2Left() {
   turnLeft();
   move();
   putBeeper();
   move();
   move();
   putBeeper();
   move();
   turnRight();
   move();
   turnRight();
}

Code 2(more funstions)

function main(){
   outer();
   moveDiagonal();
   inner();
   moveDiagonal();
}

function move2x(){
   move();
   move();
}

function moveStraightBeeper(){
   putBeeper();
   move2x();
}

function innerMove(){
   move2x();
   putBeeper();
   turnLeft();
}

function moveDiagonal(){
   move();
   turnLeft();
   move();
   turnRight();
   putBeeper();
}

function outerMove(){
   moveStraightBeeper();
   moveStraightBeeper();
   turnLeft();
}

function outer(){
   outerMove();
   outerMove();
   outerMove();
   outerMove();
}

function inner(){
   innerMove();
   innerMove();
   innerMove();
}