mathjax rendering is taking too much time

[sanjay.co...@gmail.com]

I am using Mathjax with my react-native quiz application. It takes too much time to load the questions with all four options and downgrading the performance of the application. I tried putting loader when webview loads but loader stays only until the webview loads and rending of mathematical questions still takes more time to display. Any way by which we can reduce the rendering time or put a loader/activity indicator on rending too?+

Thanks

[Davide Cervone]

Without knowing how your application works (how it calls MathJax, etc.) it is not possible to advise you on how to speed it up the rendering, other than very general advice:  Use the CommonHTML output renderer (the SVG is next fastest, and HTML-CSS is the slowest); don't put your math in containers that have display:none set, as this causes slower rendering.

As for putting up a loader during rendering, see  

https://stackoverflow.com/questions/42982417/displaying-spinner-until-mathjax-loaded-even-with-direct-anchors-url

https://groups.google.com/d/topic/mathjax-users/UGCI1ggteQ0/discussion

https://stackoverflow.com/questions/49382685/mathjax-rendering-is-taking-too-much-time

for similar discussions.

On Jul 11, 2018, at 6:20 AM, sanjay.co...@gmail.com wrote:

I am using Mathjax with my react-native quiz application. It takes too much time to load the questions with all four options and downgrading the performance of the application. I tried putting loader when webview loads but loader stays only until the webview loads and rending of mathematical questions still takes more time to display. Any way by which we can reduce the rendering time or put a loader/activity indicator on rending too?+

Thanks

--
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.

[sanjay.co...@gmail.com]

Hi Davide

Yes site name is http://sobiprodevelopment.com/hpspelet/index.php?option=com_hpspelet&view=categories&Itemid=112

Please click on start exam button after you will a popup for user info and get question one by one.

You will see mathjax is working but it's taking too much time to render the question.


I am using following code for mathjax

$document = JFactory::getDocument();
$document->addScript(JURI::root().'includes/MathJax/MathJax.js?config=TeX-AMS_HTML&locale=sv');
$document->addScript(JURI::root().'includes/mathjaxconfig.js');

Can you please take a look at it?
Thanks

[giannis tolou]

hello i use mathjax in a project (website with html css js ) Do you want to give you link to see what i have and if you want the same to give you the part of my code with mathjax?

--

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-users+unsubscribe@googlegroups.com.

[sanjay.co...@gmail.com]

Hi Giannis,

Yes if you have working code then please send me that will full my requirement

Thanks

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

[giannis tolou]

http://www.quiz4math.tk/oria.html

check this url is my project where i have mathjax and if you want something like this

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.

[sanjay.co...@gmail.com]

Hi Giannis ,

Yes I seen that, my code is also working but question rendering with mathjax is too much time

[giannis tolou]

Use in js

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

[sanjay.co...@gmail.com]

Hi Giannis,

I used that and it's working after rendering correct one question. burt it's takign 3 to 4 second to render it
You can see at
http://sobiprodevelopment.com/hpspelet/index.php?option=com_hpspelet&view=categories&Itemid=112

Thanks

[David Farmer]

Maybe the Javascript on that page is doing something else,
so MathJax is not getting a chance to load?

[Davide Cervone]

Thanks for the pointer.  There are a couple of problems with your page.

The main issue is that you have changed the name of the mhchem.js extension without updating the loadComplete() call within the file.  That call tells MathJax when the mhchem extension has been successfully loaded, so without it, MathJax thinks it is not yet ready, and waits for it to become ready.  Eventually, it times out (after a 15 second wait), and goes on without the extension.  That is the long delay that you are experiencing.

So either change the name of mymhchem.js back to mhchem.js in the mhchem3 directory and change the name of the extension in your configuration, or edit the loadComplete() call in mymhchem.js to refer to mymhchem.js rather than mhchem.js.

That is the source of the delay, but there are other problems, as well.  You are loading your configuration incorrectly, and that means that the configuration isn't always being processed.  If you want to load a configuration from a separate file, you need to include it in the script that loads MathJax.js itself, as part of the config= option.  So in your case, the page includes

