GatsbyJS: KaTeXで肥大したHTMLを軽量化する

GatsbyJSで作ったサイトに対して、Bing WebマスターツールのSEOレポートが心当たりのない警告を出してきた。

HTML の評価サイズが 125 KB を超えるものと予想されるため、完全にキャッシュされない可能性があります。

全てのページでこの警告が出ている。しかしそんなことになるような膨大なコードを書いた覚えはない。

なんだなんだと調査したところ、数式を表示するために入れたgatsby-remark-katexというプラグインが原因だった。

gatsby-remark-katexの現状

概ねチュートリアル通り↓の感じで構築している。

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-katex`,
      ],
    },
  },
],

gatsby-browser.js

import "katex/dist/katex.min.css"

HTML肥大化の原因

gatsby-browser.jsで行っているkatex/dist/katex.min.cssのインポートが原因だった。

GatsbyJSはインポートしたCSSを全部まとめてギュッとして各htmlのヘッダーに埋め込むので、CSSが大きいとすべてのHTMLが肥大化する結果になってしまう。なのでKatexがどうこうというより、GatsbyJSの仕様上起こりやすい問題なのだろう。

通常のCSSならまぁ許容範囲内のサイズになると思うが、katex/dist/katex.min.cssはフォントを含んでいて極端にでかい。おおよそだがビルド後は130KBほどになっていた。Katextだけでアウトのサイズである。

外部ファイルならまだしも、すべてのHTMLに記述されているってのはなんともエコじゃない。どげんかせんといかん。

HTML・CSSの軽量化案

gatsby-browser.jsでのkatex/dist/katex.min.cssのインポートをやめて、CSSだけCDNを使うことにした。つまりnode_modulesのCSSは使わない。

.jsもCDNにしてもいいのだけど、レンダリングが遅くなりそうなのでcssだけで試してみる。html.jsにKatexのチュートリアル通りlinkを追加する。

html.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">

これでめでたく全htmlが130KBほど軽くなった。

もちろん同等のCSSをCDNで読み込んではいるわけだが、外部ファイルならキャッシュされるので全ページで取得はしないで済むはず。

デメリットとしてgatsby-remark-katexに更新があった場合、npm installしてもcssのバージョンは更新されないので注意が必要。

公式の使い方ではない自己責任モードだが、まぁプログラミングなんてもともと自己責任なので気にしない。

$E = mc^2$

今のところちゃんと表示できています。