なぜShopifyストアは遅くなるのか？
衝撃のデータ:
- ページ速度1秒遅延 → CVR7%低下
- 3秒以上のロード → 直帰率53%
しかし、多くのShopifyストアは平均ロード時間3.5秒です。つまり、売上の半分以上を逃しています。
パフォーマンス劣化の5大原因
1. アプリの過剰インストール（最大の原因）
// ❌ BAD: 20個のアプリ = 20個のJavaScriptファイル
<script src="app1.js"></script>
<script src="app2.js"></script>
// ... x20
// 結果: 初回ロード5秒、Lighthouseスコア30点解決策:
- 使っていないアプリを即座にアンインストール
- 機能が重複するアプリを統合
- 月1回のアプリ棚卸しルーチン化
2. 最適化されていない画像
{% raw %}
<!-- ❌ BAD: 5MB の画像をそのまま表示 -->
<img src="{{ product.image }}" alt="Product">
<!-- ✅ GOOD: WebP + srcset + lazy loading -->
<img
src="{{ product.image | image_url: width: 800, format: 'webp' }}"
srcset="
{{ product.image | image_url: width: 400, format: 'webp' }} 400w,
{{ product.image | image_url: width: 800, format: 'webp' }} 800w,
{{ product.image | image_url: width: 1200, format: 'webp' }} 1200w
"
sizes="(max-width: 768px) 100vw, 50vw"
loading="lazy"
alt="{{ product.title }}"
>
{% endraw %}3. 不要なJavaScript
削減テクニック:
// Defer non-critical scripts
<script defer src="analytics.js"></script>
// Async for independent scripts
<script async src="chatbot.js"></script>
// Conditional loading (モバイルのみ)
if (window.innerWidth < 768) {
loadScript('mobile-specific.js');
}4. フォント読み込みの最適化不足
<!-- ❌ BAD: フォント読み込みでレンダリングブロック -->
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
<!-- ✅ GOOD: preload + font-display -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">5. サードパーティスクリプト（Google Analytics等）
// ✅ GOOD: GA4を遅延ロード
window.addEventListener('load', function() {
setTimeout(function() {
// GA4初期化
gtag('config', 'G-XXXXXXXXXX');
}, 3000); // 3秒後に読み込み
});高速化10の実践施策
施策1: アプリの断捨離
# 現在のアプリ数確認
Settings → Apps and sales channels
# 目標: 10個以内
# 推奨: 5-7個が理想削減チェックリスト:
- 過去30日間未使用のアプリをアンインストール
- 同じ機能のアプリを統合
- ネイティブShopify機能で代替可能なアプリを削除
施策2: Critical CSS インライン化
<head>
<style>
/* Above the fold の最小限CSS */
.hero { display: flex; min-height: 100vh; }
.header { position: fixed; width: 100%; }
</style>
<!-- その他のCSSは非同期読み込み -->
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>施策3: 画像のNext-Gen Formats
{% raw %}
<!-- WebP/AVIF優先、フォールバック付き -->
<picture>
<source
type="image/avif"
srcset="{{ product.image | image_url: width: 800, format: 'avif' }}"
>
<source
type="image/webp"
srcset="{{ product.image | image_url: width: 800, format: 'webp' }}"
>
<img
src="{{ product.image | image_url: width: 800 }}"
alt="{{ product.title }}"
>
</picture>
{% endraw %}施策4: Liquid Rendering 最適化
{% raw %}
<!-- ❌ BAD: 重いループ -->
{% for product in collections.all.products %}
{{ product.title }}
{% endfor %}
<!-- ✅ GOOD: ページネーション + limit -->
{% paginate collection.products by 20 %}
{% for product in paginate.collection.products limit: 20 %}
{{ product.title }}
{% endfor %}
{% endpaginate %}
{% endraw %}施策5: CDN活用（Shopify標準）
Shopifyは自動的にCDN配信されますが、さらに最適化：
// カスタムドメインでCDN効果最大化
// myshop.myshopify.com → shop.example.com
// DNS設定でCNAME追加施策6: Preconnect/Prefetch
<head>
<!-- サードパーティドメインへの事前接続 -->
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<!-- 次ページのプリフェッチ -->
<link rel="prefetch" href="/collections/bestsellers">
</head>施策7: JavaScript Bundle 分割
// Shopify Theme App Extensions活用
// アプリごとにバンドル分割
// 必要な時だけ読み込み
// 例: カートにアイテムがある時だけ Klaviyo読み込み
if (cart.item_count > 0) {
import('./klaviyo-cart.js');
}施策8: Service Worker (PWA化)
// sw.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/collections/all',
'/products/bestseller',
'/assets/theme.css',
]);
})
);
});施策9: Shopify Function活用
// Checkout Extensibility で軽量化
// 従来のカスタムJSを Shopify Function に移行
// → レンダリングブロック削減施策10: モニタリング自動化
// Lighthouse CI導入
// GitHub Actionsで自動スコア計測
// PR毎にパフォーマンスチェック
// lighthouse-ci.yml
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- run: lhci autorunBefore/After 実例
Case: アパレルEC「FashionHub」
改善前:
- Lighthouseスコア: 35点
- LCP: 4.2秒
- CLS: 0.28
- モバイル離脱率: 68%
改善後（施策1-10実施）:
- Lighthouseスコア: 92点
- LCP: 1.1秒 (-74%)
- CLS: 0.05 (-82%)
- モバイル離脱率: 31% (-54%)
- CVR: 2.1% → 3.8% (+81%)
日本市場特有のパフォーマンス考慮点
1. 日本語フォントの重さ
Noto Sans JPなど日本語Webフォントは英語フォントの5-10倍のファイルサイズになります（フル収録で2-3MB）。最適化なしに読み込むとLCPを1秒以上引き伸ばす要因に。
対応:
/* JIS第一水準のみ収録、約400KBに圧縮 */
@font-face {
font-family: 'Noto Sans JP';
font-display: swap;
src: url('/fonts/noto-jp-subset.woff2') format('woff2');
unicode-range: U+3000-303F, U+3041-3093, U+30A1-30F6, U+4E00-9FAF;
}2. CDNエッジロケーション
Shopify自体は東京エッジを持つため、Shopify配信の画像・HTMLは日本国内で高速です。注意点は第三者画像CDNを使う場合：
- ✅ 日本ノードあり：Cloudflare、Fastly、Akamai、AWS CloudFront（東京リージョン）
- ⚠️ 日本ノード弱め：一部の海外CDN、設定によってはus-east-1経由になるサービス
確認方法: Chrome DevTools > Network > 画像リクエストのResponse Headers > cf-rayやx-cacheから実際の配信エッジを確認。
3. コンビニ決済・代引きアプリのJS
日本特有の決済方法（コンビニ、代引き、Paidy、atone）を追加するアプリは、決済ページ以外でも自動読み込みされるケースが多く、トップページのJS実行時間を300-800ms圧迫することがあります。
対応:
{% raw %}
{% comment %} 決済関連スクリプトは決済ページ以外でdefer {% endcomment %}
{% if template contains 'checkout' or template == 'cart' %}
<script src="{{ 'konbini-app.js' | asset_url }}" defer></script>
{% else %}
{% comment %} それ以外のページでは preload しない {% endcomment %}
{% endif %}
{% endraw %}4. モバイル比率の高さ
日本ECのモバイル比率は80%超のケースが珍しくありません（US平均は60-70%）。Core Web Vitalsのモバイルスコアが検索ランクに直結するため、デスクトップが完璧でもモバイルが弱ければ事業インパクトは限定的。モバイル優先で最適化する判断は他市場より強めに振るべきです。
5. 楽天 / Yahoo! ショッピング比較バイアス
日本ユーザーは楽天・Yahoo!ショッピングの体験に慣れているため、**画像の遅延ロードによる「カクつき」**への耐性が低い傾向があります。Lazy loadingは必須ですが、loading="lazy"単独だと初回スクロール時の画像ポップインが目立つことがあります。
対応: placeholder（LQIP - Low Quality Image Placeholder）とaspect-ratioを組み合わせ、画像読み込み完了前にレイアウトが安定するように。
<img
src="data:image/svg+xml;base64,..." {/* tiny LQIP */}
data-src="{{ product.image | image_url: width: 800 }}"
loading="lazy"
decoding="async"
width="800"
height="800"
style="aspect-ratio: 1; background: #f0f0f0;"
alt="{{ product.title }}"
>高速化チェックリスト
- アプリ数10個以内
- 全画像にloading=“lazy”
- WebP/AVIF形式使用
- Critical CSS inline化
- サードパーティスクリプトdefer
- Lighthouseスコア85点以上
- LCP 2.5秒以内
- CLS 0.1以下
まとめ
Shopifyストアの高速化は技術的な施策と運用ルールの両輪が必要です。特に：
- アプリは必要最小限に
- 画像は必ず最適化
- 定期的なパフォーマンス監視
DEMETIOでは、Shopifyパフォーマンス監査サービスを提供しています。無料診断も実施中です。
関連記事: