表示速度と画像・動画

1. 何を確認するか

対象のテンプレートとアプリのスクリプト、画像の大きさ、実際の利用者と試験の環境で測った値を集める

• 対象のテンプレートで読み込むアプリのスクリプト、画像の寸法とファイルの大きさ、動画の読み込み方を集めます。
• 実際の利用者で測った値（Search Consoleなどで店の持ち主が見られる範囲）と、試験の環境で測った値を分けて記録します。見られない値は「分からない」とします。
• LCPになる画像が遅延読み込み（lazy）になっていないか、画像に寸法を指定していてCLS（表示のずれ）を起こしていないかを見ます。

2. 何を変えるか

要る機能を残して、要らないスクリプトと画像の転送を減らし、寸法・srcset・posterを指定する

• 使っていないアプリのスクリプトを止め、画像には寸法・画面の幅に合わせた画像（srcset）・合った形式を指定します。
• 動画には表紙の画像（poster）を付け、利用者が押したときに再生します。自動再生はしません。
• 変更はアプリを入れた・外したの差として記録し、機能ごとに戻せるようにします。

3. 使い勝手を守ること

速くするために商品写真・絞り込み・動画での確認を消さない。自動再生はしない

• 速くするために、商品写真・絞り込み・動画での確認を消しません。
• キーボード操作と拡大表示（200%）で、主な情報と操作が欠けないことを確かめます。

4. テスト

スマートフォンの遅い回線の条件でLCPとCLSを測り、キーボード操作、動画を再生したあと、アプリを入れた・外したときの差を記録します。

1. スマートフォンの遅い回線でのLCPとCLS
2. キーボード操作
3. 動画を再生したあと
4. アプリを入れた・外したときの差

試した環境と日付を記録し、PC・スマートフォン・キーボード操作での違いを残します。

5. できあがるもの

条件を付けた変更前後の計測。試験の環境で測った値を、実際の利用者の値（75パーセンタイル）や売上の改善の証明にしない

• 変更の前後で測った結果。条件（端末・回線・日時・試験の環境か実際の利用者か）を付けて渡します。
• アプリのスクリプトの一覧と、止めた場合の影響。

無料・標準機能で足りる場合

Shopifyの標準の機能と今の設定で足りる場合は、アプリを追加しません。足りるなら、それで終わりです。入れているアプリが同じ役割を持つなら、そのアプリが出しているものを確かめてから、重なっている分を外します。

このモジュールで扱わないこと

• 試験の環境での改善を、実際の利用者の値（75パーセンタイル）や売上の改善として報告しません。
• Shopifyが管理する通信の仕組みや配信網（CDN）の設定は、変える対象になりません。

店の持ち主が決めてから行う操作

次の操作は、店の持ち主が対象と範囲を確かめて決めてから行います。それまではテーマのコピーやプレビューで作業を続け、本番の設定・テーマ・データには触れずに、差分と戻す手順だけをそろえておきます。決めるのは一件ずつです。

• アプリのスクリプトを本番で止める
• 画像・動画をまとめて変換する
• テーマの読み込み順を変えて本番へ反映する

作業の順番

1. 本番の管理権限は使わず、書き出したデータ・テーマのコピー・例のデータで、今の状態を一覧にします。
2. テーマの版を控え、標準の機能で足りることと足りないことを分けます。
3. 変える所を最小にした差分、テスト用のデータ、元に戻す手順をそろえます。
4. PC・スマートフォン・キーボード操作で、表示とデータの変化を記録します。
5. 店の持ち主が変更を決めてから、本番に反映します。

関連記事

関連する記事は準備中です。

出典と確認日

• WCAG 2.2 — 確認日 2026-09-07
• Core Web Vitals — 確認日 2026-09-07