Too many Chunks and Snippets

coconghaile · May 17, 2024, 3:30pm

Can too many chunks and snippets slow a webpage down dramatically? I never had this issue before and I’ve had the same amount of snippets and chunks before. My home page has the list below of chunks and snippets. My webpage takes almost 10seconds to fully load and I know that’s really really bad.

[[$head]]
[[$ticker]]
[[$header]]
[[$homeAdsRectangleCarousel]]
[[$footer]]

I had to remove one chunk that was pully back data into a bootstrap datatable. It reduced the load time by 6 seconds but I’d rather keep it if needs be. Any recommendations?

bobray · May 18, 2024, 4:04am

It really depends on what’s in those chunks. It also depends on whether you timed them right after clearing the site cache, which could slow things down considerably.

For starters I’d recommend creating pages that contain just one of each of the chunks and timing them when they’re fully cached, which might take several loads.

If one any of the chunk pages are particularly slow, you can post the content of the chunk(s) here to get more informed opinions.

coconghaile · May 19, 2024, 2:41pm

That’s a super idea. I’ll test them this evening and I’ll add times to them to see. Thanks Bob

coconghaile · May 20, 2024, 10:38am

Bob…can I ask, what do you mean by this?

bobray · May 20, 2024, 6:04pm

Just that resources that have not been cached generally load slower than they do after MODX creates the cache files for them.

So, if you clear the cache (or edit a resource and save it, which clears the resource cache), then test page-load speeds, the pages will appear more slowly than they would be for regular visitors.

coconghaile · May 20, 2024, 8:18pm

So should I cache all the chunks and snippets (by adding the !), then clear the cache folder and start that way?

bruno17 · May 21, 2024, 11:28am

they get cached without the !
with !, they are uncached

coconghaile · May 21, 2024, 2:47pm

I’ll deny that I had this wrong

coconghaile · May 21, 2024, 2:54pm

So it’d be best to have the [[$head]], [[$footer]], [[$header]] chunks cached as I do very little changes to them. And any chunk or snippet that have changes to them should be uncached? I have a table that displays results of footballs games that, on it’s day will change a few times.

snowcreative · May 21, 2024, 3:08pm

Yes, definitely!

Right. But, if those snippets take a long time to process data, then you’ll still get a slow page load. In some cases like this, I create auxiliary snippets (mini programs really) that save their fetched data to a text file, which can be formatted in ready-to-go HTML. Then the snippet on the actual page loads the data from the static text file, taking hardly any time at all.

If you can find a way to make the snippets process themselves more quickly, this CRON approach may work better for you. If your games data, for example, is at an external source and the connection to that source is a bottleneck, then this is a good way to go.

coconghaile · May 21, 2024, 3:30pm

Auxiliary Snippets? I’ll have to do some research on this. I know nothing on it.