<script type="text/javascript" async

  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-AMS_HTML&locale=sv">

</script>

<script type="text/javascript" async  src="http://sobiprodevelopment.com/hpspelet/includes/mathjaxconfig.js">

</script>

which you should change to

<script type="text/javascript" async

  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-AMS_HTML, http://sobiprodevelopment.com/hpspelet/includes/mathjaxconfig.js&locale=sv">

</script>

and add the line

MathJax.Ajax.loadComplete("http://sobiprodevelopment.com/hpspelet/includes/mathjaxconfig.js");

at the end of your mathjaxconfig.js file.  See

http://docs.mathjax.org/en/latest/configuration.html#using-a-local-configuration-file-with-a-cdn

for more details.

Finally, you have

  MathJax.Menu.menu.Find("About MathJax").hidden = true;
  MathJax.Menu.menu.Find("Show Math As").hidden = true;
  MathJax.Menu.menu.Find("MathJax Help").hidden = true;

in the mathjaxconfig.js file, but they are in the wrong place.  Currently, they are inside a hook for the mml jax being ready, but that has nothing to do with the means being ready.  You need to use

MathJax.Hub.StartupHook("MathMenu Ready", function () {

  MathJax.Menu.menu.Find("About MathJax").hidden = true;

 MathJax.Menu.menu.Find("Show Math As").hidden = true;

 MathJax.Menu.menu.Find("MathJax Help").hidden = true;

});

instead.

Hope that clears things up for you.

Davide

[sanjay.co...@gmail.com]

Hi Davide,

Thank you so much. Problem is solved now. Now rendering question time is fast now.

Thanks

[Robert Filter]

Dear all,

this is a very current question at the moment. Google is penalizing both total blocking time (TBT) and cumulative layout shift (CLS).

Both are very challenging to Mathjax. TBT, for example, can be tackled with lazy load, but CLS will skyrocket, since math will only render when available. However, simply loading

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>

won't do the trick either - TBT will be pretty large.

Do you have some 2022 best practice to load Mathjax 3.x?

Thank you

Robert

[Peter Krautzberger]

Hi Robert,

If you care about such performance metrics you can always render mathjax server-side (or an edge worker etc).

(Though if I'm honest, I don't find those metrics very sensible for pages with (heavy) use of MathJax-rendered content.)

Best,

Peter

[Robert Filter]

Dear Peter,

I personally don't care that much. I actually find it kind of cool how the content is rendering and we have some nice TeX typesetting on a website.

Problem is: I am not google.

And google basically says: Look, this takes a lot of time to load (total blocking time) and causes cumulative layout shift (I wrote a bit about it here).

While e.g. Wikipedia has the ressources to parse math in their environment an load svg's automatically, I don't have that possibility. So for CLS you need to invest a lot of manual effort, but blocking time by rendering is another beast.

Really open to know what you think how we should load to have nice results on pagespeed.web.de .

So far my only reliable method is to replace math by svg images...

Does anyone have a more js-way of getting good pagespeed results?

Thank you

Robert

[Robert Filter]

Ok, I think I fixed the issues. No lazy load, fixed heights, cdn, simple configuration. I have updated my article about my approach with instructions.

Really interesting that the most simple settings provide the best results... I now hope the results stay as they are :)

[Peter Krautzberger]

Hi Robert,

> And google basically says: Look, this takes a lot of time to load (total blocking time) and causes cumulative layout shift

Sure, but it's supposed to be a guide for you. Your site is likely not competing for SERPs with lean marketing pages but other mathjax-heavy content. Evaluating the competition will be more useful than optimizing some marketing metric.

Reading the article, I would caution against your suggestion for SVG generation. Using img tags to load SVGs is a bad experience, both regarding performance, rendering, and accessibility.

Using MathJax output (either inline SVG or HTML+CSS) is fast and can still offer excellent accessibility.

Anyway, it's amusing that the conclusion is to simply use the standard tex-chtml component. Thanks for sharing that.

