「写真が遅い」「レイアウトがガタつく」。採用サイトで起きやすいこの2大課題は、Core Web VitalsのLCP（Largest Contentful Paint）とCLS（Cumulative Layout Shift）に直結します。本記事は、原因の見つけ方と、最短で効く実装テンプレをまとめた実務ガイドです。LCPは“もっとも大きな見出し/画像/動画の描画時刻”、CLSは“意図しないレイアウトのズレ量”を評価します。
LCP改善：Hero画像 / WebP / priority hints / critical CSS
まずは「ヒーロー（ファーストビュー）に最短で到達させる」設計です。LCPはページ読み込みの全プロセスの影響を受けるため、画像だけでなくCSS/JS/ネットワーク/サーバまで面で最適化します。
- ヒーロー画像の先行取得：img要素に
fetchpriority="high"を付与し、優先度を明示します（link rel=preload と併用可）。
“The Fetch Priority API indicates the relative priority of resources.” — Optimize resource loading with the Fetch Priority API (web.dev)
- 適切な形式とサイズ：AVIF/WebPへ変換、表示サイズに合わせてサーバ生成（画像CDN推奨）。
- Critical CSS：初期表示に必要な最小のCSSだけインライン化し、残りは遅延/分割。CSSはデフォルトでレンダーブロックなので、肥大化を避けます。
- 初期JSの削減：ヒーローに不要なライブラリ/ウィジェットは遅延ロード。
チェック例（最低限の実装）
<img src="/img/hero.avif" width="1200" height="800" alt="現場で働く先輩" fetchpriority="high" decoding="async" loading="eager">
CLS改善：画像サイズ・アスペクト比・フォントFOUT/FOIT対策
CLSの主犯は「寸法未指定のメディア」「フォント切替」「遅延ロード要素」です。画像/動画/広告/埋め込みの矩形（width/height or aspect-ratio）を必ず確保し、フォントの見え方を制御しましょう。
- 画像の寸法を必ず指定：width/heightを入れると、ブラウザはアスペクト比を算出し、レイアウトのズレを防げます。
“Prevent layout shifts by setting width and height attributes.” — Optimize Cumulative Layout Shift (web.dev)
- レスポンシブ比率：CSSの
aspect-ratioで比率を固定。iframe/動画にもプレースホルダを設ける。 - Webフォント：
font-display: swapでFOIT（文字が消える）を回避、必要なら事前読み込み＋サブセット化。
“Web fonts can impact performance… incorrect font-display could cause layout shifts.” — Optimize web fonts (web.dev)
- 遅延読み込みの占有：lazy画像・広告・計測ウィジェットには固定高さを割り当てる。
チェック例（画像と動画）
<img
src="/img/interview.webp"
width="800" height="534" loading="lazy"
alt="社員インタビューの様子">
<div class="video">
<iframe
src="https://www.youtube.com/embed/xxxxx"
title="1日の流れ"
loading="lazy"
allowfullscreen></iframe>
</div>
/* CSS */
.video { aspect-ratio: 16 / 9; }
サードパーティ（計測タグ・チャット・ABテスト）との付き合い方
第三者スクリプトは、ネットワーク要求や同期実行で描画を阻害し、LCP/CLSの双方を悪化させます。使うなら「数を減らす・読み込み方を最適化・必要ページだけで発火」が鉄則です。
- 不要なら削除：価値を生まないスクリプトは撤去（A/Bやヒートマップの常時稼働を見直し）。
- 読み込みの最適化：
async/defer、遅延実行、自己ホスト化で往復回数を削減。 - 範囲限定：応募フォームなど必要ページでのみ有効化。タグマネージャのトリガで制御。
チェック例（最小限の阻害で読み込む）
<script src="https://example.com/ab.js" defer crossorigin></script>
<script>
if (location.pathname.startsWith('/apply')) {
// フォームページだけで発火
initAB();
}
</script>
Before/Afterの測り方（実測・ラボ測定の両輪）
PSIは実世界（CrUX）の75パーセンタイルで合否判定し、Lighthouse/DevToolsは検証用のラボ値を提供します。両者は条件が異なるため差が出ます。現場では「ラボで即時確認 → フィールドで追認」の順がおすすめです。
- リリース直後：Lighthouse/DevToolsのラボ値で退行をチェック
- 運用：PSI（モバイル/デスクトップ）で定点観測、悪化ページをJQLで抽出
よくある失敗と回避策（カルーセル・埋め込み動画 など）
- カルーセルの初期化が重い：初期スライドのみ描画、残りはIntersectionObserverで遅延。ナビゲーションはCSS優先。
- YouTube埋め込みのCLS：iframeに比率枠を確保し、サムネイルプレースホルダ＋クリックで読込。
- フォント切り替えでガタつく：
font-display: swap＋メトリクス互換の代替フォント（system-ui等）を指定。
ミニ実装テンプレ（コピペ可）
<!-- 1) ヒーロー画像：優先度＋寸法 -->
<img src="/img/hero.avif" width="1280" height="720" alt="現場のファーストビュー"
fetchpriority="high" decoding="async" loading="eager">
<!-- 2) クリティカルCSS：初期ビューの最小セットをインライン -->
<style>/* above-the-fold だけ */ .hero{min-height:60svh;display:grid;place-items:center} /* ... */</style>
<!-- 3) Webフォント：FOUT許容＋事前読み込み -->
<link rel="preload" as="font" href="/fonts/brand-regular.woff2" type="font/woff2" crossorigin>
<style>@font-face{font-family:Brand;src:url(/fonts/brand-regular.woff2) format('woff2');font-display:swap}</style>
<!-- 4) 埋め込み動画：比率枠でCLS防止 -->
<div class="video"><iframe src="https://www.youtube.com/embed/xxxxx" title="1日の流れ" loading="lazy" allowfullscreen></iframe></div>
<style>.video{aspect-ratio:16/9}</style>
<!-- 5) サードパーティ：必要ページのみ -->
<script defer src="/third/chat.js"></script>
<script>if(!location.pathname.startsWith('/apply')){window.stopChat?.()}</script>
参考（一次情報の抜粋）
“To improve LCP, you have to look at the entire loading process.” — Optimize Largest Contentful Paint (web.dev)
“Prevent layout shifts by setting width and height attributes.” — Optimize Cumulative Layout Shift (web.dev)
“The Fetch Priority API indicates the relative priority of resources.” — Fetch Priority API (web.dev)
“Lab data… may not accurately represent the 75th percentile of field data.” — Why lab and field data can be different (web.dev)
コメント