Googleは、ページスピードインサイトという速度評価ツールを提供しているように、表示速度を非常に重要視しています。理由は、WEB閲覧者の大半がスマホユーザーになったためです。
表示速度は何秒が目安ですか？
ファーストビュー（Above the fold）の表示は、3G回線で1秒以内。遅くとも3秒以内にするべきですと、googleは述べています。
読み込みに 3 秒以上かかるページからは 53%のモバイルサイト訪問者が離れています。
https://developers-jp.googleblog.com/2017/03/new-industry-benchmarks-for-mobile-page-speed.html
ページの読み込みに1秒以上かかると、ユーザーが離脱します。最高のエクスペリエンスを提供し、訪問者の関心を維持するために、ガイドラインでは、バックグラウンドでページの残りの部分が読み込まれ、レンダリングされている間、Above the foldのコンテンツの表示を1秒（またはそれ以下！）で表示することに重点を置いています。
https://developers.google.com/search/blog/2013/08/making-smartphone-sites-load-fast
- Above the fold は1秒以下で表示
- 読み込みに 3 秒以上かかるページは 53% が離脱する
- 回線速度は、3G（1～3Mbps）を想定
- スクロールするのは23％のみ。77％はスクロールしない。
高速表示を実現するにはどうしたらいいですか？
- サーバーレスポンスを200ミリ秒未満でを返す
- リダイレクトの回数を最小限に押さえる
- Above the foldの描画に必要なラウンドトリップの数を最小限に抑える
- Above the foldの描画に必要な画像容量を最小限に抑える
- Above the foldでjavascript、CSSのみインラインで記述する
- キャッシュポリシーを定義し、キャッシュを利用する
画像はレイジーロード
まず、画像については、ファーストビューに表示する画像とそれ以外の画像で分けて考えるべきです。ファーストビューに表示する画像はできるだけ軽量化させ、ファーストビューに表示しない画像は、レイジーロード（遅延読み込み）で読み込ませることが必須になります。
javascript、CSSは非同期にする
javascriptやCSS読み込みを<head></head>に<script src="URL">や<link rel="stylesheet" href="URL">で記述すると、読み込みが終わるまで画面描写が停止してしまう状態になります。このような読み込み方法を同期ロードと呼びますが、同期ロードが不要にもかかわらず、すべて同期で読み込んでしまっている人が多いのです。
例えば、次の画像は、「SUIT SELECT」のモバイルサイトの読み込みをchromeでシミュレーションした結果です。chromeブラウザでサイトを開いて「F12」を押して、「Network」という項目を選択してください。写真の①のようにキャッシュを無効化して、できるだけ低速回線（今回は1Mbps）を選択します。写真の②では、スクリーンショットを表示するようにチェックをいれます。
結果は1Mbpsだと、10.12秒まで画面は真っ白な状態になります。その後もなかなかファーストビューが表示されないのがお判りいただけます。
ファーストビューをできるだけ早く表示するには、ファーストビューで利用するjavascript/CSSだけをインライン化して記述する方法が有効となります。それ以外のファーストビューで利用しないjavascript/CSSはバックグラウンドでロードする方法をとりましょう（非同期ロード）。
javascriptを非同期で読み込むには、async/await、コールバック、Promiseの3つの方法があります。CSSを非同期で読み込むには、rel=preloadを利用するか、onload="this.media='all'"を利用する方法があります。