Peter

[Robert Filter]

Hi Peter,

it is of course always a good point to look at the competition.

However, the indication of Google was basically very simple: Web Vitals not passed.

So, regardless of what others are doing I was very unhappy with that situation.

Personally I don't think that svg is necessarily a bad experience, but there's probably room for another discussion :)

All the best

Robert

[Murray]

Hello Robert

Google (and more importantly, users) are most concerned about page load times, and blocking by scripts so "time to interactive".

I know you've already found a solution, but I thought you may find the following interesting.

I have achieved good results lazy loading all aspects of MathJax. The trick is to lazy load things before they appear on screen as the user scrolls down.

That is, if the page has math somewhere down the page, I proceed as follows:

1. Nothing happens with MathJax on initial page load (so there is no blocking, and short time to interactive)
2. As the user scrolls down and approaches the math (while it is still off screen), load MathJax 
3. Process the first few equations before the user scrolls down to them
4. Continue to process any remaining equations before the user sees them

In this way, there is no layout shift since everything is processed and laid out before it even appears.

If the page has hundreds of equations, there is no lag or delay while everything is processed.

On the other hand, if math is near the top, MathJax loads immediately and processes what can be seen plus some equations "below the fold".

You can see it in action on this page:

https://python-course.eu/machine-learning/expectation-maximization-and-gaussian-mixture-models-gmm.php

If you follow along in the console, you'll see nothing happening with MathJax on page load. As you scroll down, you'll see when MathJax loads, and that some equations are processed while out of view. As you continue to scroll down, more equations are processed and are ready before you see them.

I'm seeing the following result in Chrome's Lighthouse:

I'm making use of an IntersectionObserver to fire events as described above. The function handler_mj does most of the work.

Hope it's useful

Regards

Murray

[David Farmer]

Does the proposed SVG solution mean that a blind person using a
screen reader cannot determine what the formulas actually say?

On Sat, 21 May 2022, Murray wrote:

> Hello Robert
> Google (and more importantly, users) are most concerned about page load times, and blocking
> by scripts so "time to interactive".
>
> I know you've already found a solution, but I thought you may find the following interesting.
>
> I have achieved good results lazy loading all aspects of MathJax. The trick is to lazy load
> things before they appear on screen as the user scrolls down.
>
> That is, if the page has math somewhere down the page, I proceed as follows:

> 1. Nothing happens with MathJax on initial page load (so there is no blocking, and short
> time to interactive)
> 2. As the user scrolls down and approaches the math (while it is still off screen), load
> MathJax 
> 3. Process the first few equations before the user scrolls down to them
> 4. Continue to process any remaining equations before the user sees them

> In this way, there is no layout shift since everything is processed and laid out before it
> even appears.
>
> If the page has hundreds of equations, there is no lag or delay while everything is
> processed.
>
> On the other hand, if math is near the top, MathJax loads immediately and processes what can
> be seen plus some equations "below the fold".
>
> You can see it in action on this page:
>
> https://python-course.eu/machine-learning/expectation-maximization-and-gaussian-mixture-mode
> ls-gmm.php
>
> If you follow along in the console, you'll see nothing happening with MathJax on page load.
> As you scroll down, you'll see when MathJax loads, and that some equations are processed
> while out of view. As you continue to scroll down, more equations are processed and are ready
> before you see them.
>
> I'm seeing the following result in Chrome's Lighthouse:
>

> To view this discussion on the web visithttps://groups.google.com/d/msgid/mathjax-users/39554698-894b-416a-99fb-d21289922245n%40goog
> legroups.com.
>
>

[Davide Cervone]

Robert:

I suspect that Peter's suggestion of preprocessing the pages to include the output of MathJax directly (rather than loading a lot of small SVG files) is probably he way to go (unless the math on the page is being dynamically generated).  That would be fastest.  the MathJax node demos repository contains examples (ending in "-page") that illustrate this.

https://github.com/mathjax/MathJax-demos-node

