Shopify Core Web Vitals ガイド: 方法： Measure, Diagnose & Fix LCP, INP, and CLS

What Are Core Web Vitals and なぜ Do They Matter for Shopify?

Core Web Vitals are three performance metrics that Google uses to evaluate the real-world user experience of every web page. Since June 2021, they have been part of Google's page experience ranking system, meaning they directly affect where your Shopify ストア appears in search results.

The three metrics measure distinct aspects of user experience:

• LCP (Largest Contentful Paint) — How fast does the main content load? Target: under 2.5 seconds.
• INP (Interaction to Next Paint) — How quickly does the page respond when a visitor clicks, taps, or types? Target: under 200 milliseconds.
• CLS (Cumulative Layout Shift) — Does content jump around as the page loads? Target: under 0.1.

For Shopify ストアs specifically, Core Web Vitals matter for three reasons. First, Google ranks ストアs with better vitals higher in search results, giving you more organic トラフィック at zero cost. Second, faster, more stable pages convert better: research from Deloitte found that a 0.1-second improvement in load speed increased コンバージョンs by 8% for retail sites. Third, poor vitals cause visitors to leave before they ever see your products, increasing 直帰率s and wasting your paid advertising spend.

方法： Measure Core Web Vitals on Your Shopify ストア

Before you can fix anything, you need to accurately measure where you stand. There are two categories of Core Web Vitals data: field data (real users) and lab data (simulated tests).

Field データ ツール (Real User 指標)

Field data comes from actual visitors to your ストア and is what Google uses for ranking decisions. These tools provide field data:

• Google Search デメリットole: The Core Web Vitals report shows which URLs pass or fail, grouped by issue type. This is the most authoritative source because it reflects Google's own data.
• PageSpeed インサイト: Enter any URL to see both field data (from the Chrome User Experience Report) and lab data. The field data section at the top shows real-world LCP, INP, and CLS scores.
• CrUX Dashboard: Google's Chrome UX Report can be accessed via BigQuery or the CrUX API for historical trends across your entire domain.

Lab データ ツール (Simulated Tests)

Lab data is useful for debugging because you can reproduce issues consistently:

• Chrome Devツール Lighthouse: Open Devツール, go to the Lighthouse tab, and run a パフォーマンス audit. This gives you LCP, CLS, and Total Blocking Time (TBT, a proxy for INP).
• WebPageTest.org: Provides waterfall charts, filmstrip views, and detailed network timings. Set the test location to match where most of your 顧客 are.
• Chrome Devツール パフォーマンス tab: Record a page load to see exactly when LCP fires, which elements cause layout shifts, and which JavaScript tasks are longest.

Largest Contentful Paint (LCP): Diagnosing and Fixing Slow Load Times

LCP measures when the largest visible element in the viewport finishes rendering. On most Shopify 商品ページs, the LCP element is the main product image. On collection pages, it is often the hero banner. On the ホームページ, it could be a slideshow image or a large heading.

ステップ 1: Identify Your LCP Element

Open Chrome Devツール, go to the パフォーマンス tab, and record a page load. Look for the "LCP" marker in the timeline. Click it to see which DOM element was identified as the largest contentful paint. Knowing exactly which element is measured lets you focus your 最適化 efforts.

ステップ 2: Common LCP Problems on Shopify

ステップ 3: Fix LCP on Shopify

Optimize your LCP image. If your LCP element is an image, this is the single highest-impact fix. Convert images to WebP format, compress them (aim for under 200 KB for hero images), and serve them at the exact dimensions needed. Use Shopify's built-in image_url filter with width parameters: {{ image | image_url: width: 800 }}.

Preload the LCP image. Add a preload hint in your theme's theme.liquid head section so the browser starts downloading the LCP image immediately, before it encounters it in the HTML:

<link rel="preload" as="image" href="{{ featured_image | image_url: width: 800 }}" fetchpriority="high">

Eliminate render-blocking resources. Move non-essential JavaScript to the end of the body or add the defer attribute. For third-party app scripts, check if the app offers an async loading option. アプリ like EA ページ速度ブースター can help automate image 最適化 and implement lazy loading for below-fold images, ensuring only your critical LCP image loads eagerly.

Reduce server response time. Simplify complex Liquid templates that make many API calls. Avoid deeply nested loops in collection pages. Use pagination to limit the number of products rendered per page.

Interaction to Next Paint (INP): Making Your ストア Responsive

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. While FID only measured the delay of the very first interaction, INP tracks every interaction throughout the entire page visit and reports the worst-case latency. This makes INP significantly harder to pass, especially on JavaScript-heavy Shopify ストアs.

What Causes Poor INP on Shopify?

INP measures three phases of each interaction: the input delay (how long JavaScript tasks block the main thread before the event handler runs), the processing time (how long the event handler itself takes), and the presentation delay (how long it takes the browser to render the visual update).

Common causes of poor INP on Shopify ストアs include:

• Heavy third-party scripts: アナリティクス, chat widgets, review platforms, and リターゲティング pixels all add JavaScript that can block the main thread during interactions.
• Complex DOM structures: Themes with deeply nested HTML elements make rendering updates slower. Product pages with 50+ variant options or large mega-menus are common offenders.
• Unoptimized event handlers: JavaScript that runs expensive calculations on every scroll, click, or input event without debouncing or throttling.
• Layout thrashing: JavaScript that reads and writes DOM properties in rapid succession, forcing the browser to recalculate layout repeatedly.

