フォントの転送コストを圧縮するには

[hfu]

Mapbox GL JS で日本語注記の入った地図サイトを配信する場合、地図サイト起動時の転送コストのざっと4割くらいはフォントにとられる感じです。これにチャレンジするにはどうすればよいでしょうか。

[hfu]

gzip 圧縮送信の強制

ひとつには、多くのベクトルタイルサーバでベクトルタイルをそう扱っているのと同様、Content-Type レスポンスヘッダで gzip 圧縮を強制するという案があります。これをやると、転送量をかなり削減できるそうです。

フォント使用の遅延

これは、具体的にどのようにするかは検討する必要がありますが、フォントを読みに行く前に、フォントを必要としないデータの描画を済ませることで、フォント転送待ちが気にならないようにするということです。

ブラウザがよくなるのを待つ

例えば、しっかりキャッシュしてもらうための仕組みが整うのを待つ、ということですね。さらに、現在手に入るキャッシュコントロール技術をしっかり使っているか、というのもチェックしてみる価値があるかもしれません。

クリティカルレンダリングパスを意識して実装する

無駄な地図のレンダリングをしないように、 クリティカルレンダリングパスを意識して実装することも有効だと思われます。

フォントデータをいじる

フォントの分けかたを細かくするだとか、本当に使うデータだけ詰め込むだとかも論理的に考えられます。ただし、これをやると言語依存・データ依存が発生してしまいそうなので、なるべく避けたほうがよさそうですね。

[tattii]

Mapbox GL JSでも日本語/中国語のフォントのダウンロードのコストについて議論されています。
mapbox/mapbox-gl-js#3466

解決方法の1つが、ローカルにあるフォントを使用することです。
localIdeographFontFamilyを設定できるよう実装されています。
https://www.mapbox.com/mapbox-gl-js/example/local-ideographs/

[hfu]

@tattii
やってみました！できたような気がします。これは、ありがたいです。
https://hfu.github.io/ideo/#16.82/34.710299/135.51049

[hfu]

フォント設定を調整してみました。詳細は #12 をご覧ください。
https://hfu.github.io/ideo/universal.html#16.63/35.617835/139.777232