For your current approach of reserving space, how are you determining he size to use?  If you want to run MathJax in he browser, it would be possible to preprocess the page just to get the correct sizes of the equations.  One could use puppeteer to get accurate sizes, or if you are only using characters from the MathJax fonts, even the LiteDOM could be used to get the expected bounding boxes.  This could all be automated, using techniques similar to those in the node demos, though you would need to do some coding yourself for some of that.

The lazy typesetting was modified in v3.2.1 to have a margin outside of the window's viewport where MathJax will perform typesetting when the expression enters that area, so it should prevent Google from penalizing you for the typesetting, as the changes will occur outside the visible portion of the screen.  There is a new parameter controlling how large that margin is, so you might want to experiment with that to see if you can get a value that works best for you.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/2c7b7bdb-3945-443d-9d1a-747bff150b4en%40googlegroups.com.

[Murray]

You may be interested in an SVG-based solution I've been working on.

Since no javascript is used on page load nor for processing, it is super fast and there is zero blocking time. It has the added benefit of having a very low DOM element count.

The basic idea is to process any math on the server (using PHP) and produce SVG images, which are then cached for later use. The images are lazy-loaded, thus making the initial page load very fast. Then the whole thing is delivered via CDN.

Editing equations is still easy, since new SVGs will be created on the fly when needed.

The majority of users don't need screen reader facilities and MathML (which increases processing time), but they are still essential. I've provided an option which adds such facilities on request. It would be possible to set a cookie so accessibility options are available by default for users that need it for each page in a site.

It would be possible to modify things to cater for dynamically produced math based on user input, but in such cases javascript probably makes more sense.

Here's the demo page. Click on the "Explanation" button to see more background and for a (rough) comparison table with MathJax and KaTeX.

https://bourne2learn.com/math/mathjax/svg-math.php

Hope it's useful.

Regards

Murray

[Fei Wang]

Dear Murray,

Could you also take a look at my website when you have time: 4 Linear Methods for Classification - innoLab (oceanumeric.github.io)

It is rendered very slowly too.

Thanks in advance!

Kind regards,

Fei

[Murray]

Fei Wang

For starters, your page calls both version 2.7 and version 3 of MathJax. Apart from adding extra bandwidth, it will be confusing because the settings for the 2 versions are quite incompatible. I strongly suggest you stick with version 3 only.

Secondly, like all output from Jupyter Notebook, the page is huge (over 6 MB). It is best to keep the total (including images and scripts) below 1 MB.

Thirdly, only a small fraction of the style and javascript produced by Jupyter is actually ever used by the page, and often the same thing is endlessly repeated (like all the style tags within the main body of the page.)

