MathJAX - Rendering Time on first Load

[in...@massmatics.de]

Hello there,

I do not know exactly if this is a MathJAX related problem only, perhaps it has something to do with the AJAX/JS implementation as well, but I really can not explain this behavior and perhaps you guys have a useful hint.

The problem can be easily described by an example:

1) go to http://www.massmatics.de/merkzettel/
2) Put something into the search field like "Integration"
3) click on the first result
4) Count to 10 - then you see the the ajax loaded content is parsed and rendered by mathjax (what we currently hide with a layer on top)
5) Now click on a red hyperlink in the loaded content
6)You see that the content is rendered immediately.
7) Now click on a second link of our search result - is should behave the same as in 6)

You already may know the question arising: Why does it take so long for the first load to start the rendering process? I thought about a caching problem but this behavior repeats after you visit http://www.massmatics.de/merkzettel/ again.

My web developing skills are an average so I might not see the obvious - if so, please feel free to give me a hint to the right direction. :)

If there are questions where I should go into more detail please ask!

Kind Regards
Stephan

[in...@massmatics.de]

Hello,

just a little "bump" for this question. I would be happy for any advise or a possible guess which could lead me to the solution.

Thanks in advance!
stephan

[Peter Krautzberger]

Hi Stephan,

Just some feedback from a quick look at your application. When I navigate your page (Chrome 41/42, FF 36), I encounter a significant delay before any rendering occurs: the loading animation does not kick in immediately, instead, the (non-MathJax'ed) content of the entry (Unbestimmtes Integral etc) is visible, for up to a few seconds. Perhaps the initial rendering delay has a similar reason (except that the loading animation kicks in).

Best regards,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Davide P. Cervone]

When MathJax is loaded, it reads your configuration and then loads the components that are needed for that configuration.  That includes loading the various input and output processors, the preprocessors, and the extensions, in addition to some utility code for menus, and so on.  That can take some time, and that is what you are seeing in your first 10 second wait.  When you load the next page, MathJax is already configured and has its components, so it can proceed immediately.

You are correct to be thinking about a caching issue, and you are also correct that a new visit to the main site shows the same behavior.  That is because you are hosing MathJax on your own server, and it is sending the MathJax files with max-age=0 in the header.  That means that the files will not be cached by the browser, so you have to load them again when you revisit the site.  You may want to adjust your server settings to allow caching to occur.

Finally, you are not using a combined configuration file, and rather are using your own default.min.js.  This is the least efficient way to go, as it means all the files will have to be loaded individually.  The combined configuration files include multiple component files all in one, so you have fewer network requests and file transfers to wait for.  You might want to go to a combined file that is close to your needs, with inline configuration that adds the changes you need (or a separate smaller configuration file that makes those changes).  That should help your initial visit startup time.

Davide

[in...@massmatics.de]

Am Dienstag, 31. März 2015 13:40:21 UTC+2 schrieb Davide P. Cervone:

When MathJax is loaded, it reads your configuration and then loads the components that are needed for that configuration.  That includes loading the various input and output processors, the preprocessors, and the extensions, in addition to some utility code for menus, and so on.  That can take some time, and that is what you are seeing in your first 10 second wait.  When you load the next page, MathJax is already configured and has its components, so it can proceed immediately.

Hello Davide,

thanks for the feedback! I just have some small questions:
 

You are correct to be thinking about a caching issue, and you are also correct that a new visit to the main site shows the same behavior.  That is because you are hosing MathJax on your own server, and it is sending the MathJax files with max-age=0 in the header.  That means that the files will not be cached by the browser, so you have to load them again when you revisit the site.  You may want to adjust your server settings to allow caching to occur.

I am a little bit confused because I actually set some caching for JS files in my .httaccess:

# CSS and JavaScript
    ExpiresByType text/css "access plus 1 month 1 hour"
    ExpiresByType text/x-js "access plus 7 days 1 hour"
    ExpiresByType text/javascript "access plus 7 days 1 hour"
    ExpiresByType application/javascript "access plus 7 days 1 hour"
    ExpiresByType application/x-javascript "access plus 7 days 1 hour"

or are there other file types which causes this problem? An access of 0 seconds is currently implemented for the following types:

    ExpiresByType text/cache-manifest       "access plus 0 seconds"
# Your document html
    ExpiresByType text/html                 "access plus 0 seconds"
# Data
    ExpiresByType text/xml                  "access plus 0 seconds"
    ExpiresByType application/xml           "access plus 0 seconds"
    ExpiresByType application/json          "access plus 0 seconds"

I wanted to point out as well that I used the CDN but got rendering problems lately, therefore I switched to local hosting.
 

Finally, you are not using a combined configuration file, and rather are using your own default.min.js.  This is the least efficient way to go, as it means all the files will have to be loaded individually.  The combined configuration files include multiple component files all in one, so you have fewer network requests and file transfers to wait for.  You might want to go to a combined file that is close to your needs, with inline configuration that adds the changes you need (or a separate smaller configuration file that makes those changes).  That should help your initial visit startup time.

