数式をSVG化することで表示速度を12倍高速化した

以前、 Markdownをはてな記法にパースする - あおいろメモで、数式を含む記事をはてなブログに快適に投稿できる環境を整えましたが、課題がありました。

MathJaxがクソ重い

MathJaxはJavaScriptでクライアントサイドで本文中の TeX フォーマットを探して全部 SVG に置き換える処理をしています。(参考:サーバーサイド MathJax で数式表示を高速化する | tech - 氾濫原)。なので数式がたくさんある記事をスマホで開こうとするとJavaScriptがフリーズしてしまい見れたものではありませんでした。

f:id:SolKul:20210110231119p:image:w400 — スマホのPageSpeedスコア

これは1次元のトンネル効果の導出 - あおいろメモのPageSpeedスコアです。ひどいスコアです。自分が持っているスマホ(Galaxy S8)でも読み込みに90秒近くかかり、しかも読み込んだ後もスクロールがガクガクでとてもじゃないけど見れたものではありませんでした。

そこで、あらかじめTeX数式をSVG化してサイトに埋め込んでしまえば、高速化できるのではないかと考え、MarkdownをHTML化し、Markdown中のTeX数式はSVG化するdockerコンテナ群を作りました。

GitHub - SolKul/md_to_html: Convert Markdown to HTML and TeX to SVG

使い方

その1. コンテナを立ち上げます

$ docker-compose up -d

その2. converterコンテナでbashを起動します

$ docker-compose exec converter /bin/bash

その3. converterコンテナ内で main.py を実行します

$ python main.py

python_src内のSample.mdがSample.htmlに変換されます

実装

converter と、 node_svgという名前の２つのコンテナを使っています。

converterコンテナにはPython環境が乗っており、Markdown書式をHTMLに変換する自作モジュール、md_pareserを使って、TeX数式以外のMarkdownをHTMLに変換します。自作モジュール内では Python-Markdownというモジュールを使っています。TeX数式については次のnode_svgコンテナにpostで投げてSVGに変換してもらいます。

node_svgコンテナはnode.js環境が乗っており、TeX数式をSVGに変換します。mathjax-nodeモジュールを使っています。