XF 1.4 Minify JS => inline <script> question

[Betclever]

Hello,

I'm using this website http://jscompress.com/ to compress my JS files but on GT Metrix, I have 3 blocks but without name or something else to know which files must be compressed.

This is what I have:

• inline <script> tag #7
• inline <script> tag #8
• inline <script> tag #12

Can someone tell me what is this?

Regards,

 

[Jon W]

If it is inline code, then it isn't a separate file, it is part of your HTML code.

For example, within this page, there is this inline script:

<script>
var _gaq = [['_setAccount', 'UA-10855523-4'], ['_trackPageview']];
!function(d, t)
{
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == d.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
}
(document, 'script');
</script>

This could be minified and replaced with:

<script>
var _gaq=[["_setAccount","UA-10855523-4"],["_trackPageview"]];!function(t,e){var a=t.createElement(e),c=t.getElementsByTagName(e)[0];a.async=!0,a.src=("https:"==t.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js",c.parentNode.insertBefore(a,c)}(document,"script");
</script>

 

[Betclever]

If it is inline code, then it isn't a separate file, it is part of your HTML code.

For example, within this page, there is this inline script:

<script>
var _gaq = [['_setAccount', 'UA-10855523-4'], ['_trackPageview']];
!function(d, t)
{
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == d.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
}
(document, 'script');
</script>

This could be minified and replaced with:

<script>
var _gaq=[["_setAccount","UA-10855523-4"],["_trackPageview"]];!function(t,e){var a=t.createElement(e),c=t.getElementsByTagName(e)[0];a.async=!0,a.src=("https:"==t.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js",c.parentNode.insertBefore(a,c)}(document,"script");
</script>

Hello Jon,

Thanks for this info but I got a question regarding this code.
As you know, there is a lot of templates in Xenforo so GT Metrix gives me just the inline <script> tag #7 "for example" but in which template, I will find back this script?

I usually use extra.css for the CSS but I did not change a lot of things in HTML templates so I don't know, which templates I have to modify... :/

For the code, I can put this one into the compressor and it will return me a compressed code but I just want to know where are these lines?

Regards,

 

[Jon W]

Mostly in PAGE_CONTAINER, but to find them all just search all your templates for <script>.

Be careful with minifying some of them as they may contain XenForo template code.

For example this code:

<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
            var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
            if (_b && _b.href != _bH) _b.href = _bH;
        </script>

would cause an error if you copied and pasted it.

You will need to remove <xen:comment> bits completely (or put them back in afterwards).

The {xen:jescape...} bit, you will need to make sure it doesn't get minified in any way (it shouldn't).

So your end result will be something like:

<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>var _b=document.getElementsByTagName("base")[0],_bH="{xen:jsescape $requestPaths.fullBasePath}";_b&&_b.href!=_bH&&(_b.href=_bH);</script>

 

[Jon W]

For what its worth, most if not all of these bits of code are really small and the effect of minifying them is going to be tiny.

 

[Betclever]

I have paste your modified code instead the one by default but when I retest with Gt Metrix, nothing change and it always shows the same line... :/

Any idea?

 

[Jon W]

Maybe it wants you to convert the inline scripts into separate Javascript files.

 

[Betclever]

Maybe it wants you to convert the inline scripts into separate Javascript files.

In fact, I have used this website to compress HTML/X https://htmlcompressor.com/compressor/ but some codes are already compressed and the size is the same as the original after compressing this one...
However, are you able to tell me what I can do to separate Javascript files and is it a good thing on Xenforo cause what will happen after updates?

Regards,

 

[Jon W]

In fact, I have used this website to compress HTML/X https://htmlcompressor.com/compressor/ but some codes are already compressed and the size is the same as the original after compressing this one...
However, are you able to tell me what I can do to separate Javascript files and is it a good thing on Xenforo cause what will happen after updates?

Regards,

My opinion is that there will be no advantage to having separate files. The amount of Javascript is so small and because it includes variables (that would have to be included in the URL), the benefit would be absolutely tiny (if anything at all) or might even make it worse.