Non-blocking or async Mint loading method? // Troubleshooting // Forum // Mint: A Fresh Look at your Site

Older | Newer

Non-blocking or async Mint loading method?

Alan Hogan
Minted
Posted on Dec 07, '10 at 05:00 pm

On my website, Mint loads in about 380ms. Since it’s in the <head> of my pages, this blocks the rendering of the web page.

I don’t really consider this acceptable, but am not sure what I can do about it.

I remember reading, some time ago, that Mint only supports this option as for some reason, pasting the code in <body> breaks Internet Explorer.

However there are lots of solutions out there for lazy-loading JS. I am wondering if some combination of the following techniques could help; if anyone has tried them; and if Mint does or will officially support one of them.

The async script tag attribute (new browsers only)
Using conditional comments to load Mint in the <head> for IE and only IE, and in the body for everyone else
LABjs or Head.js or another JavaScript-based lazy script loading solution

Anyone have any success in stopping Mint from blocking page render?

Alan Hogan
Minted
Posted on Dec 24, '10 at 07:56 pm

No one has any thoughts? Shaun?

MacManX
Minted
Posted on Dec 25, '10 at 03:05 am

To be honest, 380ms is just 0.38s. I’d say that’s quite acceptable given today’s average load times.

I have heard that Mint works fine with Head JS, but I haven’t tried it yet myself. http://headjs.com

JonathanS
Minted
Posted on Feb 22, '11 at 06:58 am

Bumping this, as I’m interested myself. Mint’s latency is pretty much doubling my page load times. OK, I’m serving static content from a Melody-backed site, so it’s hardly slow, but still - 50% is 50%.

I may explore the Headjs option, thanks MacManX.

Guan
Minted
Posted on Mar 13, '11 at 02:32 pm

I adapted some async code from Google Analytics that seems to work:

<script type="text/javascript"></script>

I put this in the footer of my pages.

donaldjenkins
Minted
Posted on Mar 15, '11 at 04:53 pm

@Guan: Did this really work for you? It doesn’t for me and neither, for that matter, does head.js (which works for most of my other scripts).

Mint really slows loading time down in relation to its size: my site loads in 1.4 seconds so it’s a significant drag having t leave it in the header.

Guan
Minted
Posted on Mar 16, '11 at 12:45 am

Yes, it works for me. I also tried head.js before and that worked too.

My linebreaks were removed so maybe the problem is my attempt to put the JavaScript inside an HTML comment. Have removed that part or added linebreaks?

If you put the code on a test page on your site I’d be happy to take a look.

donaldjenkins
Minted
Posted on Mar 17, '11 at 08:35 am

@Guan: I formatted it like this:

      <!-- Mint tracking code -->

      <script>
          <!-- (function () { var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.src = '/mint/?js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s); })();
      </script>       

      <!-- [End] Mint tracking code -->

Breaks the validation (“The text content of element script was not in the required format: Content contains the character sequence “) and doesn’t record my visits. Same with head.js. Only thing that works is putting the unaltered mint.js in the header.

donaldjenkins
Minted
Posted on Mar 17, '11 at 08:41 am

OK, I did get it to work with head.js by putting it first in the sequence of four scripts to load in the (“script-1.js”, “script-2.js”, “script-3.js”) form. You can see it in the source code to my site.

Guan
Minted
Posted on Mar 17, '11 at 02:14 pm

OK, what I meant was that you should take out the HTML comment, so:

<script>
    (function () {
        var ma = document.createElement('script');
        ma.type = 'text/javascript';
        ma.src = '/mint/?js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ma, s);
    })();
</script>

And put it at the bottom, not in <head>. I like this better because with a <script> in <head>, actually loading head.js will still block.

donaldjenkins
Minted
Posted on Mar 17, '11 at 04:42 pm

You mean in the bottom, with head.js (combination of both)?

Guan
Minted
Posted on Mar 17, '11 at 06:43 pm

I mean in the bottom, without head.js. The code I posted will load Mint. In fact it’s almost identical to the Google Analytics code that you already have.

donaldjenkins
Minted
Posted on Mar 17, '11 at 07:11 pm

@Guan: your code worked. It brought my dunamic site’s loading time down to 1.29 seconds: [link]. Thank you! You should try and get that solution more widely adopted.

I’m wondering whether one can actually use head.js a second time, in the fotter to load that code (and Google Analytics which I like to have as a backup and comparison point). What do you think?

Guan
Minted
Posted on Mar 18, '11 at 10:58 am

@donaldjenkins: I think you could use this trick to load head.js, though I don’t think there’s any reason to do it for Mint alone. I might do it if you had several JavaScript files to load besides Mint.

donaldjenkins
Minted
Posted on Mar 19, '11 at 11:50 am

@Guan: I have several scripts to load in the footer, actually! So I’d be loading head.js once in the header for some scripts, and again in the footer for some others.

What I’m wondering, though, is whether there’s any point in loading head.js twice, since the whole point of it is doing away with the latency of loading scripts in the first place. Once you use head.js, you aren’t going to experience any latency with the scripts it loads, so whether they are placed in the header or footer becomes immaterial. Or am I missing something here?

Guan
Minted
Posted on Mar 19, '11 at 11:54 pm

Scripts that are loaded in <head> block loading of the entire page. We talk about loading in the “footer”, but we actually mean the <body>, and as I understand it, these scripts don’t block.

I’m not a JavaScript guru, but you may want to look into whether you really need to have head.js load things? Could you do the same with head.ready?

Even if you do need some things to load in the header, it could be a could idea to minimize these blocking loads.

donaldjenkins
Minted
Posted on Mar 20, '11 at 06:11 am

@Guan: thanks for the reply! I’m even less of a js guru than you are. What I have noticed is that loading all my scripts, bar Mint and Good Analytics, from within head.js significantly speeds up loading (from 1.6 seconds to about 1.4 seconds).

I’m basically unsure of how the asynchronic scripts should be even included in head.js technically: can they be minified/combined into one?

donaldjenkins
Minted
Posted on Mar 20, '11 at 08:21 am

Hm: My user visits have dropped significantly since I started using the async script: IE is down to 2 per cent (from, admittedly, an already very low 10 per cent, I’m lucky not to have many visitors using substandard browsers).

This would, I would have thought, necessarily indicate that not all visits are being picked up, especially since GA stats show an increase over the period…

Guan
Minted
Posted on Mar 22, '11 at 01:01 pm

Yes, there’s definitely something wrong, I just tested with IE while tailing the log and it loaded /mint/?js, but didn’t execute /mint/?record. I’ll look into it.

donaldjenkins
Minted
Posted on Mar 24, '11 at 07:13 am

Right! Let’s hope we can get something worked out!

Paul Olyslager
Minted
Posted on Jun 21, '11 at 11:04 am

Did someone already came up with a solution? I’m trying to save bandwith as much as possible! My blog is running on Wordpress and have a caching plugin, including CDN but still loading slow.

cainmi
Minted
Posted on Aug 15, '11 at 02:39 am

The problem with this is that the Mint JS itself includes document.write which causes a lot of trouble with older versions of IE - this is probably the cause of dropping IE stats.

Lazy loading of JS, or at least using a non-blocking method like putting it just before < /body> is quite common these days.

I can’t use Mint until it will have less of an effect on my page load times.

Any JS boffins out there tried re-writing the Mint JS to not include document.write, maybe using jQuery to take out the cross-browser issues?

Not sure if you’re following this thread Shaun, but there are a few like it - maybe something to consider for the next version?

Cheers, Mitch.

Older | Newer

You must be logged in to reply. Login above or create an account

Mint Forum

Non-blocking or async Mint loading method?