We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 27106
    • 147 Posts
    I have a bunch of pages at davidwhiting.com.au using CSS and Javascript files which are themselves set up as resources and served out of the MODX database. This has several advantages but one problem: the CSS and Javascript resources have relatively long wait times (over 1 second) when other assets are served more quickly.

    I'm measuring the site via http://tools.pingdom.com/, though Google PageSpeed gives the same results. Oddly the quicker-loading assets include not just static files but also a 99kB Bootstrap CSS resource being served out of the database. The bootstrap.css resource is using a series of chunks, while image-gallery-css.css is calling no resources whatsoever.

    The variations here are baffling me and various cache snippets such as MinifyX are making no difference. (Tips such as those at http://devries.jp/blog/2013/03/23/cash-in-big-with-modx-cacheing/ have been very interesting; they're just not making much difference in practice.)

    Yes, the site is fairly quick - 2.5 seconds to load fully - but I'd like to understand what's going on here. Any ideas, anyone?

    • MODX Version: 2.2.6-pl
    • PHP Version: 5.3.22
    • Database Version: MySQL 5.1.67
      David Walker
      Principal, Shorewalker DMS
      Phone: 03 8899 7790
      Mobile: 0407 133 020
      • 27106
      • 147 Posts
      Update: I have load time down to 2.2 seconds by using Apache's "mod_headers" in the .htaccess file. I'm caching only css, js and txt files, so the code is:
      # Browser caching using Apache's "mod_headers"
      <IfModule mod_headers.c>
          # 2 WEEKS
          <FilesMatch "\.(css|js|txt)$">
              Header set Cache-Control "max-age=86400, public, must-revalidate"
          </FilesMatch>
      </IfModule>

      The 86400 seconds value (i.e. one day) could go to a much high figure, such as 2592000 (i.e. 30 days).

      But some of the the CSS and Javascript wait times are still over a second.
        David Walker
        Principal, Shorewalker DMS
        Phone: 03 8899 7790
        Mobile: 0407 133 020
        • 3109 ☆ A M B ☆
        • 894 Posts
        Have you tried setting the resource as a static file instead? Any improvements?
          Benjamin Marte
          Interactive Media Developer
          Follow Me on Twitter | Visit my site | Learn MODX
          • 27106
          • 147 Posts
          Quote from: benmarte at Jul 06, 2013, 08:35 AM
          Have you tried setting the resource as a static file instead? Any improvements?

          No, whether they are static files does not seem to make a difference.

          This may have no connection to the server at all. I'm now pursuing another line of enquiry based on some of Steve Sounders' work ...
            David Walker
            Principal, Shorewalker DMS
            Phone: 03 8899 7790
            Mobile: 0407 133 020
            • 9207 ☆ A M B ☆
            • 2,475 Posts
            No difference whether they are static files or not? That definitely sounds like a server issue then. Usually I avoid putting JS or CSS files into MODX because of the overhead of having PHP render the files, but I understand there are cases where it's quite useful.

            How big are these files? If you copy the static files over to a vanilla server, how fast do they load?
              • 27106
              • 147 Posts
              Quote from: Everettg_99 at Jul 06, 2013, 11:44 AM
              No difference whether they are static files or not? That definitely sounds like a server issue then. Usually I avoid putting JS or CSS files into MODX because of the overhead of having PHP render the files, but I understand there are cases where it's quite useful.

              How big are these files? If you copy the static files over to a vanilla server, how fast do they load?
              I'm still testing, but the results turn out to be highly variable. Contrary to what I told Ben above, a static file sometimes is better. But only sometimes, and not for any obvious reason.

              For instance, I have a 1.5kB Javascript loading out of the database (actually out of the MODX cache, I presume) with a 1080ms wait time, and that same file loads with a wait time of about 150ms as a static file. But I also have a 15kB CSS file with quite a few calls to chunks that's loading out of the database with a wait time of just 52ms. That's quicker than my static Javascript ...

              Even stranger, if I get my databased Javascript as the sole element in a getResources call, then the wait time goes down to 206ms, barely more than the static files. If I put all my databased CSS into a getResources call, then the wait time on that file is similarly low - 215ms. Indeed, using getResources to call my CSS and JS, I can get the page load time (as reported by Pingdom) down to 1.8 seconds, which is nearly top-quartile.
                David Walker
                Principal, Shorewalker DMS
                Phone: 03 8899 7790
                Mobile: 0407 133 020
                • 3109 ☆ A M B ☆
                • 894 Posts
                Are you using any output modifiers in these CSS and JS files? If so that may be part of the issue since MODX needs to parse these and then generate the files.
                  Benjamin Marte
                  Interactive Media Developer
                  Follow Me on Twitter | Visit my site | Learn MODX
                  • 27106
                  • 147 Posts
                  Quote from: benmarte at Jul 06, 2013, 03:14 PM
                  Are you using any output modifiers in these CSS and JS files? If so that may be part of the issue since MODX needs to parse these and then generate the files.

                  No output modifiers are in use. In these files, there are just a few short chunks being added into the page. MODX appears to be doing very little work to put the CSS and JS resources together. Comparable files served as static or out of the database/cache frequently have broadly similar wait times.

                  My takeaway from Steve Souder's work is that most of us overestimate the problems that originate in the backend (database queries etc) and underestimate the effect of problems in the front-end (HTML coding issues, image optimisation, and especially caching). Given the difference between static files and database/cache files is small, I'm currently concentrating on understanding the caching/header issues.

                  I now have total page load time down to as low as 1000ms, so further improvements rely on understanding very clearly what's happening with the caching. [ed. note: shorewalker last edited this post 13 years, 2 months ago.]
                    David Walker
                    Principal, Shorewalker DMS
                    Phone: 03 8899 7790
                    Mobile: 0407 133 020
                    • 32699 ☆ A M B ☆
                    • 427 Posts
                    Just wondering why minify is not in use....

                    It is relatively quick to setup and run.

                    Also, why in the world is getResources involved. It is heavy.

                    I recently created an application to run getResources ONCE creating a chunk of the output which is typically static on many sites anyway.


                    Name: refreshChunkContents

                    Description: Requires &snippet name of Snippet to execute
                    &chunkName name of Chunk to refresh
                    And any properties to be passed onto the the snippet


                    <?php
                    $snippetToRun = $scriptProperties['snippet'];
                    $chunkToRefresh = $scriptProperties ['chunkName'];
                    $success = false;
                    
                    /*
                     * If we have a Snippet to run and a chunk to refresh keep going
                     */
                    if (isset ( $snippetToRun ) && isset ( $chunkToRefresh )) {
                    
                    	/**
                    	 * Remove the Snippet name and Chunk name from the parameters to keep from passing them into runSnippet
                    	 */
                    	unset ( $scriptProperties['snippet'], $scriptProperties['chunkName']);
                    
                    	/**
                    	 * Retrieve Chunk Object
                    	 */
                    	$chunkObj = $modx->getObject ( 'modChunk', array('name' => $chunkToRefresh ));
                    
                    	/**
                    	 * If we have a chunk object move forward or just drop out leaving old data in tact
                    	 */
                    	if (is_object ( $chunkObj ) && $chunkObj instanceof modChunk) {
                    
                    		/**
                    		 * Execute Snippet
                    		 */
                    		$contents = $modx->runSnippet( $snippetToRun, $scriptProperties );
                    
                    		/**
                    		 * If contents exist overwrite chunk contents
                    		 */
                    
                    		if ($contents) {
                    			$chunkObj->setContent( $contents );
                    			$success = $chunkObj->save(false);
                    		}
                    	}
                    }
                    
                    return ($success) ? '<h2>Success! Chunk refreshed with:</h2> ' . $contents : 'Failed...';
                    



                    getResources Example:
                    <div class="row-fluid">
                    [[refreshChunkContents
                    ?snippet=`getResources`
                    &chunkName=`featuredPhones`
                    &includeTVs=`1`
                    &limit=`6`
                    &tpl=`getStoreItemsForSiteFront`
                    &parents=`94`
                    &depth=`0`
                    &processTVs=`1` 
                    &showHidden=`1` 
                    &tvFilters =`featured==yes` 
                    &sortdir=`ASC`]]
                    </div>
                    
                    


                    getPage Example:
                    <div class="span12">
                    [[refreshChunkContents
                    ?snippet=`getPage`
                    &chunkName=`usServices`
                    &elementClass=`modSnippet` 
                    &element=`getResources`
                    &includeTVs=`1` 
                    &limit=`50` 
                    &tpl=`getUsProviders` 
                    &parents=`2`
                    &sortby=`{"menuindex":"ASC"}`
                    &depth=`0`
                    &processTVs=`1` 
                    &showHidden=`1` 
                    &activeClasses=`class="active"`   
                    ]]
                    


                    Create empty chunks matching the names and let these populate the content in the chunk. Place the in chunks your static pages. Bet you see a massive improvement then!

                      Get your copy of MODX Revolution Building the Web Your Way http://www.sanitypress.com/books/modx-revolution-building-the-web-your-way.html

                      Check out my MODX || xPDO resources here: http://www.shawnwilkerson.com
                      • 34926
                      • 87 Posts
                      Add this somewhere in your CSS resource:
                      /*
                      Parse time: [^p^] 
                      Total time: [^t^]
                      Source: [^s^]
                      */
                      


                      Does the connection time match the parse time?