Web表示が遅くなると言われるMathJaxについて、高速化の手助けとなる遅延組版（Lazy Typesetting）を設定する方法を紹介します。

この記事で紹介する方法は、WordPressのプラグインを使ってMathJaxを読み込んでいることを前提にしています。

1. 遅延組版（Lazy Typesetting）とは？

遅延組版とは、Webページを読み込んだ際に、ページ内のすべての数式を一括で変換処理せず、画面に表示されている部分だけを処理することです。

MathJaxは、LaTeXの記法で書いたコードをWeb用の数式に変換する処理に時間が掛かかるため、数式が多いページの場合、すべての処理が完了するまで閲覧者は待つはめになります。

遅延組版（Lazy Typesetting）により、画面表示部分だけを処理することで、閲覧者の待機時間を短くすることができます。

MathJaxバージョン3.2で、この機能が実装されました。

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

このため、バージョン2.x.xや、バージョン3.0、3.1では、遅延組版は利用できません。

バージョン２からバージョン３にしただけでも読み込みが十分速くなりますが、遅延組版を設定するとより一層高速化します。

2. プラグイン「MathJax-LaTeX」に遅延組版の機能を追加する方法

2-1. 準備

まずは、バージョン3.2以降のMathJaxを読み込みます。

下記の記事で「最新バージョン（バージョン３）を読み込む方法」を紹介していますので、参考にしてください。

WordPressで数式を書くプラグイン「MathJax-LaTeX」の使い方

WordPressで数式を書くプラグイン「MathJax-LaTeX」の使い方

この記事では、WordPressの投稿内で数式を書くためのプラグイン「MathJax-LaTex」の使い方を紹介します。バージョン３を読み込む方法とショートコードを使うときのコツも紹介します。

sj-note

なお、MathJax-LaTeXは有効インストール数の多い人気のプラグインですが、カスタマイズ用のコードを追加する欄がありません。

このため、プラグイン上での設定でなく「アクションフックによる設定」と「カスタムHTMLブロックによる設定」を紹介します。

2-2. アクションフックによる設定

  1. WordPressの管理画面メニュー「外観」の中の「テーマエディター」をクリックします。
  2. 右側に表示されたファイルリストのから「function.php」を選択します。
  3. function.phpに下記のコードをコピペすれば、遅延組版が実装されます。
1
2
3
4
5
6
function mathjaxlazy_add(){
	echo <<< EOM
	<script>MathJax = {loader: {load: ['ui/lazy']}};</script>
EOM;
}
add_action('wp_head', 'mathjaxlazy_add');

バックアップをとってから試してみてください。

また、子テーマを作成していない方や、WordPress初心者の方には下記の「カスタムHTMLブロックによる設定」をお勧めします。

2-3. カスタムHTMLブロックによる設定

  1. 投稿編集時にカスタムHTMLブロックをどこかに追加します。
  2. 追加したカスタムHTMLブロックに下記のコードをコピペすれば、遅延組版を実装できます。
1
2
3
4
5
<script>
MathJax = {
  loader: {load: ['ui/lazy']}
};
</script>

ただし、カスタムHTMLブロックは、各投稿に追加する必要があります。

MathJax-LaTeXは、プラグインの設定画面上にコードを記載する欄がないので、MathJaxのカスタマイズには向いていないと言えます。
Simple MathJaxであれば、より簡単に遅延組版を実装できます。

3. プラグイン「Simple Mathjax」に遅延組版の機能を追加する方法

3-1. 準備

まずは、バージョン3.2以降のMathJaxを読み込みます。

設定画面のMathJax major versionで「３」を選択してください。（詳しくは下記の記事を参照）

WordPressで数式を書くプラグイン「Simple MathJax」の使い方

WordPressで数式を書くプラグイン「Simple MathJax」の使い方

この記事では、WordPressの投稿内で数式を書くためのプラグイン「Simple MathJax」の使い方を紹介します。

sj-note

3-2. やり方

設定画面のCustom MathJax configに下記のコードを追記するだけで、遅延組版が実装されます。

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

ただし、行内数式の区切り文字としての「$」が使えなくなってしまいます。

この対策は別の記事で紹介しています。

4. 遅延組版が導入できたのか確認する方法

遅延組版が導入できていれば、数式をたくさん書いたWebページをスクロールすると、数式部分が一瞬遅れて表示されるはずです。

分かりにくい場合は、ブラウザでソースコードを見てみましょう。

ブラウザ（EdgeまたはChrome）で、数式を記載したページを開き、「Ctrl + U」を押します。

表示されたソースコードの中に「’ui/lazy’」が記載されていれば、導入できています。

MathJaxは、読み込みが遅いのが欠点でしたが、この遅延組版（Lazy Typesetting）で、欠点が解消されたと思います。
なぜ、バージョン３の初期設定に組み込まれていないのか不思議に思うほどです。