GTMの設置
※WebフォントやSNS埋め込みの場合は、他のhref属性を指定する
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="preconnect dns-prefetch" href="//www.googletagmanager.com" />
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->重いアセットファイル
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="font.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="script.js" as="script" />
<link rel="preload" href="image.webp" as="image" />scriptタグ
<script src="script.js" defer></script>imgタグ
<img
src="sample.webp"
<!-- 画像がどのサイズで配置されるかを指定 -->
<!-- 下記の場合は基本は画面幅いっぱいに表示され、45remの画面幅のときには画面幅の半分の幅で表示される設定 -->
sizes="100vw, (min-width: 45rem) 50vw"
<!-- ビューポート幅による画像切替の指定 -->
<!-- 下記の場合は360px（デバイスピクセル比が2の場合は180px）までは「sample-360.webp」、720px（デバイスピクセル比が2の場合は360px）までは「sample-720.webp」... という設定 -->
srcset="sample-1440.webp 1440w, sample-720.webp 720w, sample-360.webp 360w"
decoding="async"
loading="lazy"
width="1000"
height="750"
alt=""
/><!-- サポートされている画像形式で切り替える場合 -->
<picture>
<source srcset="img/image.avif" type="image/avif">
<img ~ />
</picture><!-- avif対応＋画面幅で切り替える場合 -->
<picture>
<source srcset="./assets/images/sp.avif 1x, ./assets/images/sp@2x.avif 2x" media="(max-width: 920px)" width="1500" height="1500" type="image/avif" />
<source srcset="./assets/images/sp.jpg 1x, ./assets/images/sp@2x.jpg 2x" media="(max-width: 920px)" width="1500" height="1500" />
<source srcset="./assets/images/pc.avif 1x, ./assets/images/pc@2x.avif 2x" type="image/avif" width="1920" height="1080" />
<img class="section__bg" src="./assets/images/pc.jpg" alt="" decoding="async" width="1920" height="1080" />
</picture>