サイト高速化のために普段していることをまとめます。
しっかり対策することにより、PageSpeed InsightsやLighthouseでの得点も高得点を狙えると思います。

#preconnect dns-prefetch属性
まずpreconnect dns-prefetch属性で該当するものをhead内に指定します。

###考えられる使用例
・Webフォント　(googleフォント､Adobeフォント　等)
・SNS　(Twitter､Facebook　等)
・解析　(googleアナリティクス　等)
・広告　(Googleアドセンス　等)

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="preconnect dns-prefetch" href="//www.google-analytics.com">
<link rel="preconnect dns-prefetch" href="//www.google.com">
<link rel="preconnect dns-prefetch" href="//www.google.co.jp">
<link rel="preconnect dns-prefetch" href="//www.googleadservices.com">
<link rel="preconnect dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="preconnect dns-prefetch" href="//bid.g.doubleclick.net">
<link rel="preconnect dns-prefetch" href="//stats.g.doubleclick.net">
<link rel="preconnect dns-prefetch" href="//www.googletagmanager.com">
<link rel="preconnect dns-prefetch" href="//code.jquery.com">
<link rel="preconnect dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect dns-prefetch" href="//www.googletagmanager.com">
``

#preload属性
次にpreload属性をhead内に指定します。

###考えられる使用例
・css
・js
・font
・image

```html
<link rel="preload" href="/assets/css/style.css" as="style">
<link rel="preload" href="/assets/fonts/icomoon/icomoon.ttf?etnesh" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/assets/js/vendor.bundle.js" as="script">
<link rel="preload" href="/assets/js/app.bundle.js" as="script">
<link rel="preload" href="/assets/img/top/mainv_pc.png" as="image">

ファーストビューや大きな画像があればそれもpreloadで指定しておいた方がいいでしょう。

#各指定について

jsの指定は以下のようにしています。
defer属性を追加することにより、非同期処理となります。ただ読み込み順によってはうまく動作しないこともありますので、要注意です。

<script src="/assets/js/vendor.bundle.js" defer></script>
<script src="/assets/js/app.bundle.js" defer></script>

imgの指定は以下のようにしています。

<img src="" width="980" height="300" alt="" loading="lazy">

loading="lazy"を書いておくと、ブラウザによって適切なタイミングでロードされます。
ページの読み込み中にレイアウトがシフトしないように、widthとheight属性を記述しましょう。

PCとSPで画像を出し分ける場合はpictureタグを使用します。

<picture>
 <source srcset="/assets/img/top/section_ttl_sp.png" media="(max-width:750px)" width="750" height="310">
 <img loading="lazy" width="980" height="300" src="/assets/img/top/section_ttl_pc.png" alt="">
</picture>

SPのみ画像を表示させたい場合はダミーの画像を読み込ませます。

<picture>
 <source srcset="/assets/img/top/section_ttl_sp.png" media="(max-width:750px)" width="750" height="310">
 <img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" alt="">
</picture>

ファーストビューで見える画像はloading="lazy"を指定しても意味がないので、
decoding="async"を指定します。

<picture>
 <source srcset="/assets/img/top/section_ttl_sp.png" media="(max-width:750px)" width="750" height="310">
 <img decoding="async" width="980" height="300" src="/assets/img/top/section_ttl_pc.png" alt="">
</picture>

画像の容量が重いと読み込み速度に大きく影響するので、軽量化しましょう。