モチベーション
Electronアプリの起動が遅いときの処方箋です。Electronアプリの起動時間が遅く、次のような挙動でした。
- Electronアプリを起動すると、ウィンドウは直ぐに表示される。
- しかし、ウィンドウ内部のHTMLの表示が遅い。
- Electronのイベントでいえば
webContents.once('did-finish-load, ...')の発火が遅い。
HTMLのロードが遅い原因として、Google fontを使っていたことが原因でした。しかし、あくまで体感ですが、Google fontはElectronであってもキャッシュされているような挙動をします。
で結局ボトルネックはどこで、どう解決するかという話です。
Google Fontの読み込み
Googleフォントを利用する場合、私の場合はCSS上で読み込みを行っていたので、次のように書いていました。
@importurl('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の読み込みは
- css2ファイルの読み込み
- フォントデータの読み込み
の順で二段階のファイル読み込みが発生します。そして、後者はキャッシュされますが、前者はキャッシュされていないようです（あくまで体感です）。
つまり、ボトルネックは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');
*/@importurl('./imp_NotoSerifJP.css2');body{font-family:"Noto Serif JP",serif;}こうすることで、ローカルからcss2ファイルが読み込まれるようになり、読み込み速度が改善します。
まとめ
Google fontの読み込みではcss2ファイルとfontデータの二段階になっており、後者はキャッシュが効きますが、前者が速度的なボトルネックになることがあります。前者のcss2ファイルをローカルに持たせることで、Electronアプリの起動速度を改善できました。
私の作っているアプリでは、1秒以上かかっていた起動時間がかなり改善されました。