`org-mode` 製ブログの改良 (9): 最適化、リンクカード他

Jun 17, 2026

背景

前回の投稿でサムネイルを表示し、重くなったブログを高速化しました。概ね AI エージェントがやってくれました。

しかも積んでいたタスクが一気に片付けられてしまいました。 AI の偉大な進捗をメモしておきます。

最適化

Lighthouse

まず Justfile から Lighthouse を起動できるようにしました。 Accessibility 等は静的サイトのため 100 点でしたが、パフォーマンスが 60 点ほどに低下していました。改善して行きます。

ファイルサイズの削減

WebP 変換

画像を webp に変換しました。これだけで 50% 以下に容量を削減できました。

サムネイルは最初の一枚のみを即座に読み込み、他の画像は遅延することにしました。このため LCP (Largest Contentful Paint) が素早くなります。 Lighthouse の評価をハックしている感はありますが、実際にユーザ体験も良くなれば幸いです。

CSS の最小化

esbuild で CSS を最小化しました。ベンチマーク上は、意外と効いているらしいです……？

Post processing

MathJax → KaTeX

MathJax は JS 1 つで動いてくれるのが魅力ですが、 SVG 出力が静的生成に不利です。 KaTeX の出力は HTML であり、 CSS とフォントで描画できます。

Prism.js

Prism.js を事前実行しました。これで Prism.js の豊富な機能を利用しつつも、ランタイムコストはゼロ (CSS のみ) になりました。

HTML の加工スクリプトでは、概ね linkedom でパースしています。 coderef が絡むコードブロックは linkedom でパースできなかったため、 happy-dom でパースしました。

Listing 1: coderef とは？

const itIs = this; // 1

1: これが coderef です

Optional な JS/CSS の検出

テンプレート処理中で、特定の要素に応じて <link> タグを設定するように変更しました。たとえば $\LaTeX$ と書けば、 org-mode は以下の math fragment に展開します:

\(\LaTeX\)

ビルドスクリプト中で \(, \[, \begin といった math fragment を検出した場合に、 $\KaTeX$ フォントおよび CSS に <link> します。また math fragment は HTML に変換されます:

<span class="katex">
  <span class="katex-mathml">...</span>
  <span class="katex-html" aria-hidden="true">...</span>
</span>

機能追加

`#+DRAFT` 記事

記事の FILETAG に #+DRAFT: t を書くと、ローカルビルド以外からは除外されます:

#+TITLE: =org-mode= 製ブログの改良 (9): 最適化
#+DATE: <2026-06-15 Mon>
+#+DRAFT: t

`favicon.ico`

devtool や Lighthouse にも指摘されていた favicon.ico を設定しました。ブラウザタブでの視認性が良くなったと思います。

Figure 2: ブラウザタブにおける favicon.ico

ヘッダ

元は Simple.css の慣例通り、ヘッダ内にタイトルを入れていました:

Sticky header の方が操作性が良いため、レイアウトを変更しました:

タイトルの感じは続くといいな日記を参考にしました。『記事』っぽくて良いのではないでしょうか。

リンクカードの展開

Custom link type として card を追加しました:

[[card:https://toyboot4e.github.io]]

上記は build.el の :export ハンドラによって、以下のプレースホルダ <a> タグに展開します:

<a class="link-card" href="https://toyboot4e.github.io" data-link-card>https://toyboot4e.github.io</a>

postprocess.ts が OGP 情報を使って、リンクカードへ展開します:

<a class="link-card" href="https://toyboot4e.github.io" target="_blank" rel="noopener">
  <span class="link-card-text">
    <span class="link-card-title">Toybeam</span>
    <span class="link-card-desc">Devlog of toyboot4e</span>
    <span class="link-card-site">
      <img class="link-card-favicon" src="data:image/svg+xml,..." alt="" width="16" height="16" />
      Toybeam
    </span>
  </span>
</a>

以下、例です:

ToybeamDevlog of toyboot4eToybeam

ライトテーマの設定背景ダークテーマを使い始めて n 年、目に良いとされるライトテーマも設定してみました。設定内容テキストエディタ (Emacs + tmux) 配色は 12 年前に定義された dichromacy-theme をベースに、 AI が調整してくれました: Figure 1: Co…Toybeam

GitHub - toyboot4e/toyboot4e.github.io: My devlog generated with `org-publish` and custom functionsMy devlog generated with `org-publish` and custom functions - toyboot4e/toyboot4e.github.ioGitHub

Nani翻訳の技術的な話Zenn

GitHub のインラインリンクも実装してくれました:

build.el:L923-L925toyboot4e/toyboot4e.github.io @ c0b6bea

(defun my-org-html-publish-to-html (plist filename pub-dir)
  "Publish an org file to HTML, using the FILENAME as the output directory.
Skips `#+DRAFT:'-flagged files unless this is a `--draft' build."

まとめ

片手間に AI と会話するだけで完成してしまいました。今となっては、 org-mode でブログ生成しているのは正攻法とさえ言えるかもしれません。

けっこう『ちゃんとした』ブログに見えてきましたね。コミット内容は未確認ですから、後ほど確認して行きます……!!

org-mode 製ブログの改良 (9): 最適化、リンクカード他

`org-mode` 製ブログの改良 (9): 最適化、リンクカード他