Shopifyは優れたホスティング、グローバルCDN、そして気の利いたデフォルト設定のモダンなテーマを提供します。それにもかかわらず、Shopifyストアの半数がいまだに3つのCore Web Vitalsすべてで「良好」を達成できておらず、中堅ストアではモバイルLCPが3〜5秒になることも珍しくありません。
その原因はプラットフォームではありません。Shopifyストアには2つの特定の形で負担が蓄積され、そのどちらにも組み込みのクリーンアップメカニズムがないためです。このガイドでは、Shopifyストアを遅くする真の原因を影響度順に挙げ、翌年にかけて劣化するのではなく持続する修正方法について説明します。
なぜ速度は2倍重要なのか
Shopifyのページが遅いと、同時に2つの面でペナルティを受けます。
オーガニック：Core Web Vitalsは2021年以降、ランキングシグナルとして確認されています。遅いページはクロールバジェットも少なく割り当てられます。
有料：Google広告の品質スコアはランディングページの体験を考慮するため、遅いページはクリックあたりのコストが高くなります。Metaのアルゴリズムは直帰シグナルをネガティブな結果と解釈し、それに応じて配信コストを調整します。
したがって、遅いストアはオーガニックトラフィックが減り、購入する有料トラフィックのクリックあたりのコストが高くなり、獲得したクリックからのコンバージョン率も低くなります。この複合的な要因こそが、これを虚栄心のためのスコアとしてではなく、真剣に受け止める価値がある理由です。
指標と、それが実際に測定するもの
| 指標 | 測定対象 | 良好 | 不良 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | メインコンテンツが表示されるまでの時間 | 2.5秒未満 | 4.0秒超 |
| INP (Interaction to Next Paint) | タップやクリックに対するページの応答性 | 200ミリ秒未満 | 500ミリ秒超 |
| CLS (Cumulative Layout Shift) | 読み込み中にコンテンツがずれるかどうか | 0.1未満 | 0.25超 |
知っておくべきことが2つあります。
- INPはFirst Input Delayを2024年3月に置き換えました。これらは異なるものを測定します。FIDは最初のインタラクションのみを測定しましたが、INPは訪問全体の最悪のインタラクションを測定します。FIDをパスしてもINPをパスすることは保証されず、変更後にこれを再確認しなかったストアは、測定可能なランキングパフォーマンスを失っています。
- 基準は実際の訪問の75パーセンタイルであり、平均ではありません。最も遅い訪問の4分の1が悪ければ、中央値の買い物客が良い体験をしていても、パスできないことがあります。
ラボデータではなくフィールドデータ
フィールドデータの読み方：
- PageSpeed Insightsのトップセクション。ページに十分なトラフィックがある場合。その下のLighthouseスコアではなく、これを読んでください。
- Search Console > Core Web Vitalsレポート。URLパターンでグループ化されており、問題が商品ページ、コレクションページ、またはホームページのいずれにあるかを示します。
- Chrome UXレポートを直接参照し、オリジンレベルの長期的なトレンドを確認します。
フィールドLCPを毎月追跡します。月ごとに0.3秒上昇する場合、何らかの新しい問題が発生しており、監査が遅れています。これは、コンバージョン率が低下する前に問題を発見する早期警告シグナルです。
真の原因、影響度順
1. アプリのJavaScript
Shopifyストアが遅くなる最大の原因です。スクリプトを挿入する各アプリは、LCPに約150〜300ミリ秒を追加し、メインスレッド上のJavaScriptがまさにINPが測定するものであるため、INPへの影響はさらに深刻です。アプリのスタックが重いストアでは、INPが500ミリ秒を超えることが頻繁にあり、これは「不良」の範囲内です。
この問題の隠れた側面：Shopify管理画面からアプリを削除しても、そのテーマコードが常に削除されるわけではありません。ストアは数ヶ月または数年前にアンインストールされたアプリのスクリプトを蓄積し、すべてのページで読み込まれ続け、何も機能していません。
監査：
- Chrome DevTools > Coverageタブを開き、商品ページをリロードし、未使用のJavaScriptをファイルごとに確認します。これにより、どのスクリプトが読み込まれているが使用されていないかがわかります。
- テーマファイル（
theme.liquidとスニペット）でスクリプトタグを検索します。インストールされているアプリのリストと相互参照します。現在持っていないアプリからのものはすべて無駄な負荷です。 - 残りの各アプリについて、その負荷コストに見合う価値があるかどうかを自問します。レビューアプリは価値があります。3つ目のアップセルアプリは、おそらく価値がありません。
修正の順序：まず不要なコードを削除し（無料、デメリットなし）、次に使用していないアプリをアンインストールし、その後、使用しているアプリをネイティブ機能やテーマコードで置き換えられないか評価します。
2. テーマのドリフト
アプリの肥大化のゆっくりとしたバージョンであり、誰も気づかないうちに発生します。
「小さな」カスタマイズのたびに何かが追加されます。カスタムのアナウンスバーはスタイルシートを追加し、ヒーロービデオはスクリプトを追加し、新しい商品カードのレイアウトはCSSを追加します。テーマにはこれらをクリーンアップする組み込みの方法がありません。そのため、コードベースは2年間増加し続け、誰も何も削除しないため、累積的な重みが徐々にLCPを圧迫します。
これを防ぐ規律：テーマコードをアプリコードのように扱います。追加するたびにどこか別の場所から削除するか、LCPは上昇し続けます。実際には、新しいセクションを追加するときに、それが置き換えた古いセクションがまだ読み込まれているかどうかを確認することを意味します。
3. 最適化されていないヒーローおよび商品メディア
ShopifyのほとんどのページのLCP要素は、ホームページのヒーロー画像またはPDPのメイン商品画像です。この画像が大きい、圧縮されていない、または間違った形式で提供されている場合、他のすべてを最適化してもLCPは遅くなります。
修正方法（順序）：
-
LCP画像をプリロードします。ヘッド内の
<link rel="preload" as="image">は、ブラウザに最初にそれをフェッチするように指示します。 -
LCP画像要素に
fetchpriority="high"を追加します。これにより、レンダリングをブロックするキューをバイパスします。 - WebPまたはAVIF形式で提供します。Shopifyの画像フィルターがこれを処理します。テーマが適切な形式と幅を要求していることを確認してください。
- 適切なサイズを要求します。2400pxの画像を600pxのコンテナに提供することは、ダウンロードのほとんどを無駄にします。
- LCP要素を遅延読み込みしてはいけません。下記参照。
loading="lazy"は、折りたたまれた領域の下にある画像にのみ追加し、ヒーロー画像や最初の商品画像には明示的に追加しないでください。
4. レンダリングをブロックするリソース
<head>内のCSSとJavaScriptで、ブラウザが何かを表示する前にダウンロードして処理しなければならないものです。重いテーマでは、これがLCPの主要な要因となります。
Want a real number for your store?
Send us the URL and the catalog size. We will come back with a fixed quote and the template list it covers, no call required unless you want one.
Get a build quote
