2026年 Core Web Vitals 技術監査

Shopify 表示速度 & Core Web Vitals 最適化セルフ監査

Googleの検索順位評価に直結する「INP」「LCP」「CLS」の3大指標を、PageSpeed Insights 90点以上へ引き上げるための原因アプリ特定と実装コードを公開します。

速度改善のゴールデンルール (TL;DR)

Google Core Web Vitals 2026基準

ファーストビュー画像は `loading="eager"` ＆ `fetchpriority="high"` で最速描画しLCPを短縮する。

チャットウィジェットや重い分析タグは `requestIdleCallback` またはスクロール後（Interaction時）に遅延読み込みしてINPを劇的に改善。

すべての画像・バナー要素に `width` と `height` または `aspect-ratio` を明示してCLS（レイアウトシフト）をゼロにする。

📋 主要スペック & 決定ファクトシート

目標LCP: 2.5秒未満 (Good)
目標INP: 200ms未満 (Good)
目標CLS: 0.1以下 (Good)

LCP 対策 (最大描画速度)

ファーストビューの画像プリロード & 最適化

目標: 2.5s以内

メインヒーローバナーの読み込みが遅延するとLCPスコアが大きく低下します。WebP形式で配信し、優先度を高めるタグを指定します。

// Liquid: ヒーロー画像のLCP最適化コード<img src="{{ section.settings.image | image_url: width: 1500, format: 'webp' }}" width="{{ section.settings.image.width }}" height="{{ section.settings.image.height }}" alt="{{ section.settings.image.alt | escape }}" loading="eager" fetchpriority="high" decoding="async" class="hero-banner-img" >

INP 対策 (応答性・操作性)

サードパーティ製チャット・タグの遅延読み込み

目標: 200ms未満

LINEチャットやカスタマーサポートウィジェット、ヒートマップタグがメインスレッドをブロックするのを防ぎます。

// JavaScript: ユーザー操作までスクリプト読み込みを遅延function loadHeavyScriptOnInteraction() { const triggerEvents = ['scroll', 'mousemove', 'touchstart']; const handler = () => { triggerEvents.forEach(e => window.removeEventListener(e, handler)); // ここで重いチャットウィジェット等を動的挿入 const script = document.createElement('script'); script.src = 'https://widget.example.com/chat.js'; script.async = true; document.body.appendChild(script); }; triggerEvents.forEach(e => window.addEventListener(e, handler, { passive: true, once: true })); } loadHeavyScriptOnInteraction();