どれぐらい速くなったか自信は無いですが一応速くするためにちょっと細工をしてみました。
ページの遷移を動的にしたり画像の遅延読み込みを組み込んでみました。
ページの動的遷移はfetchを使いページ全体を読み込んでから必要な部分を切り出して現在のページに挿げ替えると言う感じです。それに伴いpushStateで履歴操作が必要になりpopStateイベントで履歴処理の自前実装が必要になったりと効果の割にはいろいろと面倒ごとが増えます。
ページロードで実行される前提のスクリプトを動的遷移の度に明示的に実行したりしないといけませんし。
Twitterのwidget.jsがそうなんですが、常に<head>内で追加していたのをTwitterの埋め込みを発見すると追加するように修正し、ページのロード毎にtwttr.widgets.loadを実行するようにしました。またasync付きでも動作するようになっていたのでasync付きにしました。元々のasync無しのだとレンダリングブロックが結構大きかったらしくページの表示が速くなりました。
画像の遅延読み込みはよくあるライブラリとは違い消極的な物です。DOMが構築された後にまだ画像サイズが判明していない物をキャンセルしてその要素が画面内に入ったらロードをするという物で、その時点で画像サイズを判別できるまで読み込んでいたらそのまま読み込みを続けます。
この「画面内に要素が入ったら」と言う判別のために以前はscrollやresizeイベント時に要素の座標から判別したりしていたんですが今はIntersectionObserverを使うだけで良くなったので随分楽になりました。
全体的に速くはなったと思うんですが、一方で履歴に関しては元々のブラウザキャッシュの方が速いです。replaceStateしたらその時点のページをキャッシュしてpopState時にキャッシュの有無で動作変更…なんてできるようにならないですかね。現状だとスクロール位置の復元すら当てにならないですし…
これ以上はコードで語ります。
Font AwesomeをWebfont Generator - Font Squirrelで使うアイコンのみに削りました。