HTML

Scriptの読み込み

unpkg には開発用と本番用があり、開発用は、5倍ほど重い。
また、debugコードなどが含まれる。

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

@18 は、18の最新版が入るため、再現性がない。

babelなどのトランスパイルをランタイム内で記載する

• 初回ロード時にJSXをトランスパイル → TTI（Time to Interactive）が数秒遅延
• Babelだけで約2.5MB（gzip後でも約900KB）
• CPU使用率が高く、モバイルでは特に致命的
• キャッシュが効かない（毎回変換）

複数のCDNのフォールバック

1つのCDNだけを設定している場合、そのサイトが落ちていると、動かない。

<script
  src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"
  integrity="sha384-..."
  crossorigin="anonymous"
  onerror="loadReactFallback()"
></script>

function loadReactFallback() {
  const script = document.createElement("script");
  script.src =
    "https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js";
  script.crossOrigin = "anonymous";
  script.onerror = function () {
    document.getElementById("app").innerHTML =
      "<p>Failed to load React library</p>";
  };
  document.head.appendChild(script);
}

SRI(Subresource Integrity)

サブリソース完全性といい、CDNのソースコードが改竄されていないかをHash値でチェックする。

<script
  src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"
  integrity="sha384-[hash]"
></script>

crossorignの設定

MDN - crossorigin

crossorign属性は、audio,img,link,script,videoに対して、有効な属性である。
defaultは、 anonymous となり、。

• anonymous
  • default
  • 資格情報フラグには same-origin が設定される
• use-credentials
  • 資格情報フラグには includeが設定される

Core Web Vitals

Vercel - Core Web Vitals

ページエクスペリエンスを、Core Web Vitalsを用いて、他サイトと比較してどの程度のパフォーマンスを発揮しているかを判断するものである。
Core Web VitalsはGoogle Search Consoleを用いて確認できる