'Navigation idle on content download

Hello I have a website developed in cakePHP 2.10.

For a while when I browse my site I realized that I have a loading time always in the order of 5 seconds even for views that only display forms. Within 5 seconds of "content download" 3.6 seconds is locked in "IDLE" state.


(source: infomaniak.website)


(source: infomaniak.website)

I also encounter this problem in ajax, the request seems to be locked in "reception" for about 5 seconds.

For example a gif of navigation in ajax with 5 seconds locked
(source: infomaniak.website)

In the default layout I load in the bottom all my JavaScript files:

<?php 



echo $this->Html->script('jquery-2.1.1');
echo $this->Html->script('bootstrap.min');
echo $this->Html->script('plugins/metisMenu/jquery.metisMenu');
echo $this->Html->script('plugins/slimscroll/jquery.slimscroll.min');
echo $this->Html->script('inspinia');
echo $this->Html->script('plugins/pace/pace.min', array("data-pace-options" => '{"ajax": false}'));
echo $this->Html->script('plugins/jquery-ui/jquery-ui.min');
echo $this->Html->script('plugins/gritter/jquery.gritter.min');
echo $this->Html->script('plugins/sparkline/jquery.sparkline.min');
echo $this->Html->script('demo/sparkline-demo');
echo $this->Html->script('plugins/chartJs/Chart.min');
echo $this->Html->script('plugins/toastr/toastr.min');
echo $this->Html->script('plugins/dataTables/datatables.min');
echo $this->Html->script('plugins/clockpicker/clockpicker');
echo $this->Html->script('plugins/datepicker/bootstrap-datepicker');


echo $this->Html->script('jquery.autocomplete');

echo $this->Html->script('plugins/star-rating/star-rating');
echo $this->Html->script('plugins/star-rating/locales/fr');
echo $this->Html->script('plugins/switchery/switchery');
echo $this->Html->script('plugins/chosen/chosen.jquery');
echo $this->Html->script('plugins/validate/jquery.validate.min');
echo $this->Html->script('slim/slim.kickstart');
echo $this->Html->script('plugins/sweetalert/sweetalert.min');
echo $this->Html->script('plugins/summernote/summernote');
echo $this->Html->script('plugins/summernote/lang/summernote-fr-FR');



echo $this->Html->script('datatableExport/dataTables.buttons.min');
echo $this->Html->script('datatableExport/buttons.html5.min');
echo $this->Html->script('datatableExport/jszip.min');
echo $this->Html->script('datatableExport/pdfmake.min');
echo $this->Html->script('datatableExport/vfs_fonts');
echo $this->Html->script('datatableExport/buttons.print.min');

echo $this->Html->script('plugins/morris/raphael-2.1.0.min'); 
echo $this->Html->script('plugins/morris/morris');
echo $this->Html->script('plugins/ladda/spin.min');
echo $this->Html->script('plugins/ladda/ladda.min');
echo $this->Html->script('plugins/ladda/ladda.jquery.min');


//chemin pour que le Javascript puisse trouver les images
echo $this->Js->set('url', $this->request->base); 
    
echo $this->Html->script('main');
echo $this->Html->script('sessionPopup');
echo $this->Html->script('users');
echo $this->Html->script('compromis');
echo $this->Html->script('mediatheque');
echo $this->Html->script('messagerie');
echo $this->Html->script('competences');

echo $this->fetch('script');

echo $this->Js->writeBuffer(); 
 ?>


Solution 1:[1]

The loading time is always long, here for example for the following code, without css / js. Here is the screen of monitoring https://a741vvfaa.preview.infomaniak.website/img/monitoring3.JPG

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="gray-bg">
    <div class="col-md-4 col-lg-offset-4 text-center loginscreen animated fadeInDown">
        <div>
            <div class="ibox float-e-margins">
            <div class="ibox-title ">
                <div class="text-center">                            

                </div>
            </div>
            <div class="ibox-content">
            <h3>Bienvenue sur <?php echo Configure::read("VERSION");?></h3>
                <!-- <form class="m-t" role="form" action="index.html"> -->
                <?php echo $this->Form->create('User'); ?>  
                    <div class="form-group">
                        <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                            <input type="text" class="form-control" id="UserUsername" placeholder="Nom d'utilisateur" required="required" maxlength="30" name="data[User][username]">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                            <input type="password" class="form-control" id="UserPassword" placeholder="Mot de passe" required="required" name="data[User][password]">
                        </div>
                    </div>
                    <button type="submit" id="btnlogin" class="btn btn-primary block full-width m-b ladda-button" data-style="zoom-in" style="background-color:#00ADEE;">Connexion</button>


                <?php echo $this->Form->end();?>  

                </div>
            </div>
        </div>
    </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeyzorus