We are a heavy-equations site and we are facing a dilemma regarding to them. Right now, we are writing the equations in mathml and using mathjax (js library) to transform the math tags into HTML+CSS. This is done in the client browser.
MathJax is a heavy library, and it takes some time to process all the equations in a page. I thought it might be worth investing some time and effort to use the server for that process and send the user the final HTML+CSS version. Right now we have really good google organic positions, but I thought we may improve it if we speed up the page load time (in navigator)
I managed to do the rendering in the server side, but I’m not sure it worthwhile, so I hope you can help me to take a decision. The problem with the HTML+CSS version is that each of the equations requires much more mark-up and it is full of style tags. It seems page speed insight doesn’t like, as it throws a “Prioritize visible content” warn. The warn (“Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content”), is present in the mathjax version as well, but as ‘consider fixing’ instead of ‘Should fix’. Actually, the “Speed score” for mobile is 81 (mathjax version) VS 72 (HTML+CSS version).
There is even a third option, which consist in serve the math as SVG. This option has the best score, according to page speed insights (87/100), and it doesn’t throw the ‘prioritize visible content’ warn (thought the page hasn’t change any other thing). What makes me distrust of this option is the size of SVG equations mark-up: for a regular size equation, the mark-up is around 45% bigger than the HTML mark-up…
So, summing up, we have three option, each of them with advantages + disadvantages:
- The mathjax option probably has the smallest mark-up size, but the biggest navigator load time.
- According to page speed insights SVG is the best option, but has the biggest mark-up size.
- HTML-CSS mark-up is smaller than SVG (of course, bigger than mathjax option), but according to page speed insight, is the worst option...
What do you think is the best option from a SEO perspective? Do you know any other tools we could use to measure other variables page speed doesn't get? How could we measure navigator load time?