How to include only the necessary js for each page?

On my website I have as little templates as possible (since doing otherwise would kind of defeat the purpose of using a template). However, not every page uses the same (java)scripts, but I'm currently loading all of them in the head.

I'm thinking about loading just what is necessary for the current page, and lazy loading the rest, to minimize the use of bandwidth and speed up page rendering.

What would be the best way to do this? Because a lot of pages use the same template, so I can't set this via the template. Also I'd like to make the solution as automatic as possible (so not having to set the scripts requirements for each page by hand, which could open the door to mistakes).

Does anyone have any ideas on how to do this? Template variables maybe?

What I always do is create a cssTV in the head and a jsTV before the closing body tag that is included in all my templates then I use an output filter to render it if it's not empty, something along these lines:



Then you can insert your additional css or js files per page.

Good luck, hope that helps.

Depends on the scripts, but not all of them need loading in the head, so sometimes you can load them into the same chunk you are using for the output or whatever else you are doing.

It would be easier if you could tell us what sort of scripts, and how many different sets of scripts you're loading on different pages.

Are these all different plugins or just custom js code for on-page elements?

Quote from: pdincubus at Aug 20, 2013, 10:12 AM

It would be easier if you could tell us what sort of scripts, and how many different sets of scripts you're loading on different pages.

Are these all different plugins or just custom js code for on-page elements?

Ah yes of course, sorry. I'm using:

• Jquery (in the <head>)
• Picturefill (and a supporting script: matchmedia, both in <head>)
• Royalslider (and an initialization script, both in <head>)
• Smoothscroll (before </body>
• Piwik (analytics, before </body>)

All scripts crucial to page rendering are in the head to prevent FOUC, and the rest is right before the </body> tag.

You can also create an @INHERIT TV called JsFiles with a comma-separated list of the JS file paths. Then put a snippet like this in the template:



That will put the JS links in the head.
You can also use regClientScript() if you want the JS at the bottom (just above the closing body tag).

Theoretically, you could skip the TV and analyze the page (e.g., with strpos() ) to calculate which JS files to inject.

On my website I have as little templates as possible (since doing otherwise would kind of defeat the purpose of using a template)

Actually no it wouldn't.

I've been on these forums for around 5 years and lost count of the amount of conversations people have had as to how to use as little templates as possible, and if memory serves me correct Susan Ottwell got it down to 1 or 2, but, it really defeats the object if if you need to start creating 50 chunks / TV's.

It would really depend on how the site is structured, however, if you need to create 6 Templates to get what you want without having to go through 3 weeks of extra coding just do that, if you need 10 then create 10.

As long as the client knows how to use the system it's not a problem.

Quote from: BobRay at Aug 20, 2013, 01:51 PM

You can also create an @INHERIT TV called JsFiles with a comma-separated list of the JS file paths. Then put a snippet like this in the template:

$files = $modx->resource->getTVValue('JsFiles');

if (! empty ($files)) {
    $jsFiles = explode(',', $files);
    foreach ($jsfiles as $file) {
        $modx->regClientStartupScript($file);
    }
}

That will put the JS links in the head.
You can also use regClientScript() if you want the JS at the bottom (just above the closing body tag).

Theoretically, you could skip the TV and analyze the page (e.g., with strpos() ) to calculate which JS files to inject.

That sounds like a good idea! What kind of template variable construction would you use for this (i.e.: how would you turn certain .js scripts on or off for a specific page)? I was thinking of something that would allow for placing the .js in either the <head>, before the </body> or in a lazy loading script. So maybe some sort of checkbox TV, that outputs comma delimited lists for these three scenarios?

And Paulp: You're right. I'm using a little templates as possible, but within reason. I have about six or seven for a simple website. So I'm not as extreme as my original statement might have made me look.

I'd use a checkbox TV. If you can come up with short names for the scripts, you can do the Input Option values like this:

Probably better to have the checkboxes load a chunk with the full set of tags. If these will require specific .css files as well, a snippet using regClientCSS(), regClientStartupScript() and regClientScript() might be a better choice in the chunks since that way the files can be loaded where they are wanted.