5 ms·

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 ----------

by susam 1y ago

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 Not bad, I think! I generate the blog listing on the home page (as well as the rest of my website) with my own static site generator, written in Common Lisp [2]. On a limited number of mathematical posts [3], I use KaTeX with client-side rendering. On such pages, KaTeX adds a whopping 347.5 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 Perhaps I should consider KaTeX server-side rendering someday! This has been a little passion project of mine since my university dorm room days. All of the HTML content, the common HTML template (for a consistent layout across pages), and the CSS are entirely handwritten. Also, I tend to be conservative about what I include on each page, which helps keep them small. [1] https://susam.net/ https://susam.net/ [2] https://github.com/susam/susam.net/blob/main/site.lisp https://github.com/susam/susam.net/blob/main/site.lisp [3] https://susam.net/tag/mathematics.html https://susam.net/tag/mathematics.html

welpo 1y ago
> 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/ https://w3c.github.io/mathml-core/
- BlackFly 1y ago
  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.
  - mr_toad 1y ago
    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.
- mk12 1y ago
  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/ https://mk12.github.io/web-math-demo/
  - em3rgent0rdr 1y ago
    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.
    - mk12 1y ago
      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.
      - em3rgent0rdr 1y ago
        Thanks, the special \left and \right parenthesis were indeed the culprit.
- susam 1y ago
  > You could try replacing KaTeX with MathML: https://w3c.github.io/mathml-core/ 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/ 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.
  - AnotherGoodName 1y ago
    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.
VanTodi 1y ago
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
djoldman 1y ago
I never understood math / latex display via client side js. Why can't this be precomputed into html and css?
- creata 1y ago
  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.)
- mr_toad 1y ago
  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.
  - creata 1y ago
    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.)
- susam 1y ago
  > 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.
  - dfc 1y ago
    Is it safe to say the website is your passion project?
popalchemist 1y ago
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.
- hmmokidk 1y ago
  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.
  - popalchemist 1y ago
    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.

by susam 1y ago

welpo 1y ago

> 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/ https://w3c.github.io/mathml-core/

BlackFly 1y ago
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.
- mr_toad 1y ago
  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.
mk12 1y ago
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/ https://mk12.github.io/web-math-demo/
- em3rgent0rdr 1y ago
  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.
  - mk12 1y ago
    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.
    - em3rgent0rdr 1y ago
      Thanks, the special \left and \right parenthesis were indeed the culprit.
susam 1y ago
> You could try replacing KaTeX with MathML: https://w3c.github.io/mathml-core/ 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/ 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.
- AnotherGoodName 1y ago
  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.

VanTodi 1y ago

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

djoldman 1y ago

I never understood math / latex display via client side js. Why can't this be precomputed into html and css?

creata 1y ago
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.)
mr_toad 1y ago
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.
- creata 1y ago
  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.)
susam 1y ago
> 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.
- dfc 1y ago
  Is it safe to say the website is your passion project?

popalchemist 1y ago

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.

hmmokidk 1y ago
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.
- popalchemist 1y ago
  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.