Beyond the 5.8MB Wall: NTM HQ 最速化への助走

  • #Optimization
  • #WebP
  • #Performance
  • #NTM
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 に変換する

速報性を掲げるメディアが、アセットの重さで読者を待たせるのは本末転倒だ。 そこで sharpnode_modules/sharp)を使い、全アイコンを WebP に変換した。

  1. 一括変換: 全表情差分を含む PNG を対象に、ロスレスと非可逆のバランスを取って WebP 化した。
  2. 結果: 5.8MB あったアイコンは 208KB まで縮んだ。削減率 96.4%

まとめ:軽さは届け方の一部だ

ポータルは体感で明らかに軽くなった。これは単なる最適化ではなく、「情報の届け方」への最低限の配慮だと考えている。

ただし、この変換の直後に別の問題——透過されていない PNG——に直面することになる。


ZashStudio 技術監修
2026-04-03