How do you defer JavaScript in PHP? Specifically phpBB?

[John Connor]

I have asked this question at the phpBB website and on stack exchange and I'm just getting the run around. This should be a simple thing to do! The code given in this website is to be used in a HTML document, but I need it to work in PHP and I need to know what PHP file to place it. I tried that code in the index.php file but that didn't work. https://varvy.com/pagespeed/defer-loading-javascript.html

https://www.phpbb.com/community/viewtopic.php?p=14400621#p14400621

https://www.phpbb.com/community/viewtopic.php?p=14401511#p14401511

http://stackoverflow.com/questions/36449153/defer-javascript-in-phpbb


This is very frustrating as I did it in WordPress with a plugin and I could do it with code, but opted for the plugin. If I can do it with Wordpress with PHP, then why can't I in phpBB?

Found this code, but I don't know what (defined('CMS')) means.

<?php if (defined('CMS')) echo '<script  src="'.BASE_URL.LIBRARY_DIR.'js/default.js"  type="text/javascript"></script>' ?>

http://3x.impresspages.org/cms/answers/6142/how-can-i-defer-parsing-of-javascript

I don't want to cache anything in someone's browser because I may make a change to my site.

Everywhere I search I get nothing but information on WordPress.

Another possible solution but I don't know if that code is to be placed in each JS file or not. Seems like it. http://www.willmaster.com/blog/javascript/loading-javascript-asynchronous-or-deferred.php

 

[Ken g6]

Generally, you don't defer loading of JS. You defer execution of each script inside the JS.

Oh, I see, you want to defer loading of JS because some Pagespeed Optimization site told you you should. Well, the first trick is to get the <script> tags out of the PHP output, so they don't appear at all. I don't know how to do that with PHPBB specifically.

Once you do that, then you can use something like the first link you gave:

<script type="text/javascript">

function downloadJSAtOnload() {
  var scriptsToDownload = ['path/to/script1.js', 'path/to/script2.js'];
  for(var i=0; i < scriptsToDownload.length; i++) {
    var element = document.createElement("script");
    element.src = scriptsToDownload[i];
    document.body.appendChild(element);
  }
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Although it would also be good to consolidate your scripts into one file. Edit: Or maybe two files; one for stuff that really does need to load immediately, and one for stuff that can wait.

I don't want to cache anything in someone's browser because I may make a change to my site.

Well, that's a bad plan. Maybe set your cache expiration on images and scripts low, to 1 day or so. That's something you need to set on your web server - probably Apache, so this would apply, but I can't say for sure.

Another possible solution but I don't know if that code is to be placed in each JS file or not. Seems like it. http://www.willmaster.com/blog/javas...r-deferred.php

That sounds like a better plan. You'd just need to find where your <script> tags are emitted and modify them. That may not be as easy as it sounds either, but it's probably no harder than preventing them from being emitted at all.

 

[DaveSimmons]

I don't want to cache anything in someone's browser because I may make a change to my site.

For included files, what about using versioning?

script = myjs20160409a.js

That lets browsers cache the script until you actually do revise it. Keeping the old versions on the server also lets you revert if necessary.

 

[John Connor]

Generally, you don't defer loading of JS. You defer execution of each script inside the JS.

Oh, I see, you want to defer loading of JS because some Pagespeed Optimization site told you you should. Well, the first trick is to get the <script> tags out of the PHP output, so they don't appear at all. I don't know how to do that with PHPBB specifically.

Once you do that, then you can use something like the first link you gave:

<script type="text/javascript">

function downloadJSAtOnload() {
  var scriptsToDownload = ['path/to/script1.js', 'path/to/script2.js'];
  for(var i=0; i < scriptsToDownload.length; i++) {
    var element = document.createElement("script");
    element.src = scriptsToDownload[i];
    document.body.appendChild(element);
  }
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Although it would also be good to consolidate your scripts into one file. Edit: Or maybe two files; one for stuff that really does need to load immediately, and one for stuff that can wait.


Well, that's a bad plan. Maybe set your cache expiration on images and scripts low, to 1 day or so. That's something you need to set on your web server - probably Apache, so this would apply, but I can't say for sure.



That sounds like a better plan. You'd just need to find where your <script> tags are emitted and modify them. That may not be as easy as it sounds either, but it's probably no harder than preventing them from being emitted at all.

That website uses Google to show what is effected on page speed.

I'm not able to get this right. I tried adding the code to index.php, but I just got a blank page.

I tried adding the code to each file, clearing the cache and doing the page test. overall_header_body_before, overall_header_content_before, overall_header_head_append, overall_header_page_body_before. Nothing worked.

I can add code to the 14 JS files that should be deferred, but I don't understand this:

<script defer src="http://example.com/file.js"></script>

How would I place that in a JS file?

 

[Ken g6]

Nothing will change until you can find a way to prevent the PHP from producing those script tags - or at least significantly modify them to include "defer". That's the first step; the second step is to either add the JavaScript code I mentioned, or reintroduce the script tags with "defer".

Nothing you do to the .js files can help with the first step. You must find where the <script> tags are produced in the PHP code. This is likely to be several levels deep in included PHP scripts.

 

[John Connor]

The website that does the page test show the 14 JS files that can be differed so that isn't an issue. Since I don't know JS, can you give me an example using this JS file as to what the deffer code would be?

https://app.box.com/s/wnk3e9ou6g8hgwjy5fpivvtgjufakhtx