複数のファイルを並行に取得して読込速度を改善する - Qiita

はじめに <link rel="preload"> を使用することでブラウザに対して早期にファイル取得を促し、読込時間を短縮させることができます。 preload preloadは、ブラウザのレンダリング機構が起動するよりも早く、ファイルの読込を開始させたい場合に使用します。 改善前 開発者ツールのNetworkからファイルを読み込むタイミングを確認します。 cssファイルが取得＆読み込まれた後に画像(webp)、Googleフォント(font)が取得されていることがわかります。 画像とフォントをcssファイルやjsファイルなどと並行して読み込むことができれば、ページの読込速度の改善が見込めそうです。 実装を見ると背景画像とフォントはcssファイルの中で読み込んでいます。