Moving Auto-Generated Inline JavaScript to Before The Closing </body> tag

Andy Boot asked on December 7, 2016 14:51

Hi There,

I've been trying to figure out how to move certain render blocking elements to the footer of HTML which I've mostly been successful in doing.

The PMC Portal Engine Resource Combiner (http://devnet.kentico.com/marketplace/utilities/portal-engine-resource-combiner) has been a massive help in combining the WebResource.axd and ScriptResource.axd files into 1 file. I added a line of code to move the script tag referencing the combined axd file to before the closing </body which I've been plagued with JS errors (for all the right reasons):

(index):75 Uncaught ReferenceError: Sys is not defined(…)
(index):315 Uncaught ReferenceError: Sys is not defined(…)
(index):320 Uncaught ReferenceError: Sys is not defined(…)
(index):333 Uncaught ReferenceError: WebForm_InitCallback is not defined(…)

Here's some references to the lines above:

Line 75:

//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('manScript', 'form', ['tctxM',''], [], [], 90, '');
//]]>

Line 315:

//<![CDATA[
(function() {var fn = function() {$get("manScript_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]>

Line 320:

//<![CDATA[
if (typeof(Sys.Browser.WebKit) == 'undefined') {
    Sys.Browser.WebKit = {};
}
if (navigator.userAgent.indexOf('WebKit/') > -1) {
    Sys.Browser.agent = Sys.Browser.WebKit;
    Sys.Browser.version = parseFloat(navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
    Sys.Browser.name = 'WebKit';
}
//]]>

Line 333:

//<![CDATA[

WebForm_InitCallback();
theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
//]]>

Line 354:

<script src="/axd/760d5979-3f77-485a-b59a-9b98ccbac6a9/combiner.axd" type="text/javascript"></script></body>

In an ideal world what I'm after is the script reference to combiner.axd on line 354 before the 4 script tags followed by the closing tag. That'd surely resolve the JS errors? Is there any reason they cannot be moved?

My PageSpeed Insights mobile speed score is:

  • 80% before combining the axd files,
  • 85% after combining the axd files,
  • 100% after combining the axd files and moving to before the tag

So you can see why I'm keen to find a solution.

If anybody can help that'd be much appreciated.

Thanks in advance,

Andy

Correct Answer

Anton Grekhovodov answered on December 7, 2016 19:28

Hi Andy,

For this purpose I wrote a custom output filter, which moves all inline scripts to after external js scripts (or before tag)

How to create an output filter: Making custom modifications to output HTML

0 votesVote for this answer Unmark Correct answer

Recent Answers


Andy Boot answered on December 8, 2016 12:15

Great Thanks Anton, That seems to have done the trick.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.