thanks for the hint, I will give MathJaX 2.5 a try and will definitely implement this combined configuration file. I will post my results when i try to speed up the process.

Best Regards
Stephan
 

[in...@massmatics.de]

Hello everyone,

i found the problem with the max-age:0 property. My httaccess file stated:

    <IfModule mod_headers.c>
        Header append Cache-Control "public"
    </IfModule>


which set the max-age to 0. I added

            <FilesMatch "\.(js|css|swf)$">
                Header set Cache-Control "max-age=1209600"
            </FilesMatch>

and no it works faster, at least when reaccessing the site.

I played arround with the combined configuration file but I think I have to take a local configuration due some specific changes I made to the config file. Just to make sure:

Is it really faster to configure mathjax with inline code and load the MathJax.js file via CDN? Or is it better to provide an local configuration file then? Please let me know which version you would prefer and I will implement it.

Thanks again for the great help!
Stephan

[Peter Krautzberger]

Hi Stephan,

> Is it really faster to configure mathjax with inline code and load the MathJax.js file via CDN?

That will depends on a lot of factors but I suspect the difference in speed will be minor (the bottleneck is the rendering after all). \

The biggest advantage of using the CDN is caching across sites -- if someone has already visited another site using our CDN they will likely have some MathJax components cached.

In any case, you can mix local configurations with combined configuration files (with or without the CDN, including mixing local configuration files with CDN configuration files), you can also load inline-configurations blocks as plain JS (see http://docs.mathjax.org/en/latest/configuration.html#using-plain-javascript).

Best,

Peter.

[Davide P. Cervone]

That will depends on a lot of factors but I suspect the difference in speed will be minor (the bottleneck is the rendering after all).

Peter, I think that may not be the case, here.  There are two bottlenecks for MathJax:  one is the actual rendering, but the other is downloading the needed components and fonts.  The fact that the first page loads slowly and the later ones quickly suggests that the initialing loading of components is an important factor here.  Since the configuration does not use a combined configuration file, each component is requested and served separately; switching to a combined configuration file should help that (but not eliminate the delay entirely, of course, since the components do need to be fetched).

Stephen, your default configuration seems to change only the following values:

MathJax.Hub.Config({

  jax: ["input/TeX","output/HTML-CSS"],

  extensions: ["jsMath2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js", "TeX/bbox.js"],

  skipStartupTypeset: true,

  showMathMenu: false,

  showMathMenuMSIE: false,

  "HTML-CSS": {

    preferredFont: "STIX",

    webFont: "TeX",

    imageFont: null,

    styles: {".MathJax_Display": {display: "table"}}

  },

  MathMenu: {

    showRenderer: false,

    showMathPlayer: false

  },

  MathEvents: {

    hover: 0

  }

});

so this could easily be included in-line, or as a separate file like you are using now (only smaller).  Better yet would be to use a combined configuration file that specifies TeX input and HTML output (like TeX-AMS_HTML) and include only the changes from that.  That would give you the reduced number of file requests while still getting your desired configuration.  I see that you are using the jsMath2jax extension; none of the combined configuration files include that (since it was meant only as a transition to allow you to move from jsMath to MathJax, not as a permanent component), so you would need to load that in the extensions array.  All the TeX-based combined configuration files use tex2jax, so you might need to disable that as part of your configuration as well.  Finally, note also that the bbox extension is loaded automatically when it is used, so there is no need to include it explicitly, and the AMS extensions are included in all the combined configurations, so there is not need to list them either.  So I'd recommend something like the following:

<script type="text/x-mathjax-config">

MathJax.Hub.Config({

  extensions: ["jsMath2jax.js"],

  skipStartupTypeset: true,

  showMathMenu: false,

  showMathMenuMSIE: false,

  "HTML-CSS": {

    preferredFont: "STIX",

    webFont: "TeX",

    imageFont: null,

    styles: {".MathJax_Display": {display: "table"}}

  },

  MathMenu: {

    showRenderer: false,

    showMathPlayer: false,

    CHTMLpreview: false

  },

  MathEvents: {

    hover: 0

  },

  tex2jax: {

    inlineMath: [],

    displayMath: [],

    processEscapes: false,

    processEnvironments: false,

    processRefs: false

  }

});

</script>

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

I've added the code to disable tex2jax, and also the Fast Preview option (since you are rendering behind the scenes then showing the page, there is no need for the preview.

Again, you cold put the new configuration into your own file as you do now (though that is an additional file request).  You already have some in-line configuration in your pages, so you could combined that with what I list here as well.

I think if you use this approach, your initial pages will be a little faster.

Good luck.

Davide

[in...@massmatics.de]

Dear Davide,

as english is not my mother tongue I really thought about how I could react in an appropriate manner - I think a huge "WOW" is a good start (although it is just such a short word).

I implemented your version (and skipped the jsMath2Jax exentension because I could not remember to need it anymore) and it worked like a charme - it is not a little bit faster, it is really fast.

Thanks for checking my code and my configuration, thanks for putting it all together and thanks for your support over all the years - you do a great job and youre level of support is one important ingredient to make MathJax such a great piece of software.

Happy Easter and kind regards
Stephan