Lag in Page Load due to script

I am retrieving localised prices from Paddle through the following script

<head>
    <script src="../dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Plans</title>

    <link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.14.0/css/all.css" 
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="../bootstrap/5/slate/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/style.css" />

    <script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js"></script>
    <link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css" />
    <script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

    <script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
    <script src="../dmxAppConnect/dmxTyped/dmxTyped.js"></script>
    <script src="../dmxAppConnect/dmxTyped/typed.min.js"></script>

    <script src="https://cdn.paddle.com/paddle/paddle.js"></script>

    <script type="text/javascript">
        Paddle.Environment.set('sandbox')
                                    Paddle.Setup({ 
                                        vendor: xxxx , 
                                        completeDetails : true
                                    });
    </script>
    


  
    <script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
</head>

The price is displayed in an element using the following code

<h1 class="text-center mb-4">
<span class="paddle-gross" data-product="xxxx"></span></h1>

and that is causing a lag in the load as seen in the video

IMG-9443

What can i do to fix it? Would be nice if the price is retrieved and then the whole page is loaded at once

Thanks

Community Page
Last updated: