Electronアプリの起動を高速にするGoogleFontの読み込み改善テク

モチベーション

Electronアプリの起動が遅いときの処方箋です。Electronアプリの起動時間が遅く、次のような挙動でした。

• Electronアプリを起動すると、ウィンドウは直ぐに表示される。
• しかし、ウィンドウ内部のHTMLの表示が遅い。
• ElectronのイベントでいえばwebContents.once('did-finish-load, ...')の発火が遅い。

HTMLのロードが遅い原因として、Google fontを使っていたことが原因でした。しかし、あくまで体感ですが、Google fontはElectronであってもキャッシュされているような挙動をします。

ElectronでのWebフォントのキャッシュについて

で結局ボトルネックはどこで、どう解決するかという話です。

Google Fontの読み込み

Googleフォントを利用する場合、私の場合はCSS上で読み込みを行っていたので、次のように書いていました。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

body{
font-family: "Noto Serif JP",serif;
}

その他にはlinkタグでHTMLのヘッダーに記述する方法もありますね。

しかしどちらにせよ、**最初に読み込むのはfontではなく、 https://fonts.googleapis.com/css2 というファイル (以下css2ファイル)**ということです。

css2ファイルの中身は、次のようになっています。

/* [0] */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif JP'), local('NotoSerifJP-Regular'), url(https://fonts.gstatic.com/s/notoserifjp/v7/xn7mYHs72GKoTvER4Gn3b5eMXNvMckQlPa61uNKcCqOfbtLXoH3502Rk.0.woff2) format('woff2');
  unicode-range: U+25e56, U+25e62, U+25e65, U+25ec2, U+25ed8, U+25ee8, U+25f23, U+25f5c, U+25fd4,
 ...(略)...,
 U+2f9d0, U+2f9de-2f9df, U+2f9f4;
}
/* [1] */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif JP'), local('NotoSerifJP-Regular'), url(https://fonts.gstatic.com/s/notoserifjp/v7/xn7mYHs72GKoTvER4Gn3b5eMXNvMckQlPa61uNKcCqOfbtLXoH3502Rk.1.woff2) format('woff2');
  unicode-range: U+1f230-1f23a, U+1f240-1f248, U+1f250-1f251, U+2000b, U+20089-2008a, U+200a2, U+200a4, U+200b0, U+200f5, U+20158, U+201a2, U+20213, U+2032b, U+20371, U+20381,
 ...(略)...,
 U+25c4b, U+25c64, U+25da1, U+25e2e;
}
/* [2] */
@font-face {
...(略)...

このようにcss2ファイルの中身は、@font-faceの束になっています。

つまり、Google fontの読み込みは

1. css2ファイルの読み込み
2. フォントデータの読み込み

の順で二段階のファイル読み込みが発生します。そして、後者はキャッシュされますが、前者はキャッシュされていないようです（あくまで体感です）。

つまり、ボトルネックはcss2ファイルの読み込み速度でした。

処方箋

さて、あらためて、フォントデータの方はキャッシュされるとして、css2の読み込みを改善させる必要があります。どうするかといえば、css2ファイルをローカルに持つということです。

まず、googleフォントの@importやlinkに記述するURLを適当なブラウザのURL欄に入力してアクセスします。

するとcss2の中身がテキストで表示されます。この内容を全て選択してコピーし、適当なテキストエディタで張り付けしてローカルに保存しましょう。ここでは仮に保存名はimp_NotoSerifJP.css2としておきます。

次に、HTML上で読み込むCSSの中身を、最初の例から次のように変更します

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
*/

@import url('./imp_NotoSerifJP.css2');

body{
font-family: "Noto Serif JP",serif;
}

こうすることで、ローカルからcss2ファイルが読み込まれるようになり、読み込み速度が改善します。

まとめ

Google fontの読み込みではcss2ファイルとfontデータの二段階になっており、後者はキャッシュが効きますが、前者が速度的なボトルネックになることがあります。前者のcss2ファイルをローカルに持たせることで、Electronアプリの起動速度を改善できました。

私の作っているアプリでは、1秒以上かかっていた起動時間がかなり改善されました。