サイト高速化のために普段していることをまとめます。
しっかり対策することにより、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>
画像の容量が重いと読み込み速度に大きく影響するので、軽量化しましょう。