MathJax has a lazy load option (see https://docs.mathjax.org/en/latest/output/lazy.html) and this means MathJax will only process math just before the math scrolls into view. This will make a huge difference to the user experience.

So with all that in mind, here is a (very rough) revision of your page: https://bourne2learn.com/math/mathjax/linear-methods-revised.html (it needs some more styling and a small bit of javascript to make the code copy facility work).

I've used the lazy load option of MathJax in my version. The only javascript added beyond MathJax is some code that wraps each of the tables in a DIV which I've styled so the tables can be scrolled horizontally if they are wider than the screen, which is important for phones (your page did have such a facility, but sometimes the whole DIV or paragraph would move when the user scrolled horizontally).

The changes have reduced the "time to interactive" from around 30 seconds down to about 6 seconds.

An even faster page would result if you were to only load (say) the first cell on initial page load, and then use AJAX to load subsequent cells (from an external file, say) as the user scrolls down the page. That would give you sub-2 seconds load time.

Other speed fixes would include converting the data:image/png images into WEBP images (much smaller, and can be cached by the browser) and simplifying the SVGs. For example, the following inline style value is repeated 2,038 times on the page, and it only needs to be there once.

style="fill: #1f77b4; stroke: #ffffff; stroke-width: 0.48" 

Hope it helps

Regards

Murray

[Murray]

Hello again, Fei Wang

I had a closer look at your page, and concluded the biggest speed gain would be achieved by replacing the SVGs with WEBP images. I love SVG, but using SVG for your output images is what's causing your page to significantly bloat.

So this version uses WEBPs: https://bourne2learn.com/math/mathjax/linear-methods-MIN.html

The file size for the page has gone down from 6,270 kB to 300 kB, a reduction of 95.2%. The number of HTML elements (a key reason the page is slow) has gone down from 88,000 elements to 10,000 (a reduction of 89%), before MathJax starts its processing. 

"Time to interactive" (when the user can actually start scrolling the page) has gone down from 21 s to under 1 s.

As an exercise, I also did an AJAX version, where the first "cell" is on the page when it loads, then remaining cells are loaded by AJAX as the user scrolls down (and MathJax is triggered after the content arrives each time).

https://bourne2learn.com/math/mathjax/linear-methods-revised-AJAX.html

We now have a file size on load of just 8 kB and the number of DOM elements is just 600 (before MathJax adds its new elements).

"Time to interactive" is now just 0.370 s.

For each of these new two examples, I'm using lazy loading for both images and for MathJax. Both the "MIN" and "AJAX" pages work load quickly on a phone and scrolling is smooth.

For anyone interested, here are the GTMetrix analyses for the 3 pages I'm talking about.

Original page: https://gtmetrix.com/reports/oceanumeric.github.io/1gniBxIo/

Minimised page: https://gtmetrix.com/reports/bourne2learn.com/0It0zjor/

AJAX page: https://gtmetrix.com/reports/bourne2learn.com/sxR6IPAk/

Regards

Murray

[Lisa Johnson]

Thanks for all this great information! I'm looking to speed up my site that has hundreds of pages of equations. It used to get a lot more hits, but I think the problem with the new google algorithms is mathjax is slow (I also changed the name and redirect it now, so that didn't help).

The problem is I use wordpress and a wordpress plugin that uses the mathjax.org CDN. I would assume they would use a lazy load option - but I don't know enough to know.

I'm not really a programmer, so I'd appreciate any clues on how to make the pages load faster. The site is https://www.mathhints.com and here's an example of a page with a lot of equations https://mathhints.com/antiderivatives-indefinite-integration/  And of course there may be other issues that make my site slow; I lazy load my images, but there are a lot! I also use Ezoic for ads.

Thanks for any help you can give me!

Lisa

[Murray]

Hello Lisa

Actually, MathJax is one of the fastest things on your pages. It's the ads that are slowing things down the most.

The main things (in order) that are detracting from your Google score (and hence traffic) are:

1. The pages aren't mobile friendly. On a phone, I can't scroll left-right to see all of the wide equations or tables. Having boosted mobile-friendly sites for about 10 years, Google's index is now "mobile-first".
2. The payload is huge (around 8.4 MB)
3. There are many scripts (58 JS and 12 CSS) all jostling for attention, and downloading a lot of other content
4. There's a total blocking time of 7 seconds or so - it should be 0 or as low as possible
5. In some runs, the MathJax fonts weren't being loaded until everything else was in (in one case, after 21 seconds)

If you haven't already, it's a good idea to test individual pages using these tools:

https://www.webpagetest.org/

https://pagespeed.web.dev/

https://search.google.com/test/mobile-friendly

The result for the last one was "Page isn't usable on mobile. This page can be difficult to use on a mobile device."

Your plugin is using a very old version of MathJax (2.7.9) and doesn't incorporate lazy loading. MathJax version 3 had significant improvements in loading and processing times.

I used Ezoic ad platform for a while, but had to replace it because of the huge burden on resources. Try to find an ad platform that allows you to place ads where and when you want them.

I would suggest the following:

