201922100

このサイトのトップページは意図的に分割を行っていない。今のところトップページの HTML (+ CSS) のサイズは 100 KB/year (圧縮後) くらいで推移していて、サイズに限って言えば数年は分割しなくても問題ない。許容される Web ページのサイズも年々上昇していくので、一生書き続けたとしてもページ分割が必要ない可能性は高い。

残念ながらこの軽量さは日本語の Web フォントを読み込んでいる (HiDPI 端末のみ) ことで台無しになっている。他のサイトでも使われてキャッシュされていることを期待していたけれど、思ったほど使われていないらしい。特に初期は体感速度も非常に遅かった (私の携帯端末のプランは転送速度 200 Kb/s, 実効速度 100 Kb/s くらいである)。

ということで、ちまちまと細かな改善やちょっとしたハックを仕込んでいた。一段落したのでメモっておく。素晴らしきバッドノウハウ。

• ページの gzip 圧縮。
  • Netlify が勝手に行なってくれる。
• favicon の読み込み抑制。
  • 404 ページをダウンロードしてしまうため、意外に転送量がある。
  • How to prevent favicon.ico requests?
• Web フォント読み込み前の先行表示。
  • font-display: swap.
    • 最近 Google Fonts でもサポートされた。
    • Firefox では現状少しちらつく。
• Google Fonts CSS の非同期適用。
  • The Simplest Way to Load CSS Asynchronously
• audio 要素の先読み抑制。
  • <audio preload="none">.
• 画像の遅延読み込み。
  • Native lazy-loading for the web
    • Firefox も対応予定と書かれているサイトが多いけれど、 Bugzilla を見る限りまだ時間がかかりそう。
• 画像読み込み前後のレイアウト再計算を避ける。
  • 表示する大きさが px 指定で良ければ <img width=.. height=..> で問題ないけれど、サイズ可変の場合にはアスペクト比のみを直接指定する方法が今のところないので工夫が必要。
    • Attribute intrinsicsize
    • CSS aspect-ratio
  • How To - Aspect Ratio / Height Equal to Width
    • padding での % 指定が width 相対であることを利用したトリック。これでプレースホルダを作っておいて、 img 要素は position: absolute で配置。文章で書くとアレっぽいがやってみるとけっこうシンプル。
• <img srcset=.. sizes=..>.
  • Web の人からすると今更だろうけれど、先読みのためとはいえ辛くないかこの仕様…。

多くは属性を一つ追加する程度で対応できる。フォントのロードに関してはもっとできることがある —— サイト生成時にサブセットフォントを作るとか、 Google Fonts の CSS を JS で自力パーズしてロード、全部揃った時点で適用するとか —— けれど、まあ面倒すぎる。

しかしこれだけシンプルなページでこれなのだから、 Web デザインの人は大変だ…。