This is my current html. I need to resize the images also. With every little bit i do, the webpage is getting faster (bit by bit). It was incredibly high at 12 seconds. It’s still at 6 seconds though. Is it very slow for you?

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
  <head>
    [[$head]]
  </head>

  <body class="stretched">
    <div id="wrapper">

      <!-- Results Ticker Section
      ============================================= -->
      [[$ticker]]

      <!-- Header
      ============================================= -->
      [[$header]]

      <!-- Content
      ============================================= -->
      <section id="content">
        <div class="content-wrap pt-0 pb-0">
          
          <!-- Advertisements
          ============================================= -->
          [[$homeAdsRectangleCarousel]]
        
          <!-- 2. About Section
          ============================================= -->
          <!-- About Us HTML Code -->
          
          <!-- Advertisements
          ============================================= -->
          [[$homeAdsRectangleCarousel]]
          
          <!-- 3. Upcoming and Past Games Section
          ============================================= -->
          <div class="section my-0 py-0">
            <div class="container">
              <div class="heading-block text-center">
                <h2>Cluich&iacute; CPnaG 2024</h2>
              </div>
              <div class="row gx-4 gy-5">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                  <div class="sp-template sp-template-event-list">
                    <div class="bigslam-sp-event-featured-holder clearfix">
                      [[pdoResources?
                        &parents=`10`
                        &tpl=`gameUpcomingSingleHome-New`
                        &includeContent=`1` 
                        &processTVs=`1` 
                        &includeTVs=`Foireann_1_Name,
                          Foireann_1_County,
                          Foireann_1_Crest,
                          Foireann_2_Name,
                          Foireann_2_County,
                          Foireann_2_Crest,
                          Cluiche_Competition,
                          Cluiche_Date,
                          Cluiche_Venue`
                        &limit=`1` 
                        &sortby=`{"Cluiche_Date":"ASC"}`
                        &sortdir=`DESC`
                        &where=`{"isfolder:=":"0","template:=":"15","Cluiche_Date:>":"[[!currentDate]]"}`
                      ]]
                    </div>
                  </div>                  
                  <div class="table-responsive">
                    <table id="datatable1" class="table sp-league-table sp-data-table">
                      <thead>
                        <tr>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        [[pdoResources? 
                          &parents=`10` 
                          &tpl=`gameUpcomingHome`
                          &includeContent=`1`
                          &processTVs=`1`
                          &includeTVs=`Foireann_1_Name,
                            Foireann_1_Score,
                            Foireann_1_Crest,
                            Foireann_2_Name,
                            Foireann_2_Score,
                            Foireann_2_Crest,
                            Cluiche_Competition,
                            Cluiche_Date,
                            Cluiche_Venue`
                          &limit=`9999`
                          &offset=`1`
                          &sortby=`{"Cluiche_Date":"ASC"}` 
                          &sortdir=`DESC`
                          &where=`{"isfolder:=":"0","template:=":"15","Cluiche_Date:>":"[[!currentDate]]"}`
                        ]]
                      </tbody>
                    </table>                                  
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Advertisements
      ============================================= -->
      [[$homeAdsRectangleCarousel]]
        
      <!-- Footer
      ============================================= -->
      [[$footer]]
    </div>
    
    <!-- Go To Top
    ============================================= -->
    <div id="gotoTop" class="uil uil-angle-up rounded-circle"></div>
    
    <!-- JavaScripts
    ============================================= -->
    <script src="[[++site_url]]assets/js/plugins.min.js"></script>
    <script src="[[++site_url]]assets/js/functions.bundle.js"></script>
    
    <!-- Bootstrap Data Table Plugin
    ============================================= -->
    <script src="[[++site_url]]assets/js/components/bs-datatable.js"></script>
    <script>
      jQuery(document).ready(function() {
        jQuery('#datatable1').dataTable({
          "bPaginate": true,
          "sPaginationType": "numbers",
          "bLengthChange": false,
          "bFilter": false,
          "bInfo": false,
          "bSearch": false,
          "bSort": false,
          "pageLength": 9
        });
      });
    </script>
  </body>
</html>

coconghaile · May 21, 2024, 3:36pm

I’m creating a new page for each game and then that pdoResources retrieves that data and adds it to the table on the main page. So it’s all within Modx Revo

halftrainedharry · May 21, 2024, 3:54pm

So did you measure the time it takes to parse/execute these different chunks and snippets in your template, so that you know what takes up most of the time and where you should focus on for improvements?

coconghaile · May 21, 2024, 4:01pm

I did but I had mixed up the cached and uncached ! symbol so I’ve to re-do it tonight

halftrainedharry · May 21, 2024, 4:44pm

If by any chance you use the extra Executioner to measure the times and you are on MODX 3, make sure to add the line

use MODX\Revolution\modElement;

at the beginning of the snippet, or the snippet code won’t work correctly.

pdoResources will output the execution time when you use the property &showLog=`1` .