方法： Fix INP on Shopify

監査 your JavaScript execution. Use Chrome Devツール パフォーマンス tab to record interactions (add to カート, open menu, change variant). Look for long tasks (yellow blocks over 50ms) that coincide with your interactions. Identify which scripts are responsible.

Break up long tasks. If you have custom JavaScript that performs heavy computation, use requestAnimationFrame() or setTimeout() to yield to the main thread between chunks of work. This lets the browser process user input between JavaScript execution.

Reduce third-party script impact. Load non-essential third-party scripts after user interaction rather than on page load. For example, defer loading a chat widget until the user scrolls past 50% of the page or clicks a chat button. デメリットider using a tag manager to control when scripts execute.

Simplify your DOM. Reduce the total number of DOM elements on your pages. Paginate long product lists, use show/hide toggles for content instead of rendering everything, and avoid mega-menus with hundreds of links.

Cumulative Layout Shift (CLS): Preventing Content from Jumping

CLS measures how much visible content shifts unexpectedly during the page lifecycle. A layout shift occurs when an element that is already visible changes its position. Shifts caused by user interaction (like clicking an accordion) are excluded from the score.

Common CLS Culprits on Shopify

方法： Fix CLS on Shopify

Set explicit dimensions on all images and videos. Every <img> tag should have width and height attributes. This allows the browser to reserve the correct space before the image loads. In Shopify Liquid, use the image object's width and height properties:

<img src="{{ image | image_url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}">

Reserve space for dynamic content. If an app injects a review widget, お知らせバー, or recommendation carousel, add a CSS min-height to the container element that matches the widget's typical height. This prevents the page from jumping when the widget finally loads.

Use CSS aspect-ratio for responsive images. Instead of setting fixed pixel dimensions, use the CSS aspect-ratio property on image containers: aspect-ratio: 4/3;. This maintains the correct proportions at any screen width without causing shifts.

Avoid injecting content above existing content. Never insert banners, alerts, or cookie notices at the top of the page after load. Instead, render them server-side or position them fixed/sticky so they do not push other content down.

Shopify-Specific Core Web Vitals ベンチマークs

Understanding where the average Shopify ストア falls helps you set realistic targets. Based on CrUX data for Shopify-hosted sites:

CLS is the metric most Shopify ストアs already pass, while LCP and INP are the most challenging. モバイル scores are typically 40–60% worse than desktop because of slower processors and cellular connections. Always test and optimize for mobile first, since that is what Google uses for ranking (mobile-first indexing).

ツール for Ongoing Core Web Vitals Monitoring

Fixing Core Web Vitals once is not enough. Theme updates, new apps, content changes, and seasonal トラフィック patterns can all degrade your scores. Set up ongoing monitoring:

• Google Search デメリットole: Check the Core Web Vitals report weekly. Set up email alerts for regressions.
• Shopify Web パフォーマンス Dashboard: Shopify provides a built-in speed score in your admin under Online ストア > Themes. While simplified, it tracks directional trends.
• Real User Monitoring (RUM): Services like SpeedCurve or web-vitals.js let you collect field data directly from your visitors for granular analysis.
• Automated Lighthouse CI: If you use custom theme development, integrate Lighthouse CI into your deployment pipeline to catch regressions before they go live.

The Impact of Shopify アプリ on Core Web Vitals

Every app you install on your Shopify ストア has the potential to impact Core Web Vitals. The degree of impact depends on how the app injects its code, when scripts execute, and how much DOM manipulation occurs.

When evaluating apps, look for these qualities:

• Asynchronous loading: Good apps load their JavaScript asynchronously so they do not block rendering.
• Minimal DOM injection: Well-built apps inject minimal HTML and avoid large, complex DOM trees.
• Lazy initialization: The best apps do not run any code until their functionality is actually needed (e.g., a ポップアップ only initializes when triggered).
• CDN-hosted assets: アプリ should serve their scripts and styles from a CDN, not from a slow origin server.

アプリ like EA ページ速度ブースター are specifically designed to improve Core Web Vitals by automating image 最適化, implementing intelligent lazy loading, and reducing the performance overhead of media-heavy pages. Rather than adding performance cost, these utility apps actively reduce it.

A ステップ-by-ステップ Core Web Vitals Improvement Workflow

Follow this workflow to systematically improve all three Core Web Vitals on your Shopify ストア:

1. Baseline: Run PageSpeed インサイト on your ホームページ, top collection page, and top 商品ページ. Record LCP, INP, and CLS for each.
2. Identify LCP elements: Use Chrome Devツール to find the LCP element on each page type. Optimize that specific element first.
3. Optimize images: Convert all images to WebP, compress them, set explicit dimensions, and preload the LCP image on each template.
4. 監査 JavaScript: Use the Coverage tab in Devツール to find unused JavaScript. Defer or remove it. Check each app's impact.
5. Fix CLS: Use the Layout Shift Regions checkbox in Devツール Rendering tab to visualize shifts. Add dimensions and reserve space.
6. Test INP: Interact with key elements (add to カート, variant selectors, search, menu) while recording in パフォーマンス tab. Fix long tasks.
7. Validate: Re-run PageSpeed インサイト and compare to your baseline. Check Google Search デメリットole after 28 days for field data updates.
8. Monitor: Set up ongoing monitoring and re-test after any theme update, app installation, or major content change.