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=""
/>