In your case, you use pdoResources to query the same data twice, because you want a different template for the first result. If this query is the reason your page takes a lot of time to load, maybe try to rewrite the code, so you query the data only once.

It could also be advantageous to store your data in a custom database table instead of using TVs, if there are a lot of resources. Especially the sorting and filtering by the “Cluiche_Date” could be improved, if there exists a dedicated column for these values with the right data type and an index.

coconghaile · May 24, 2024, 1:41pm

SO I’ve used Executioner to measure the times. The main menu in my header is fine as is the simple menu in the footer. The pdoResources which displays the advertisements on the website is also fine. It’s milliseconds.

The issue seems to be with the ticker at the top of the page and the pdoResources which displays the results of games. They are both in and around the 2 second mark.

This is the ticker

[[!Executioner?
  &tElement=`pdoResources`
  &parents=`10` 
  &tpl=`resultsTicker` 
  &includeContent=`1` 
  &processTVs=`1` 
  &includeTVs=`Foireann_1_Name,Foireann_1_Score,Foireann_2_Name,Foireann_2_Score,Cluiche_Date` 
  &limit=`0` 
  &sortby=`{"Cluiche_Date":"DESC"}` 
  &sortdir=`DESC`
  &where=`{"isfolder:=":"0","template:=":"15","Cluiche_Date:<":"[[!currentDate]]"}`
]]

[[pdoResources?
  &parents=`10` 
  &tpl=`resultsTicker` 
  &includeContent=`1` 
  &processTVs=`1` 
  &includeTVs=`Foireann_1_Name,Foireann_1_Score,Foireann_2_Name,Foireann_2_Score,Cluiche_Date` 
  &limit=`0` 
  &sortby=`{"Cluiche_Date":"DESC"}` 
  &sortdir=`DESC`
  &where=`{"isfolder:=":"0","template:=":"15","Cluiche_Date:<":"[[!currentDate]]"}`
]]

And this is the display of results code

[[pdoResources?
  &parents=`10` 
  &tpl=`gameUpcomingHome`
  &includeContent=`1`
  &processTVs=`1`
  &includeTVs=`Foireann_1_Name,
    Foireann_1_Score,
    Foireann_1_Crest,
    Foireann_2_Name,
    Foireann_2_Score,
    Foireann_2_Crest,
    Cluiche_Competition,
    Cluiche_Date,
    Cluiche_Venue`
  &limit=`9999`
  &offset=`1`
  &sortby=`{"Cluiche_Date":"ASC"}` 
  &sortdir=`DESC`
  &where=`{"isfolder:=":"0","template:=":"15","Cluiche_Date:>":"[[!currentDate]]"}`
]]

halftrainedharry · May 24, 2024, 2:25pm

How many resources (with parent=10, template=15 etc.) are there on your site?
Is there some complicated logic (or additional snippet calls) in the chunks “gameUpcomingHome” and “resultsTicker”, or do they only contain simple placeholder tags?
With pdoResources and &showLog=`1` you get a detailed listing of the time it takes to run the snippet. What uses up the most time? “SQL executed”, “Prepared and processed TVs”, “Returning processed chunks”?

[[!pdoResources?
    ...
    &showLog=`1`
]]

<pre>[[!+pdoResourcesLog]]</pre>

coconghaile · May 24, 2024, 2:48pm

So for this section of the website. I have a parent with multiple child pages within it like below. The main competition is the parent and the ID for it is 10. Then all the games inside that parent folder use the plate ID 15. The location, Semi Final and Final would have different template IDs. The resources inside the parent 10 and template 15 could be 20 - 25.

Competition - This ID is 10
- Location 1
- - Semi Final
- - - Game 01 - And all the games are template 15
- - - Game 02
- - Final
- - - Game 03
- Location 2
- - Semi Final
- - - Game 01
- - - Game 02
- - Final
- - - Game 03

coconghaile · May 24, 2024, 2:51pm

Nope. Below is the results ticker

