Why multiple "includes() " of files are causing the browser to load slow in mobile JQM based website

Question

I know this question have been asked many times on stack one of them is probably this Link but I could not get my answers from these links .

So my question is I am loading multiple files in a form using php includes() which is causing the page load time almost 30 seconds that is too much than the normal execution time .

Although the same method works fine in my desktop version check the link Link here the page is loading fine .

My code looks something like this

HTML

<div id="DIVC3" class="divs_details">
    <?php include(dirname(__FILE__)."/cat3.tpl.php")?>
</div>
<div id="DIVC4" class="divs_details">
    <?php include(dirname(__FILE__)."/cat4.tpl.php")?>
</div>
<div id="DIVC5" class="divs_details">
    <?php include(dirname(__FILE__)."/cat5.tpl.php")?>
</div>
<div id="DIVC6" class="divs_details">
    <?php include(dirname(__FILE__)."/cat6.tpl.php")?>
</div>
<div id="DIVC8" class="divs_details">
    <?php include(dirname(__FILE__)."/cat8.tpl.php")?>
</div>
<div id="DIVC9" class="divs_details">
    <?php include(dirname(__FILE__)."/cat9.tpl.php")?>
</div>
<div id="DIVC10" class="divs_details">
    <?php include(dirname(__FILE__)."/cat10.tpl.php")?>
</div>
<div id="DIVC11" class="divs_details">
    <?php include(dirname(__FILE__)."/cat11.tpl.php")?>
</div>
<div id="DIVC12" class="divs_details">
    <?php include(dirname(__FILE__)."/cat12.tpl.php")?>
</div>
<div id="DIVC13" class="divs_details">
    <?php include(dirname(__FILE__)."/cat13.tpl.php")?>
</div>
<div id="DIVC15" class="divs_details">
    <?php include_once(dirname(__FILE__)."/cat15.tpl.php")?>
</div>
<div id="DIVC16" class="divs_details">
    <?php include(dirname(__FILE__)."/cat16.tpl.php")?>
</div>
<div id="DIVC17" class="divs_details">
    <?php include(dirname(__FILE__)."/cat17.tpl.php")?>
</div>
<div id="err_desc" style="visibility:hidden; display:none;">
    <?php
    $long_desc=strlen($t_POST['im_desc']);
    if ($long_desc>0 && $long_desc<15) {
        ?>
        <span style="color:#FF0000;font-weight:bold; font-size:12px"> <?=$this->translate->translate('ERR_DESC','nucleo','Descripción deficiente');?></span>
        <?php 
    }
</div>

Please let me know if you have similar problem before

Thanks & Regards

@Alrik umm no bro it contains only form input type. Like content of different category . It was too big that's why we categorized it in different files — Vikram Anand Bhushan, Jun 13 '14 at 11:51
Some file systems can become slow when the directory contains like over 1000 files in one directory. But that doesn't seem to be your problem. — Adder, Jun 13 '14 at 11:56
@Adder but my directory doesn't contain more than 1k file i guess bro. Is it possible to load these file only when one of them is needed using JQuery ?? — Vikram Anand Bhushan, Jun 13 '14 at 12:08
Can you assure that there is no kind of browser-cache or something that goes wrong on the apache side? — Alrik, Jun 13 '14 at 13:15

score 2 · Answer 1 · answered Jun 13 '14 at 12:29

Several things are causing this problem but let go from the beginning.

jQuery Mobile can't style and enhance page content before web server handles all responses back to your browser client. So lets say your page has additional cca. 50 files (different images, js and css files etc.) plus there's a loot of PHP includes on your server side.

In this case server side PHP will first try to handle all file includes. But this process is not parallel, it will not happen all at once. This is the first performance block, and looking it your PHP code it is probably number one culprit.

Second step is also problematic, lets say PHP has finished content generation and response is sent to client browser. Again responses will not be handled all at the same time, each web server has a limit of how much responses can be handled per single session. So if you have for example 50 files (different images, js and css files etc.) it will take at average 10x more time to load everything then it will take to load only 5 files (of course this differs depending on file sizes).

Yeah but how can I solve this problem is there a way i could validate it using Jquery onchange function . Like I need these category files for only if that category is selected . — Vikram Anand Bhushan, Jun 13 '14 at 12:34
Best and usual way is to load them using AJAX. This way you will only get what you want and need. Plus your app will load much more faster. — Gajotres, Jun 13 '14 at 16:35

Why multiple "includes() " of files are causing the browser to load slow in mobile JQM based website

1 Answers1