Large Stackexchange math page rendered in SVGMath
What's this page about? ➤
This is another SVGMath demo page consisting of 611 math equations.
The content comes from this Math Stackexchange page but here I've processed it using SVGMath, rather than MathJax which the original Stackexchange site uses.
(I'm using this page since KaTeX uses it for their animation showing how much faster KaTeX is compared to MathJax, under the heading "Lightning-fast, even on pages with hundreds of expressions". SVGMath is even quicker.)
Comparison statistics
To make this page load quickly, I am using no javascript for processing of the final page. SVGs are pre-processed and cached, and delivered via <img> tags, which are lazy-loaded.
The result is a much leaner page, with a 91% reduction in DOM elements, a significantly better Lighthouse mobile performance score (52 with MathJax, 96 with SVGMath) and time to interactive (when the user can start to interact with the page) reduced from 11.1 seconds to just 1.5 seconds.
| MathJax | KaTeX | SVGMath | |
|---|---|---|---|
| No. DOM elements | 45,281 | 38,251 | 4,052 |
| Lighthouse score | 52 | 49 | 96 |
| Time to interactive | 11.1 s | 6.9 s | 1.5 s |
| File size (initial load) | 2,600 kB | 881 kB | 791 kB |
See also: another SVGMath Demo.
See: SVGMath Explanation and Stats for further details regarding that demo.
Full credit to the original response authors for their contributions.