Beyond the 5.8MB Wall: NTM HQ 最速化への助走
Beyond the 5.8MB Wall
新しい拠点 The NTM (thentm.com) を作り直す過程でぶち当たった、あの 5.8MB の不毛な壁の話だ。
きっかけ:31KB だと思っていたら 5.8MB だった
ポータルを組み上げてプレビューを立ち上げた瞬間、妙に重かった。 キャラクターアイコンのプロパティを見て、原因が分かった。
- zash_normal_sd.png: 5,812 KB
31KB 程度に見えていたアセットの実体は、1024×1024 の巨大なビットマップだった。1枚で 5MB を超える画像を何枚も読み込ませたまま、報道ポータルの速さを求めていたことになる。
対応:WebP に変換する
速報性を掲げるメディアが、アセットの重さで読者を待たせるのは本末転倒だ。
そこで sharp(node_modules/sharp)を使い、全アイコンを WebP に変換した。
- 一括変換: 全表情差分を含む PNG を対象に、ロスレスと非可逆のバランスを取って WebP 化した。
- 結果: 5.8MB あったアイコンは 208KB まで縮んだ。削減率 96.4%。
まとめ:軽さは届け方の一部だ
ポータルは体感で明らかに軽くなった。これは単なる最適化ではなく、「情報の届け方」への最低限の配慮だと考えている。
ただし、この変換の直後に別の問題——透過されていない PNG——に直面することになる。
ZashStudio 技術監修
2026-04-03