<a href="[[~[[+id]]]]" class="ticker-item btn-link text-light">[[+tv.Foireann_1_Name]] [[+tv.Foireann_1_Score]] * [[+tv.Foireann_2_Score]] [[+tv.Foireann_2_Name]]</a>

and this is the gameUpcomingHome


  <a href="[[~[[+id]]]]">
      <div class="bigslam-sp-event-featured-list clearfix">
        <div class="bigslam-sp-event-featured-title bigslam-title-font">
          <span class="bigslam-sp-team-logo">
            <img src="[[+tv.Foireann_1_Crest]]" class="attachment-sportspress-fit-medium size-sportspress-fit-medium wp-post-image" alt="[[+tv.Foireann_1_Name]]">
          </span>
          <span class="bigslam-sp-team-name">[[+tv.Foireann_1_Name]]</span>
          <span class="bigslam-sp-event-result">VS</span>
          <span class="bigslam-sp-team-name">[[+tv.Foireann_2_Name]]</span>
          <span class="bigslam-sp-team-logo">
            <img src="[[+tv.Foireann_2_Crest]]" class="attachment-sportspress-fit-medium size-sportspress-fit-medium wp-post-image" alt="[[+tv.Foireann_2_Name]]">
          </span>
        </div>
        <div class="bigslam-sp-event-featured-info">
          <span class="bigslam-sp-event-date">[[!setDateLocale? &date=`[[+tv.Cluiche_Date]]`]]</span>
          <span class="bigslam-sp-event-venue">[[+tv.Cluiche_Date:date=`%I.%M %p`]]</span>
          <span class="bigslam-sp-event-venue">[[pdoField? &id=`[[+parent]]` &field=`pagetitle`]]</span>
          <span class="bigslam-sp-event-venue">[[+tv.Cluiche_Competition]]</span>
        </div>
      </div>
    </a>

coconghaile · May 24, 2024, 2:59pm

This is what I got

