How to set up Lazy Typesetting in MathJax

This section introduces how to set up Lazy Typesetting to help speed up the MathJax processing, which is said to slow down Web loading.

The methods in this article assume that you are using a WordPress plugin to load MathJax.

What is Lazy Typesetting?

Lazy Typesetting means that when a web page is loaded, not all math formulas in the page are processed at once, but only those that are displayed on the screen.

MathJax takes a long time to convert code written in LaTeX notation into mathematical formulas for the Web. This means that if a page contains many formulas, the viewer will have to wait until all processing is complete.

Lazy Typesetting reduces the viewer’s waiting time by processing only the visible part of the screen.

This feature is available from MathJax version 3.2.

https://docs.mathjax.org/en/latest/upgrading/whats-new-3.2.html#v3-2-lazy-typesetting

Note that Lazy Typesetting is not available in version 2.x.x or versions 3.0 and 3.1.

MathJax version 3 is fast enough to load better than version 2, but setting Lazy Typesetting makes it even faster.

How to add Lazy Typesetting functionality when using MathJax-LaTeX

Load MathJax version 3.2

First, you need to load MathJax version 3.2 or later.

The following article introduces “How to load the latest version (version 3)”, so please refer to it.

How to use MathJax-LaTeX, a WordPress plug-in for math formulas

MathJax-LaTeX is a popular plugin with a large number of active installations, but it does not have an optional field to add code for customization.

For this reason, we introduce “setting with action hook” and “setting with custom HTML block” instead of setting on the plugin.

Set up Lazy Typesetting with action hook

Click the Theme File Editor in the WordPress admin menu Appearance.
Select "function.php" from the list of files appeared on the right.
Copy and paste the following code into function.php to implement Lazy Typesetting.

function mathjaxlazy_add(){
	echo <<< EOM
	<script>MathJax = {loader: {load: ['ui/lazy']}};</script>
EOM;
}
add_action('wp_head', 'mathjaxlazy_add');

Please make a backup and then try it.

If you have not created a child theme, or if you are a WordPress beginner, I recommend the following “Set up Lazy Typesetting with Custom HTML Blocks”.

Set up Lazy Typesetting with Custom HTML Blocks

Add a custom HTML block somewhere when editing a post.
You can implement Lazy Typesetting by copying and pasting the code below into the added custom HTML block.

<script>
MathJax = {
  loader: {load: ['ui/lazy']}
};
</script>

However, a custom HTML block must be added to each post.

MathJax-LaTeX is not suitable for MathJax customization because there is no field for code on the plugin's setting panel.
Simple MathJax makes it easier to implement Lazy Typesetting.

How to add Lazy Typesetting functionality when using Simple MathJax

Load MathJax version 3.2

First, you need to load MathJax version 3.2 or later.

Select “3” in the MathJax major version on the setting. (See the following article for details)

How to use Simple MathJax, a WordPress plug-in for math formulas

Set up Lazy Typesetting on setting panel

Copy and paste the following code into the Custom MathJax config on the setting panel to implement Lazy Typesetting.

1
2
3

MathJax = {
  loader: {load: ['ui/lazy']}
};

However, you will not be able to use “$” as a delimiter for in-line formulas.

The countermeasure is introduced in another article.

How to check if Lazy Typesetting has been installed

If Lazy Typesetting is in place, when you scroll through a web page with lots of mathematical formulas, the mathematical formulas should appear with a momentary delay.

If it’s confusing, look at the source code in your browser.

In your browser (Edge or Chrome), open the page with the formula and press “Ctrl + U”.

If “‘ui/lazy’” is listed in the displayed source code, it has been installed.

MathJax had the drawback of being slow to load, but I think this drawback has been resolved with the Lazy Typesetting.
It makes me wonder why it wasn't included in the default settings for version 3.