I just checked my home page [1] and it has a compressed transfer size of 7.0 kB.
/ 2.7 kB
main.css 2.5 kB
favicon.png 1.8 kB
-------------------
Total 7.0 kB
katex.min.css 23.6 kB
katex.min.js 277.0 kB
auto-render.min.js 3.7 kB
KaTeX_Main-Regular.woff2 26.5 kB
KaTeX_Main-Italic.woff2 16.7 kB
----------------------------------
Total Additional 347.5 kB
> That said, I do use KaTeX with client-side rendering on a limited number of pages that have mathematical content
You could try replacing KaTeX with MathML: https://w3c.github.io/mathml-core/
> You could try replacing KaTeX with MathML: https://w3c.github.io/mathml-core/
I would love to use MathML, not directly, but automatically generated from LaTeX, since I find LaTeX much easier to work with than MathML. I mean, while I am writing a mathematical post, I'd much rather write LaTeX (which is almost muscle memory for me), than write MathML (which often tends to get deeply nested and tedious to write). However, the last time I checked, the rendering quality of MathML was quite uneven across browsers, both in terms of aesthetics as well as in terms of accuracy.
For example, if you check the default demo at https://mk12.github.io/web-math-demo/ you'd notice that the contour integral sign has a much larger circle in the MathML rendering (with most default browser fonts) which is quite inconsistent with how contour integrals actually appear in print.
Even if I decide to fix the above problem by loading custom web fonts, there are numerous other edge cases (spacing within subscripts, sizing within subscripts within subscripts, etc.) that need fixing in MathML. At that point, I might as well use full KaTeX. A viable alternative is to have KaTeX or MathJaX generate the HTML and CSS on server-side and send that to the client and that's what I meant by server-side rendering in my earlier comment.
Math expressions are like regex to me nowadays. I ask the llm coding assistant to write it and it’s very very good at it. I’ll probably forget the syntax soon but no big deal.
“MathML for {very rough textual form of the equation}” seems to give a 100% hit rate for me. Even when i want some formatting change i can ask the llm and that pretty much always has a solution (mathml can render symbols and subscripts in numerous ways but the syntax is deep). It’ll even add the css needed to change it up in some way if asked.
Katex renders to MathML (either server side or client side). Generally people want a slightly more fluent way of describing an equation than is permitted by a soup of html tags. The various tex dialects (generally just referred to as latex) are the preferred methods of doing that.
Server side rendering would cut out the 277kb library. The additional MathML being sent to the client is probably going to be a fraction of that.
If you want to test out some examples from your website to see how they'd look in KaTeX vs. browser MathML rendering, I made a tool for that here: https://mk12.github.io/web-math-demo/
Nice tool! Seems "New Computer Modern" font is the Native MathML rendering that looks closest like standard LaTeX rendering, I guess cause LaTeX uses Computer Modern by default. But I notice extra space around the parenthesis, which annoys me because LaTeX math allows you to be so precise about how wide your spaces (e.g. \, \: \; \!). Is there a way to get the spaces around the parenthesis to be just as wide as standard LaTeX math? And the ^ hat above f(x) isn't nicely above just the top part of the f.
Assuming you’re seeing the same issue as me: I find the parenthesis spacing is messed up whenever there are unnecessary \left and \right, as there are in some of the samples, which leads to an extra <mrow> in the MathML. If you only use those when they really need to stretch, then it looks much better.
Thanks, the special \left and \right parenthesis were indeed the culprit.
I never understood math / latex display via client side js.
Why can't this be precomputed into html and css?
> I never understood math / latex display via client side js. Why can't this be precomputed into html and css?
It can be. But like I mentioned earlier, my personal website is a hobby project I've been running since my university days. It's built with Common Lisp (CL), which is part of the fun for me. It's not just about the end result, but also about enjoying the process.
While precomputing HTML and CSS is definitely a viable approach, I've been reluctant to introduce Node or other tooling outside the CL ecosystem into this project. I wouldn't have hesitated to add this extra tooling on any other project, but here I do. I like to keep the stack simple here, since this website is not just a utility; it is also my small creative playground, and I want to enjoy whatever I do here.
Perhaps you could stand up a small service on another host using headless chrome or similar to render, and fall back to client side if the service is down and you don’t already have the pre rendered result stored somewhere. I suggest this only because you mentioned not wanting to pollute your current server environment, and I enjoy seeing these kind of optimizations done :^)
What you are suggesting is adding massive complexity.
Is it safe to say the website is your passion project?
It’s a bit more work, usually you’re going to have to install Node, Babel and some other tooling, and spend some time learning to use them if you’re not already familiar with them.
For rendering math to HTML+CSS or SVGs, you can just use Node.js and MathJax. I'm not sure why you'd want Babel.
(You can probably use KaTeX, too, but I prefer the look of MathJax's output.)
Well there is mathml but it has poor support in chrome til recently. That is the website native equations formatting.
I usually prefer compiling it to HTML or SVGs, but sometimes, if you have a lot of math on your page, bundling MathJax can take up less space. (Not sure if that'd still be true after compression.)
- [deleted]
Not trying to discourage you from adopting better solutions, but the delayed client-side rendering of a dynamic component like a Latex expression is almost (or sometimes literally) imperceptible to the averge user.
There is such a thing as over-optimization. All this SEO-driven performance chasing is really only worthwhile if the thing you're building is getting click-through-traffic in the millions of views.
It's a bit like worrying about the aerodynamics of a rowboat when you're the only one in it, and you're lost at sea, and you've got to fish for food and make sure the boat doesn't spring any leaks.
Yes, in the abstract, it's a worthwhile pursuit. But when you factor in the ratio of resources required vs gain recieved, it is hardly ever a wise choice of how to use your energy.
Humans aren’t robots. If it’s interesting, fun and inspiration comes freely then it often makes sense to pursue. Even to only have something to talk about, to learn, to teach.
Yes obviously there are still reasons to do something like this even if its an inefficient use of time/resources... See the first line of my comment.
Another idea maybe would be to load the heavy library after the initial page is done. But it's loaded and heavy nonetheless. Or you could create svgs for the formulas and load them when they are in the viewport. Just my 2 cents