<pre>0.0000761: pdoTools loaded
0.0000210: xPDO query object created
0.0005250: Included list of tvs: <b>Foireann_1_Crest, Foireann_1_Name, Foireann_1_Score, Cluiche_Competition, Cluiche_Date, Cluiche_Venue, Foireann_2_Crest, Foireann_2_Name, Foireann_2_Score</b>
0.0001080: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVfoireann_1_crest</b>
0.0000701: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVfoireann_1_name</b>
0.0000679: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVfoireann_1_score</b>
0.0001199: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVcluiche_competition</b>
0.0000699: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVcluiche_date</b>
0.0000679: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVcluiche_venue</b>
0.0000679: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVfoireann_2_crest</b>
0.0000682: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVfoireann_2_name</b>
0.0000849: leftJoined <i>MODX\Revolution\modTemplateVarResource</i> as <b>TVfoireann_2_score</b>
0.0000951: Added selection of <b>modResource</b>: <small>`id`, `type`, `pagetitle`, `longtitle`, `description`, `alias`, `link_attributes`, `published`, `pub_date`, `unpub_date`, `parent`, `isfolder`, `introtext`, `content`, `richtext`, `template`, `menuindex`, `searchable`, `cacheable`, `createdby`, `createdon`, `editedby`, `editedon`, `deleted`, `deletedon`, `deletedby`, `publishedon`, `publishedby`, `menutitle`, `donthit`, `privateweb`, `privatemgr`, `content_dispo`, `hidemenu`, `class_key`, `context_key`, `content_type`, `uri`, `uri_override`, `hide_children_in_tree`, `show_in_tree`, `properties`, `alias_visible`</small>
0.0000041: Added selection of <b>TVfoireann_1_crest</b>: <small>IFNULL(`value`, 'assets/images/crests/cpnag/cpnag-default.png') AS `tv.Foireann_1_Crest`</small>
0.0000029: Added selection of <b>TVfoireann_1_name</b>: <small>IFNULL(`value`, '') AS `tv.Foireann_1_Name`</small>
0.0000019: Added selection of <b>TVfoireann_1_score</b>: <small>IFNULL(`value`, '0-00') AS `tv.Foireann_1_Score`</small>
0.0000021: Added selection of <b>TVcluiche_competition</b>: <small>IFNULL(`value`, '') AS `tv.Cluiche_Competition`</small>
0.0000019: Added selection of <b>TVcluiche_date</b>: <small>IFNULL(`value`, '') AS `tv.Cluiche_Date`</small>
0.0000021: Added selection of <b>TVcluiche_venue</b>: <small>IFNULL(`value`, '') AS `tv.Cluiche_Venue`</small>
0.0000019: Added selection of <b>TVfoireann_2_crest</b>: <small>IFNULL(`value`, 'assets/images/crests/cpnag/cpnag-default.png') AS `tv.Foireann_2_Crest`</small>
0.0000021: Added selection of <b>TVfoireann_2_name</b>: <small>IFNULL(`value`, '') AS `tv.Foireann_2_Name`</small>
0.0000010: Added selection of <b>TVfoireann_2_score</b>: <small>IFNULL(`value`, '0-00') AS `tv.Foireann_2_Score`</small>
0.0000360: Replaced TV conditions
0.0005000: Processed additional conditions
0.0006590: Added where condition: <b>isfolder:==0, template:==15, `TVcluiche_date`.`value`:>=2024-05-24 15:56, modResource.parent:IN(10,156,250,274,158,184,157,254,255,256,257,258,264,265,259,260,261,266,267,268,269,298,299,300,301,302,262,263,270,271,303,251,252,297,275,276,168,181,175,182,197,169,170,171,172,173,174,176,177,178,183,206,208,229,179,180,207,221,222,223,224,225,226,227,228,232,201,202,203,204,205,230,231,196,198,199,200,185,187,189,190,186,191,188,192,193,194,195,216,217,218,219,220,246,247,272,273,159,161,166,160,162,163,164,165,167,244,245), modResource.published=1, modResource.deleted=0</b>
0.0000060: Replaced TV conditions
0.0000579: Sorted by <b>CAST(`TVcluiche_date`.`value` AS DATETIME)</b>, <b>ASC</b>
0.0000019: Limited to <b>9999</b>, offset <b>1</b>
0.0004470: SQL prepared <small>"SELECT `modResource`.`id`, `modResource`.`type`, `modResource`.`pagetitle`, `modResource`.`longtitle`, `modResource`.`description`, `modResource`.`alias`, `modResource`.`link_attributes`, `modResource`.`published`, `modResource`.`pub_date`, `modResource`.`unpub_date`, `modResource`.`parent`, `modResource`.`isfolder`, `modResource`.`introtext`, `modResource`.`content`, `modResource`.`richtext`, `modResource`.`template`, `modResource`.`menuindex`, `modResource`.`searchable`, `modResource`.`cacheable`, `modResource`.`createdby`, `modResource`.`createdon`, `modResource`.`editedby`, `modResource`.`editedon`, `modResource`.`deleted`, `modResource`.`deletedon`, `modResource`.`deletedby`, `modResource`.`publishedon`, `modResource`.`publishedby`, `modResource`.`menutitle`, `modResource`.`donthit`, `modResource`.`privateweb`, `modResource`.`privatemgr`, `modResource`.`content_dispo`, `modResource`.`hidemenu`, `modResource`.`class_key`, `modResource`.`context_key`, `modResource`.`content_type`, `modResource`.`uri`, `modResource`.`uri_override`, `modResource`.`hide_children_in_tree`, `modResource`.`show_in_tree`, `modResource`.`properties`, `modResource`.`alias_visible`, IFNULL(`TVfoireann_1_crest`.`value`, 'assets/images/crests/cpnag/cpnag-default.png') AS `tv.Foireann_1_Crest`, IFNULL(`TVfoireann_1_name`.`value`, '') AS `tv.Foireann_1_Name`, IFNULL(`TVfoireann_1_score`.`value`, '0-00') AS `tv.Foireann_1_Score`, IFNULL(`TVcluiche_competition`.`value`, '') AS `tv.Cluiche_Competition`, IFNULL(`TVcluiche_date`.`value`, '') AS `tv.Cluiche_Date`, IFNULL(`TVcluiche_venue`.`value`, '') AS `tv.Cluiche_Venue`, IFNULL(`TVfoireann_2_crest`.`value`, 'assets/images/crests/cpnag/cpnag-default.png') AS `tv.Foireann_2_Crest`, IFNULL(`TVfoireann_2_name`.`value`, '') AS `tv.Foireann_2_Name`, IFNULL(`TVfoireann_2_score`.`value`, '0-00') AS `tv.Foireann_2_Score` FROM `cpnag_site_content` AS `modResource` LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVfoireann_1_crest` ON `TVfoireann_1_crest`.`contentid` = `modResource`.`id` AND `TVfoireann_1_crest`.`tmplvarid` = 1 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVfoireann_1_name` ON `TVfoireann_1_name`.`contentid` = `modResource`.`id` AND `TVfoireann_1_name`.`tmplvarid` = 2 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVfoireann_1_score` ON `TVfoireann_1_score`.`contentid` = `modResource`.`id` AND `TVfoireann_1_score`.`tmplvarid` = 3 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVcluiche_competition` ON `TVcluiche_competition`.`contentid` = `modResource`.`id` AND `TVcluiche_competition`.`tmplvarid` = 4 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVcluiche_date` ON `TVcluiche_date`.`contentid` = `modResource`.`id` AND `TVcluiche_date`.`tmplvarid` = 5 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVcluiche_venue` ON `TVcluiche_venue`.`contentid` = `modResource`.`id` AND `TVcluiche_venue`.`tmplvarid` = 6 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVfoireann_2_crest` ON `TVfoireann_2_crest`.`contentid` = `modResource`.`id` AND `TVfoireann_2_crest`.`tmplvarid` = 7 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVfoireann_2_name` ON `TVfoireann_2_name`.`contentid` = `modResource`.`id` AND `TVfoireann_2_name`.`tmplvarid` = 8 LEFT JOIN `cpnag_site_tmplvar_contentvalues` `TVfoireann_2_score` ON `TVfoireann_2_score`.`contentid` = `modResource`.`id` AND `TVfoireann_2_score`.`tmplvarid` = 9 WHERE  ( `modResource`.`isfolder` = 0 AND `modResource`.`template` = 15 AND `TVcluiche_date`.`value` > '2024-05-24 15:56' AND `modResource`.`parent` IN (10,156,250,274,158,184,157,254,255,256,257,258,264,265,259,260,261,266,267,268,269,298,299,300,301,302,262,263,270,271,303,251,252,297,275,276,168,181,175,182,197,169,170,171,172,173,174,176,177,178,183,206,208,229,179,180,207,221,222,223,224,225,226,227,228,232,201,202,203,204,205,230,231,196,198,199,200,185,187,189,190,186,191,188,192,193,194,195,216,217,218,219,220,246,247,272,273,159,161,166,160,162,163,164,165,167,244,245) AND `modResource`.`published` = 1 AND `modResource`.`deleted` = 0 )  ORDER BY CAST(`TVcluiche_date`.`value` AS DATETIME) ASC LIMIT 1, 9999 "</small>
0.0054932: SQL executed
0.0001419: Rows fetched
0.9959071: Prepared and processed TVs
0.0011420: Loaded "modChunk" with name "gameUpcomingHome"
0.0290990: Returning processed chunks
1.0334880: <b>Total time</b>
6 291 456: <b>Memory usage</b>
</pre>