1. Make the page mobile-friendly
2. Choose the simplest Wordpress theme you can (has least javascript, least CSS)
3. Load MathJax v3 with lazy load
4. Once MathJax processing is completed (so there's no conflict and users will see math before ads), load the ad script such that it operates in a lazy-load fashion (ads are only loaded "below the fold" and as needed)

If you need help with the non-MathJax elements of your situation, feel free to reach out to me via email murraybourne [at] gmail.com

Regards

Murray

[Lisa Johnson]

Murray,

All this is incredibly helpful - I can't thank you enough! As you can see, I enjoy math a lot more than "programming" :)

I guess you're saying that I'll need to rewrite some of the latex so it breaks up some of the longer equations - or is there a way to make them render better on mobile sites via CSS, etc?

I also might reach out to you for some other questions.

Thanks again - I've been trying to get answers to these questions for months!

Lisa

[Murray]

Hi Lisa

I'm glad it was useful. I forgot to mention that while MathJax v3 has many speed improvements, there is still no auto page break for wide equations (like v2 had), but the developers do promise that feature for the next version.

The quick and dirty way to address width issues (for both wide tables and wide equations), until you have time to rewrite things, is to do the following:

(1) Remove the overflow:hidden on the body selector (it occurs in a few places)

(2) Add a class to your CSS with overflow-x: auto

(3) Add a script that finds anything that's going to be too wide and adds that class to the element.

I'd suggest waiting for MathJax v4 to land before rewriting anything.

You may be interested in this page (that is for KaTeX, but the principles are the same) for ways around writing wide equations on narrow screens.

View it using your phone: https://bourne2learn.com/math/katex/katex-wrap-examples.php

Regards

Murray

[Davide Cervone]

Lisa:

As Murray says, v4 does include automatic linebreaking in both in-line and displayed equations.  It also supports several other ways to handle displayed equations that are too wide (including adding a slider automatically to allow the expression to scroll left and right, or automatically shrinking the equation to fit).

Version 4 is currently out in beta test.  I am preparing a new beta version as we speak, and there will be at least one more beta after that before the official release.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/d74275ca-54dc-45c3-b502-93898d45b3aen%40googlegroups.com.

[Lisa Johnson]

Thanks, Davide, and thanks again Murray,

For now, I'm just using a display:block on my tables (CSS) with an overflow:auto, since most of my mathjax is in tables. The only problem I'm seeing is this the widths of tables no longer work; I read that display:block doesn't work with width. If anyone has a solution? 

Also - how do we ensure that that the wordpress Mathjax plugin I'm using (MathJax-Latex) stays up with the latest Mathjax versions? 

Lisa

[Davide Cervone]

Also - how do we ensure that that the wordpress Mathjax plugin I'm using (MathJax-Latex) stays up with the latest Mathjax versions? 

That it up to the maintainers of the plugin.  From the release notes for MathJax-Latex, it looks like they are using v2.7.9 (the latest v2 version), but the current version is 3.2.2, and we are in beta release for 4.0, so they haven't updated to version 3 yet.  

There is another plugin, Simple Latex, that allows either v2 or v3, so if you want current versions of MathJax, that might be a better choice (I don't have any experience with either plugin, so am not making an endorsement).

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/380272c0-0ccf-4bc8-91b0-3055ec5f0ee2n%40googlegroups.com.

[Lisa Johnson]

Thanks, Davide, I’m in the process of moving over to the V3 mathjax and my pages are loading much faster!!! This was it!!

Sent from my iPhone

On Oct 5, 2023, at 8:16 AM, Davide Cervone <dpv...@gmail.com> wrote:



To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/05837506-2339-4C03-99DB-067A08683F8A%40gmail.com.

[Lisa Johnson]

One more question - I notice with mathjax 3, I get some random vertical scrolling around blocks wirh equations. Is it ok if I remove that with CSS - that shouldn’t slow things down, right?

Sent from my iPad

On Oct 5, 2023, at 8:40 AM, Lisa Johnson <lis...@gmail.com> wrote:

Thanks, Davide, I’m in the process of moving over to the V3 mathjax and my pages are loading much faster!!! This was it!!

[Davide Cervone]

It should not slow things down.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/51F3DCD9-4B6C-46DC-848F-644CFA7B4867%40gmail.com.