Webfont入れるかで悩んでいたけど、ロゴやその他のデザインを考えると表示されてくれたほうが嬉しいなあと思ったので指定することにした。あとトプ画の乳首はクリックするとランダムな台詞が出るようになった
Google fontsのCSSはwoff2を小分けにして使うぶんだけロードするように工夫されているが、そのぶん容量も食う。30kbくらいだ。<link rel=preload>としてこのCSSを読み込む。その後defer指定したJSを用意してその中でload eventでrel=stylesheetとなるように設定する。ただし、localStrageに「そのような遅延ロードが一回でもあったか」を記憶しておき、次からはいきなりrel=stylesheetがDOMContentLoadedで有効になるようにしておく
この方法だったら2回めからちらつきは発生しなくなるし、CSSの読み込みはキャッシュからならそこそこ速いだろうから気にしなくて良いことになる。Font本体の読み込みは、どうせ発生するので気にしなくていい。遅延ロードによってPageSpeed Insightsも文句を言わない
あとはトプ画がてみの薄着メイド服で乳首がちょっと浮いててクリックしたくなったので、<map>と<area>をつかってclickできるようにしておいた。最初は順番に2つ、その後はランダムにいくつかの台詞をalertで返してくれるぞ。こういうしょうもない更新がしたかったのでひとまず満足