これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。
JavaScriptの非同期読み込み
全然気にしたことなかったのですが…HTMLを読み込む際に、JavaScriptを読み込むscriptタグがあると、それを実行し終わるまでHTMLの解析を中断すると。理由はdocument.write()らしい。それがないのであれば無視して良いので、非同期読み込みにしてしまってHTMLの解析を中断しないようにしてしまって良いらしい。そのために属性を指定する。
defer属性はDOMツリー構築後にscriptタグを上から順に実行することを保証する。よくあるjQueryなどのライブラリを先に読み込んでから他のJSを実行したい、ときなど。
async属性はもうダウンロードしてすぐ実行。webpackとか使っててファイル間の依存関係ないのであればこれでいいはず。なるほどここらへんは指定しておいてあげたほうがパフォーマンス良さそう…
画像の遅延読み込み
imgタグのloading属性。lazyを指定するとviewportに入ってから読み込むらしい。既定値はeagerでなんにせよすぐ読み込む、という指定。Mozillaの見るとIEとSafariでは効かなさそうな設定。
こういうライブラリでIntersection-Observerとの併用で実現できそう。
CSSの非同期読み込み
CSSも普通に読み込むとJSと同じくHTMLの解析を中断するらしい。
でも元記事の阿部寛対抗のやつでは、どっちかというと非同期読み込みを利用してなるべく早くloadを始めさせて、結局preloadじゃない方法であとの方で読み込む、つまり2重で読み込み指定する？感じでなるべく読み込みにかかる時間を減らしている感じがある。headタグの一番最初にpreloadとりあえずしておく、と…？
でも非同期読み込みさせすぎると、ネットワークは逼迫してしまう危険性あるのかな。ユーザー側のネットワークは同じなので、レンダリングの邪魔はしないけど読み込みきれないでレンダリング始まって表示に影響出る、とかはあるのかな。そう考えるとまあ順序として標準でそうなるのは正しいのか…
あとWebフォントとかの容量が重いから結局そこで全てが決まる感じもなくはなさそう…
とりあえずちょっと詳しくなれたので良し。
